見出し画像

Cloud9 と Visual Studio Code を使って社内環境に依存しない開発環境を手に入れる

CTC Buildサービスチーム

Solution Architect の t_maru です。

今回は Cloud9 と Visual Studio Code (以降、VSCode と表記) を使った開発環境の構築方法とそのメリットについて解説します。


開発環境を取り巻く問題

開発環境と言っても様々な捉え方があると思いますが、今回は開発者がそれぞれ機能開発をするための local 開発環境についてお話します。

Local の開発環境といえば、プロジェクトで標準的なものが表示されている場合と、開発者が社内や部署のルールの許す範囲内で各自が使いやすいツールを組み合わせて使っているような場合などがあるのではないかと思います。

標準的な開発環境が一律で提供されている場合などはあまり問題になりませんが、例えば使用している端末が MacOS を利用している人と Windows を使用している人が混在している場合などはそれぞれのプラットフォームでスクリプトなどが動くように注意を払って設定や開発をする必要があります。

1 開発者が複数の端末を開発で自由に使えるような状況はあまり多くないと思いますので、どちらかのプラットフォームでのみしか実際に動作確認をすることができず、もう一方のプラットフォームへの対応は机上で対応せざるおえないような状況が簡単に生じ得るのではないかと思います。

こういった場合、ある開発者が作った機能やスクリプトが違う環境を持っている開発者の環境ではエラーとなりそのままでは動かない、というような状況も発生する可能性がありますが、基本的に開発の主目的はプロダクトを作ることであると思いますので、それ以外の余計なところで時間を取られることはできる限り避けなければなりません。

開発環境を揃えれば良いだけといえばそれだけなのですが、やはり開発者が複数の端末を自由に調達できるとも限りません。実際、私が関わった案件では Windows, Mac 混在の状況となり今回ご紹介する Cloud9 と VSCode を活用した開発環境の整備にたどり着きました。

Cloud9 の紹介と Cloud9 を使うことのメリット

Cloud9 とは AWS が提供しているクラウドベースの統合開発環境 (IDE) です。

実体としては、EC2 のインスタンスが作られた、ブラウザなど外部から接続するために必要な設定が自動的に実行され、ユーザーは Web ブラウザや SSH を使って Cloud9 の環境にアクセスして開発をすることができるようになります。

Cloud9 についての詳細は下記の公式ドキュメントを参照してください。
https://aws.amazon.com/jp/cloud9/

Cloud9 をそれぞれの開発者ごとに 1 環境つくり、その環境を開発で使うことでプロジェクトメンバーの開発環境が皆同じ状態になりますので、設定やデバッグにおいてプラットフォームによる影響を受けることがなくなるメリットがまずあります。

また、Cloud9 を使うことでネットワークに起因する問題も解決できます。例として、同じプロジェクトのメンバーが 1 箇所の拠点に集まることができなかったというケースを考えてみようと思います。

各メンバーが置かれているネットワーク環境が拠点により異なる可能性がありますので、例えば社内のファイアウォールで開発で必要なパッケージの取得が拒否されてしまうというようなケースが起きる可能性があります。

ネットワークに関する設定は情報システム部門が管理していることが多いと思いますので、気軽に設定変更などできるはずもなく、また申請ベースで変更してもらえたとしても変更が完了するまでそれなりの時間がかかってしまうことが想定されます。

Cloud9 を使っている場合、Cloud9 は AWS 上の VPC ネットワーク上に構築されますので開発者が AWS アカウントの管理権限を持っている場合に置いてはこういったネットワークの問題からは開放されることになります。(各社 AWS 上のネットワーク管理ルールや管理部署などがあり結局物理的なネットワークに対する変更と同様の手順を踏まなければいならない場合もあるとは思いますが、今回は開発者がインフラも含めて自由に触ることができる環境にあるとします)

もう 1 点 Cloud9 を使う場合のメリットとして紹介したいのが、VPC に格納されるサービスにシームレスに接続できることです。

RDS や DocumentDB など VPC 内部に配置されるサービスに対して、Security Group を設定するだけで接続できるようになることは、実際に AWS サービス上での動作を手軽に確認することができるので良い点かと思います。(ネットワーク構成により Security Group 以外の設定も必要になります)

通常 Local の開発環境は Docker などの技術を使ってコンテナ化し、各開発者個人の PC 上ではこれらのコンテナを使って開発を進めていくことが多いかと思いますが、使い勝手は変わらず AWS サービスに直接アクセスしたり動作確認/検証をすることができるのはメリットではないでしょうか。

ただし、`直接アクセスを許可するのは開発環境まで`、など環境に応じたセキュリティの担保は必要ですので、商用環境を含めすべての環境にシームレスに接続できるような構成にならないようにご注意ください。

Cloud9 とVSCode

Cloud9 はブラウザで開発できるという点がアピールされていることが多いですが、SSH アクセスして使用することもできます。

SSH アクセスする方法はいくつかありますが、Systems Manager の Session Manager 経由で SSH アクセスすると Security Group で 22 番ポートを開放する必要がなく安全に使用することができますので、この方法をおすすめします。

VSCode の Remote SSH エクステンションを使用することで SSH でリモートサーバーに接続することができるため、このエクステンションで Cloud9 のインスタンスに接続を行う形となります。

