こんにちは、技術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つを使います。
それぞれ、導入方法と利用方法のブログ記事を書いていますので、こちらを参考に導入を行ってください。
- Remote - SSH: VSCode の Remote - SSH プラグインを使って EC2 上で開発する
- Live Share: VSCode の Live Share プラグインを使ってペアプログラミングする
手順
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 の完成です。
