cloud9による共同編集・リモート開発

 こんにちは。最近ウィルス対策の影響でテレワークの利用が広がっているようです。IT界隈の方達は慣れているとは思いますが、「トラシューやコードレビュー、ペアプロ等は対面でないと困る」という声をちらほら聞きます。新入社員が先輩に横で教えてもらうためにわざわざ出社するケースもあるようです。そこで、今回は開発の遠隔・同時編集を可能にするTipsを紹介します。利用するのはAWSのブラウザ型IDEであるcloud9のワークスペース共有機能です。

前提知識

  • cloud9のワークスペース共有機能
    • 画像の様に複数メンバでエディタ&CLIを同時に遠隔操作できます
      • 右側のタブに参加メンバが表示されます
    • 初期設定だけ完了すれば、ブラウザでURLを共有してログインしてもらうだけです
      • テレワーク時に「ちょっとここが分からないので、アドバイスを頂けますか?」と開発環境に入ってもらうと助けてもらいやすいです
        • 直接コードやコマンドを書き込んでもらうこともできます
        • Slack等のチャットだけでコードの話をするのは実際辛いです
      • 開発チームを監督する側も状況を理解しやすく、皆が幸せになれます
共同開発のイメージ
  • 対抗:VSCode LiveShare
    • Microsoftのエディターでもプラグインによって似たようなことができます
    • 個人的な使用感としては以下の差異があります
      • 自分のLocal環境を共有
        • APを起動すると恐ろしく重くなり、落ちてしまうことも…
      • 各メンバ全員がプラグインを設定する必要があり、手間取る
        • ホスト側が参加メンバ毎に権限付与する工程が毎回ある
    • VSCodeの豊富なプラグインが必要なケースもあるので、私は場合によって使い分けています。個人の好みにもよると思います。

前提条件

  • AWSアカウントを作成済み or 作成可能
  • cloud9 開発環境を作成済み
  • 読者は以下を想定
    • 開発環境のオーナー
    • IAMユーザの作成権限を持つ

cloud9環境共有手順

  • 以下の二点が必要です

    • AWSのIAM Userの作成
    • Cloud9への参加メンバの登録
  • 右上の”Share”を押下

  • 共有機能の設定画面が出ます

Cloud9への参加メンバの登録

  • 共有機能の設定画面の”Invite Members”にIAM User名を入力
  • タブで権限を設定
    • R: Readのみ
    • RW: Read & Write
  • まだ未作成の場合は”create a new user”よりAWS Consoleに飛びましょう

IAMユーザの追加

  • ★cloud9で共同編集したいだけのメンバ向けの権限についてです。最小権限の原則に従いましょう
    • アクセス許可の設定の”既存のポリシーを直接アタッチ”を選択
    • 検索欄に”cloud9”と打つ
    • AWSCloud9EnvironmentMemberを選択・付与

まとめ

 以上で複数メンバでの共同編集ができます。テレワークにおける情報伝達のもどかしさを解消して気持ちよく開発しましょう。ハンズオン研修・学習用途にも便利だと思います。

関連記事

画像ファイル
D:\Users\0000011349117\Desktop\memo_article\cloud9member

補足:Angular開発環境の構築手順(cloud9)

  • 以下を実行するだけでOKです
    1
    2
    npm install @angular/.....
    ng add @angular/material
  • 自動で入るとは思いますが、もし利用中にCDKがないというエラーが出たら以下も実行してください
    1
    $ ng add @angular/CDK
@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×