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

# はじめに

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

## GCEの構築

### GCPのプロジェクトを作る

https://console.cloud.google.com/?hl=ja

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

### gcloud(CLI)のインストール

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

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

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

```bash

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

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

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

### GCEのインスタンスを作る

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

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

```bash
# 完了するまで少し時間がかかる
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という名前の鍵ファイルが生成される。

```bash
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`を作る。すでにあるならこれはやらなくていい。

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

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

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

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

```bash
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インスタンスを停止する。

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

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

# 起動
gcloud compute instances start myinstance-1
```

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

### Ubuntuにyarnを入れる。

```bash
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環境で開発できる。

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