はじめに

VSCodeのRemote DevelopmentをGCEと組み合わせてリモート開発環境を構築してみた。
webpackを使ったフロントエンド開発でホットリロードもちゃんと動いてます。

GCEの構築

GCPのプロジェクトを作る

同時に無料トライアルを有効にしておく。

gcloud(CLI)のインストール

https://cloud.google.com/sdk/docs/
ココに書いてある通りにしてgcloudをインストールする。

gcloudでアカウントを認証する

次のコマンドを実行する。


gcloud init

実行すると最後にURLが表示されるので、ブラウザにコピペして自分のGoogleアカウントでログインする。
すると認証用のコードが発行されるのでコンソール貼り付けて認証する。

This account has no projects.

Would you like to create one? (Y/n)?

こう聞かれたらYを選択し、好きなプロジェクトIDを入力する。

https://console.cloud.google.com/cloud-resource-manager
に行くと自分で入力したプロジェクトが作成されていることが確認できる。
プロジェクトが作成されるまでは少し時間がかかる。

GCEのサービスを有効にする

GCPのComputeEngineのページへ行ってCompute Engineを有効化する。
https://console.cloud.google.com/compute

次のコマンドを実行することでも同じことができる。

# 完了するまで少し時間がかかる
gcloud services enable compute.googleapis.com

GCEのインスタンスを作る

好きなマシンスペックで作る。
とりあえず適当にgcloud compute instances createを使って作る。

インスタンス名は好きな名前でOK。ここではmyinstance-1とします。

# 完了するまで少し時間がかかる
gcloud compute instances create myinstance-1 \
--zone=asia-northeast1-a \
--image-family=ubuntu-1904 \
--image-project=ubuntu-os-cloud \
--boot-disk-size=10GB \
--boot-disk-type=pd-ssd \
--machine-type=n1-standard-2

このコマンドを実行すると東京リージョンに10GBのSSDでn1-standard-2のUbuntuインスタンスが作られる。

マシンタイプについてはここを参照。
https://cloud.google.com/compute/docs/machine-types?hl=ja

GCEに`ssh`コマンドで接続するための準備をする

一度gcloud compute sshを実行すると、以降はsshコマンドで繋げるようになる。
ユーザ名は好きな名前で。ここではcloud-userにする。
--ssh-key-fileオプションを指定するのは、すでに普段使っている秘密鍵~/.ssh/id_rsaを再利用したかったため。このオプションをつけないとgoogle_compute_engineという名前の鍵ファイルが生成される。

gcloud compute ssh cloud-user@myinstance-1 --ssh-key-file ~/.ssh/id_rsa

# 接続に成功したら`exit`で切断する

GCE接続用の鍵を生成＆~/.ssh/configの追記をしてくれるgcloud compute config-sshというコマンドもあるけど、普段使っている鍵を再利用したかったのと、ユーザ名を指定したかったので使わなかった。

`~/.ssh/config`に接続設定を追記する

~/.ssh/configを作る。すでにあるならこれはやらなくていい。

touch ~/.ssh/config
chmod 600 ~/.ssh/config

~/.ssh/configに以下を追記する。
IPアドレスはgcloud compute instances listで表示されるEXTERNAL_IPを入れる。

Host remote-dev # 好きな名前。VSCodeでホストを選択するときに表示される。
    HostName <IPアドレス>
    User cloud-user # `gcloud compute ssh`でログインしたときのユーザ名

念のためssh接続できるか確認する。

ssh remote-dev

これでログインできればVSCodeからssh接続する準備は完了。

VSCodeの設定

VSCodeのInsider版をインストールする

今のところInsider版でないとRemote Development拡張機能が入れれないので、Insider版を入れる。

https://code.visualstudio.com/insiders/
ここからインストールする。

Remote Development拡張機能を入れる

インストールしたVSCode(緑色のVSCode)でctrl + shift + Xで拡張機能のメニューを開き、remote developmentと入力してでてくるRemote Developmentを有効にする。

リモート開発

VSCodeからGCEへssh接続する

VSCodeでF1を押し、>Remote-SSH: Connect to Hostを入力し、GCEインスタンスのホストを選択する。

すると、GCEに繋がった状態のVSCodeの新しいウィンドウが開く。
コンソールを開くとGCE上でコマンドが打てることがわかる。

ここまでやれば、あとは開発に使うツールとかをapt installなどでリモートにインストールして、ローカルマシンで開発するときと同じように開発できる。

GCEからローカルにポートフォワードする

webpackで開発してるときなどローカルサーバを起動する場合は、ポートフォワードするとローカルマシンのlocalhost:<port>でGCEインスタンスのポートに繋げられて便利。

VSCodeでF1を押し、>Remote-SSH: Forward Port from Active Hostを入力し、フォワードしたいポートを選択する。

おまけ

GCEインスタンスを停止する。

使わないときは止めておいた方がエコです。

# シャットダウン
gcloud compute instances stop myinstance-1

# 起動
gcloud compute instances start myinstance-1

https://console.cloud.google.com/compute
ここからポチポチして止めてもいい。

Ubuntuにyarnを入れる。

sudo apt remove cmdtest yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install -y yarn

まとめ

ローカルマシンにVSCode入れるだけで開発できる。
ビルドをリモートで実行できるのでローカルマシンのスペックがしょぼくても大丈夫。
ローカルマシンがWindowsでもLinux環境で開発できる。

快適リモートライフ！！！！！

VSCode+RemoteDevelopment+GCEでリモート開発環境を構築する。