VSCode の Remote SSH と LiveShare 機能を使って擬似Cloud9する

AWS運用自動化サービス「Cloud Automator」

こんにちは、技術1課の加藤です。
みなさんエディタは何を使っていますか。

ぼくは最近導入した VSCode の使い勝手の良さに、惚れ惚れしております。

今回はVSCode布教活動「VSCode プラグインの使い方」第3弾!
(前回記事: VSCode の Live Share プラグインを使ってペアプログラミングする)
(前々回記事: VSCode の Remote – SSH 機能を使って EC2 上で開発する)

Remote – SSH プラグインと Live Share プラグインを組み合わせて使う方法ご紹介します。
これを使って、さらに便利にペアプログラミングしちゃいましょう。

 

擬似 Cloud9 ってどういうこと?

Cloud9 とは

まず Cloud9 というは、 AWS が提供しているクラウドベースの IDE になります。
もともと Cloud9 社が作っていた IDE を、 AWS が買収して組み込んだ形ですね。

こちらはオンライン IDE ということで、ネットワーク越しに扱うことになります。サーバーに IDE と編集対象のファイルを置いておくことで、誰でもどこでも編集作業を行うことが可能になります。

  • 開発環境の共有
  • 複数人での同時編集
  • ブラウザのみで編集が可能

など特徴的かつ利用しやすい機能が揃っているので、最近は Cloud9 で開発している、という方も見かけるようになってきました。

擬似 Cloud9 ?

今回やるのは、VSCode を使った擬似 Cloud9 です。

  • エディタは VSCode (ローカルマシンにインストール)
  • 開発環境は EC2
  • 複数人での同時編集ができる

という環境を作ります。

「自分の好きなエディタ(VSCode)で開発したい!」「けど環境はクラウドにしたい!」「ついでに何人かでペアプロ / モブプロ とかしたい!」
なんてわがままなあなたにぴったりです。

どうやるの?

今回は VSCode の Remote - SSH というプラグインと Live Share というプラグインの2つを使います。
それぞれ、導入方法と利用方法のブログ記事を書いていますので、こちらを参考に導入を行ってください。

手順

1. Remote – SSH で EC2 にログイン

ではまずは Remote – SSH プラグインを用いてEC2 にログインしましょう。
[Remote Explorer] からアクセスしたいサーバーの名の右側にあるウィンドウマークを押し、新しいウィンドウを立ち上げます。

詳しい使い方はこちらをご覧ください。
VSCode の Remote – SSH プラグインを使って EC2 上で開発する

ウィンドウ左下にサーバー名が表示されたら次のステップに進みます。

2. Remote サーバーに Live Share プラグインを導入

新しく立ち上がったウィンドウでは、[Live Share] アイコンが表示されません。アイコンを表示させるには、サーバーに明示的にプラグインを設定してあげる必要があります。

[Extensions] から 検索ボックスに live と入力し、 Live Share を選択してください。
(※ Liveshare とつなげて書くと表示されないのでフルネームで検索する場合は live と share の間を開けてください)

すると Install in SSH: <サーバー名> というボタンが表示されますのでこちらを押します。

Reload Required と表示されるので、ボタンを押してウィンドウをリロードしましょう。

3. Live Share する

[Live Share] から [Start Collaboration Session…] を選択して、 Live Share リンクを取得します。
リンクを共有して、共同編集を開始しましょう。

詳しい使い方は こちらをご覧ください。
VSCode の Live Share プラグインを使ってペアプログラミングする

ターミナルを開くと、 EC2 のターミナルが開いていることが確認できます。
これで、擬似 Cloud9 の完成です。

AWS運用自動化サービス「Cloud Automator」