この記事は KAYAC Advent Calendar 2019 の10日目です！
VSCode には Remote Development という、SSH でつないだホストや、Docker コンテナ上の環境を、あたかもローカルの環境下のように扱うことのできる公式の Extension があります。最近は、ずっとこれをつかって、Docker 上で作業をしていたのですが、Mac や Windows だと Docker 遅いし、いっそリモートホスト上に VSCode の作業場所を作っておけばいいのでは？と思い至り、この記事を書くことにしました。
リモートホスト上で VSCode を動かすメリット
- 貧弱なクライアントや、Windows 環境でも快適にビルドなどができる
- npm モジュールのダウンロードとかが概ね早い
- VSCode がインストールされていて、SSH さえつながれば、すぐに開発環境を整えることができる
リモートホスト上で VSCode を動かすデメリット
- 金がかかる
用語集
| 用語 | 概要 |
|---|---|
| VSCode | Visual Studio Code というエディタ。イケてる |
| AWS | Amazon Web Services というクラウドのサービス。イケてる |
| AWS EC2 | AWS の VPS サービス。イケてる |
環境を作る
1. EC2 のインスタンスを作る
ちょっと、インスタンスの作る手順をことこまかに解説しようと思ったのですが、お金かかるし責任取れないので、割愛します！ポイントを箇条書します。
- この記事では Amazon Linux 2 AMI で解説します
- インスタンスタイプは、t3a.medium ぐらいあれば快適に動く（主観）印象です
- セキュリティグループは SSH(ポート22) だけ開けてください
2. SSH config を書く
SSH config を書いてください。下記は一例です。
Host vscode
HostName xxxxxxxxxxxxx.amazonaws.com
User ec2-user
IdentityFile ~/.ssh/vscode.pem
LocalForward 3000 127.0.0.1:3000
後述しますが、リモートホスト側で localhost:3000 に開発サーバを立てるので、ローカルフォワードをしておきます。
3. VS Code で Remote Development の Extension をインストールする
ポチポチしたらインストールできるので、入れてください
4. VS Code から SSH で接続する
左下にある「><」みたいなアイコンをクリックし、出てきたメニューから、「Remote-SSH: Connect to Host」 を選択します。
選択すると、さきほど SSH Config に書いたホストが出てくるので、それを選択します。
新しいウィンドウが立ち上がり、接続が完了すれば、環境づくりは OK です。
create-react-app を使ってみる
create-react-app でアプリを作ってみましょう。
1. node をインストールする
好みの方法でいいのですが、node をインストールしてください。
僕は nvm で入れました。
2. create-react-app を実行する
ホームディレクトリなどで、 npx create-react-app app-name を実行し、React のアプリを作成します。通信はインスタンス上で行われるので、テザリングとかでも安心してできるのがいいところ。
3. React の開発環境を立ち上げる
先ほど、作成したアプリのディレクトリに移動し、npm start で開発サーバを立ち上げます。開発サーバはホストの localhost:3000 に立ち上がりますが、ローカルフォワードを設定しておけば、クライアント側の localhost:3000 で確認することができます。HMR もちゃんと動きます！
やった！これで特に不自由なくフロントエンド開発はできると思います。
おわりに
退職してるのに勝手にカレンダーに登録して書きました。日付が変わってないので、ギリギリセーフだと思います。飛ぶ鳥跡を濁さず。えらい。カヤックはいい会社です。
次回は ken39arg さんの「フルマラソンでサブスリーする方法を書く」です！