案件にて Cloud9 と VSCode を連携させた環境で開発を行ったのですが、ある程度の太さのネットワークを用意することができれば Local PC 上でコードを書いているのと大差がなく、「ネットワーク経由だから遅延して使い物にならないだろう」という予想が良い方向で裏切られました。

では、VSCode で Cloud9 に接続して開発を行うために必要な手順を以下で説明します。

Cloud9 と VSCode の設定例

Local PC で必要な作業

  • Systems Manager プラグインのインストール

  • SSH アクセスの際に使用する秘密鍵、公開鍵を生成

  • SSH する際に使用する Systems Manager proxy の設定

Cloud9 で必要な作業

  • 公開鍵の登録

  • 自動停止スクリプトの修正

  • ディクスの拡張 (任意)

Local PC での作業

Systems Manager のプラグインについては公式のドキュメントに記載がありましたので、こちらを参考にインストールしてください。
https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-working-with-install-plugin.html

SSH 時に使用する鍵の生成ですが `~/.ssh` ディレクトリにて以下のコマンドのように生成してください。 4096 ビットの RSA の鍵が用意できればよいので、別のツールを使っていただいても構いません。

ssh-keygen -b 4096 -t rsa -f id_rsa_vscode_cloud9

最後に SSH 接続する際に Systems Manager を使用しますので、下記のリポジトリの `scripts/ssm-proxy.sh` を入手し `~/.ssh` ディレクトリなどに保存して、スクリプト上部にある下記 2 点を必要に応じて変更します。

https://github.com/aws-samples/cloud9-to-power-vscode-blog

スクリプトで変更が必要な箇所

  • AWS_PROFILE

  • AWS_REGION

その後、`.ssh/config` に以下のような追記を行います。

Host cloud9
  HostName <EC2 (Cloud9) インスタンスの ID>
  User ec2-user
  IdentityFile ~/.ssh/<先程作った鍵の名前>
  ProxyCommand ~/.ssh/ssm-proxy.sh %h %p

これで Local PC の設定は完了です。

Cloud9 での作業

まず Cloud9 のインスタンスを生成します。どのように生成していただいても構いませんが、AWS の Management Console で起動するのが一番手軽だと思います。

またその際、インスタンスタイプを選ぶ項目があると思います。費用を節約する観点ではなるべく小さいインスタンスタイプを選択する必要がありますが、我々が React の Web アプリと backend の API を Cloud9 のインスタンス上に各自立てて開発をしてみたところ、最低でも `m5.large` 程度のリソースは必要そうでした。参考情報としてお使いください。

※ 以降、スクリプトや設定については Amazon Linux 2 を使った Cloud9 を例とします。

まず Local PC で生成した SSH 用の鍵の Public key (先のほどのコマンドで生成している場合は拡張子が .pub となっているもの) の中身を Cloud9 のホームディレクトリの `.ssh` ディレクトリ配下にある `authorized_keys` というファイルを開き、最後の行に記載して保存します。

次に、Cloud9 の自動停止スクリプトを修正します。

Cloud9 は特段設定を変更せずにセットアップした場合、デフォルトでは InActive の状態が 30 分続くと EC2 が自動的にシャットダウンする仕様となっています。通常はブラウザからの使用を想定しているからなのか、今回のように VSCode で SSH 接続する場合は Active 状態と判定されずに使用中に EC2 がシャットダウンしてしまう可能性がありますので、下記のリポジトリの `scripts/stop-if-inactive.sh` を参考に、`~/.c9/stop-in-active.sh` ファイルを置き換えます。

https://github.com/aws-samples/cloud9-to-power-vscode-blog

元のスクリプトを残しておきたい場合は、

sudo mv ~/.c9/stop-if-inactive.sh ~/.c9/stop-if-inactive.sh.old

このようなコマンドを使って元ファイルを別名で保存してバックアップとして残しておきます。

`stop-if-inactive.sh` を置き換えたら、実行できるように

sudo chmod 755 ~/.c9/stop-if-inactive.sh

このようなコマンドでファイルの権限を変更しておきます。

最後に必須作業ではありませんが、デフォルトで作られるディスク容量では不足の場合、各自ディスクを拡張していただければと思います。

VSCode での確認

以上までの設定が完了していれば、Remote SSH のエクステンションの画面上で `cloud9` という文字列の設定が出ているかと思いますのでそれを開くことで Cloud9 に接続することができるはずです。

あとは必要に応じて vscode の workspace 設定などをお好みで実施していただくことで自分好みの環境を作っていただければと思います。

まとめ

Cloud9 と VSCode を連携させることで、所有している PC や置かれているネットワーク環境が異なっているメンバー同士でも、同様の開発環境が Local PC 上で開発する場合と同等のパフォーマンスの環境として手に入れることができますので、開発環境の差異でお困りの方は試してみたいただければと思います。

最後にもう一度設定すべき項目をあげておきます。
※ AWS CLI のインストールや認証情報の設定、vscode のインストールなどは済んでいる想定です。

Local PC

  • Systems Manager プラグインのインストール

  • SSH アクセスの際に使用する秘密鍵、公開鍵を生成

  • SSH する際に使用する Systems Manager proxy の設定

Cloud9

  • 公開鍵の登録

  • 自動停止スクリプトの修正

  • ディクスの拡張 (任意)

みんなにも読んでほしいですか？

オススメした記事はフォロワーのタイムラインに表示されます！