こんにちは、技術1課の加藤です。
最近、コロナウイルスの話題で持ちきりですね。弊社でもコロナ対策としてリモートワークが推奨となり、多くの社員が自宅で仕事をしています。
しかし環境が整っていなければ、突然リモートワークをやろうと思ってもなかなか難しいもの。
どうやって連絡とるの？ どうやって会議するの？ どうやって勤怠管理するの？ — 悩みは尽きません。
さて今回は、数あるお悩みの中から「どうやってリモートで開発をすればいいの？」というものをピックアップ。
こちらにお答えするサービス、 Cloud9 をご紹介します。
Cloud IDE - Cloud9 とは？
このサービスはクラウドベースの統合開発環境、通称 Cloud IDE と呼ばれる製品です。
- コードエディタ
- デバッガ
- ターミナル
を含む統合開発環境を、ネットワーク越しに利用することができます。
JavaScript, Python, PHPなどのプログラミング言語に必要なツールがあらかじめパッケージ化されており、面倒な環境設定を行わずに使い始められるのも強みの1つ。
そして何より、このサービスには 開発環境の共有 や 複数人での同時編集 機能がついています。これがとてもとても便利！
「ちょっとここのコードの意味を知りたい」「ここどう書けばいいのか聞きたい」といったライトな確認から、「リモートでペアプロしたい」「一緒にコードを編集したい」といったガッツリ開発まで、幅広く利用することができます。
そんな Cloud9。実際に利用してみましょう。
Cloud9 を使って 開発環境を作成しよう
AWS のアカウントは既にお持ちの前提で手順を進めます。
もしまだアカウントを持っていない、という方がいらっしゃいましたら、以下の手順にてアカウント開設を行っておいてください。
(※ AWS には無料利用枠があります。アカウント作成後12カ月以内であれば Cloud9 も無料で利用することができますので気軽に試してみてください！)
AWSコンソールにログインして、 [Cloud9] を検索、ページを表示します。トップ画面に現れる [Create environment] ボタンを押下し、環境作成画面を開きましょう。
環境名 (必要であれば説明文も)を記入し [Next step] を押下します。
次に環境の詳細設定を行います。今回は無料利用枠の範囲に収まるよう以下の内容で設定を行なっていきますが、必要に応じて値を変更してください。
| 項目 | 説明 | 値 |
| Environment type | 新規でEC2インスタンスを作成するか、既に存在する環境にアクセスするかを決めます | Create a new instance for environment (EC2) |
| Instance type | EC2 インスタンスの性能を決めます | t2.micro (1 GiB RAM + 1 vCPU) |
| Platform | インスタンスの OS を決めます | Amazon Linux |
| Cost-saving setting | どれくらいの時間利用していないとインスタンスを自動停止するか設定します | After 30 minutes(deafault) |
| IAM role | Cloud9 が利用する IAM ロールを指定します | デフォルトのまま |
| Network settings (advanced) | インスタンスを起動するネットワーク環境(VPC)について設定します | デフォルトのまま |
設定が終わりましたら [Next step] を押します。
Review の画面が開くので、今まで設定した内容を確認します。
問題がなければ [Create environment] を押し、環境を作成してください。
作成中画面が表示されますのでしばらく待ちます。
Cloud9 のアイコンと文字が消えれば作成完了です！
Cloud9 を使ってみよう
Cloud9 の画面の説明
環境が出来上がったところで、 Cloud9 を使ってみましょう。
まずは、軽く画面の説明をします。
Cloud9 は以下のような画面構成となっています。
画面左側にフォルダツリーが表示されます。こちらからファイルを選択し、編集を行います。
フォルダツリーでは、一番上のディレクトリが Cloud9Test となっていますが、これは実際の環境における /home/ec2-user/environment を指しています。
右上側が編集画面になります。フォルダツリーで選択したファイルが表示されるので、コーディングはここで行います。
そして右下がターミナル画面です。今回EC2上に環境を作成しているため、デフォルトで /home/ec2-user/environment がカレントディレクトリとなっています。
Cloud9 でプログラムを書こう
実際に簡単なプログラムを書いてみましょう。
今回はPythonを使ってFizzBuzzを書いてみます。
ファイルを作成
Cloud9Test を右クリックし、下の方にある [New file] を選択します。
するとファイルが作られるので、名前欄に fizzbuzz.py と入力してEnterを押してください。
作成したファイルをダブルクリックして開きましょう。編集画面に空のページが開けばOKです。
コードを編集して実行
簡単に FizzBuzz のコードを用意したので以下を編集画面に貼り付けてください。
for i in range(10):
if i % 15 == 0:
print('fizz')
elif i % 3 == 0:
print('fizz')
elif i % 3 == 0:
print('fizz')
else:
print(i)
[File] -> [Save] で上書き保存してください。(Ctrl + SでもOKです)
ではコードを実行してみましょう。画面上部にある [Run] ボタンをクリックすると自動的に開いているコードを実行してくれます。
ターミナル画面に結果が出力されればOKです。
作成したプログラムを共有しよう
前述の通り、Cloud9 には開発環境の共有 や 複数人での同時編集 を行える機能がついています。次はこちらの機能を使ってみましょう。
画面右上にある Share ボタンを押し、環境をシェアするための設定画面を開きます。
少しだけ手順が多いですが、難しくはないのでやってみましょう。
IAMユーザーを作る
環境にアクセスできるようにするため、IAMユーザーを作成します。
画面に表示された create a new user をクリックしてください。
IAMユーザー作成画面に移ります。
まずユーザーの詳細設定をします。
任意のユーザー名を入力し、 AWS マネジメントコンソールへのアクセス にチェックを入れ [次のステップ: アクセス権限] を押下します。
次にユーザーの権限を設定します。
既存のポリシーを直接アタッチ を選択し、AWSCloud9User を検索してチェックを入れます。
[次のステップ: タグ] を押下し次の設定に移ります。
タグは特に設定する必要がないので [次のステップ: 確認] を押下します。
すると今までに設定した値が一覧表示されます。内容確認の上問題がなければ [ユーザーの作成] を押下します。
成功するとログイン情報が確認できる画面が表示されます。
またログイン情報が記載されたCSVファイルがダウンロードできるので、こちらをダウンロードの上、共同編集を行いたい相手に送信してください。
([E メールの送信]というリンクもあります。こちらを押せばメールでログイン情報を共有することもできます。)
Cloud9 環境を共有する
IAMユーザーの共有が終わったら、Cloud9 の画面に戻ります。
Invite Members 欄のテキストボックスに先ほど作成したIAMユーザーの名前を入力します。
閲覧権限だけを渡したい場合は R を、編集権限も同時に渡したい場合は RW を選択し、[Invite] ボタンを押下します。
Who has access の欄に 権限を渡したユーザーの名前が表示されれば準備OKです。
Links to share の欄の Environment に書かれている Cloud9 のURL を、環境を共有したい相手にシェアしてください。
共有されたCloud9 環境にアクセスする
シェアされた Cloud9 の URL にアクセスします。
すると AWS コンソールへのログインを求められるので、事前に受け取っておいた IAM ユーザーの情報を入力し、ログインしましょう。
(この際、初めてログインした場合にはパスワードの変更を求められます。古いパスワードと新しいパスワードを入力し、変更しておきましょう。)
正しくログインができれば、Cloud9 の環境が表示されます。
リモートでレビューを行ったり、ペアプロをしたり、重い思いの方法で活用してあげてください！
まとめ
今回はリモートチーム開発のススメ、ということで Cloud9 の環境作成方法および環境の共有について共有させていただきました。
突然のリモートワークでも Cloud9 を活用してあげれば生産性を下げることなく開発に取り組むことができます。
この便利さ、ぜひ一度体感してみてください！！
おまけ
今回紹介した共同編集を、VSCode というエディタを使って行うこともできます。
以前ブログ記事を書いていますので、こちらもぜひご覧ください。
