GCE + VSCode + docker-composeでリモート開発環境を構築する

Kazuhiro Miyajima — Mon, 09 Sep 2019 09:24:29 +0000

これを書いているのは2019年の9月ですが、今年はあまり暑くなくて過ごしやすい夏でしたね。
とはいえ残暑の方が厳しい可能性もあるので、できればローカルのMacでDockerを立ち上げることで余計な熱源は減らしたいですよね。
そこでGCE(Goodle Compute Engine)にインスタンスを立てて、VSCodeで繋いで、ローカルMacでの開発と遜色ない環境を構築する方法を紹介します。
（Windowsも基本は同じ手順でイケると思いますが、手元にないので）

Macが熱くならない以外にも、以下のメリットがあります。

ブラウザとターミナルとエディタ、ネットワークさえあれば開発できる
強いマシンを買う必要がない=エコ
ネットワークが速い（dockerイメージのpullやnode modulesのインストールなどで体感できる）

事前準備

GCPアカウントの作成・設定は、この辺りを参考に適宜お願いします。
https://cloud.google.com/iam/docs/creating-managing-service-accounts?hl=ja

アカウント作成後、適当なGCPプロジェクトを作成または選択してください。

GCEでインスタンス作成＆起動

この後の手順は、基本的にはこのチュートリアルの通り。
https://cloud.google.com/community/tutorials/docker-compose-on-container-optimized-os

作成したプロジェクトでVMインスタンスを作成します。
ブートディスクはDebian9のまま、
リージョン、インスタンスサイズはお好みで。最初のビルド時はn1-standardくらいが良いと思います。
あと、複数プロジェクトを同インスタンス内で使いたい場合は、storageが10GBだと足りなくなる可能性が高いので増やした方がよいやも。

GCEインスタンス上で、個別プロジェクトのdocker-compose実行

git, docker. docker-composeインストール

VMインスタンス一覧でSSHボタンクリックでブラウザターミナル起動 git
sudo apt install git

docker, docker-composeのインストールはこの辺を参考に。
https://www.digitalocean.com/community/tutorials/how-to-install-docker-compose-on-debian-9

docker

sudo apt update
sudo apt install apt-transport-https ca-certificates curl gnupg2 software-properties-common
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/debian $(lsb_release -cs) stable"
sudo apt update
apt-cache policy docker-ce
sudo apt install docker-ce
sudo systemctl status docker
docker --version
sudo usermod -aG docker ${USER} # sudo なしでdockerコマンド実行できるようにgroupに追加
SSHログインし直す

docker-compose

sudo curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-uname -s-uname -m-o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version

個別プロジェクトのソースコードをGitHubからcloneした後、docker-compose upを実行

前準備として、このVMインスタンスからGitHubに接続できるように設定します。

ブラウザターミナルで ssh-keygen 実行。ファイル名はデフォルトのid_rsaでOK。パスフレーズを入れて忘れないようにする
GitHubのSettings > SSH and PGP Keysページに上記で作った公開鍵（~/.ssh/id_rsa.pubの中身）を登録

これでVMインスタンス上でcloneできるはずです。

mkdir /home/<username>/projects （ディレクトリ名は何でも良いです）
cd projects
git clone <githubなどのclone先URL>
cd <cloneしたプロジェクト>
docker-compose up -d

ポートを開ける（Optional）

ここまでで、ポート80でリクエストを受けられるようなdocker-compose環境であれば、
VMインスタンス一覧画面の外部IPリンクをクリックすればブラウザで実行結果を確認できます。
80以外のポートを開けたい場合は、以下を追加で実施してください。
SPAの開発環境であれば、2つくらいは開けたくなると思います。

GCPのVPCネットワーク > ファイヤーウォールルールをクリック
ファイヤーウォールを作成をクリック
名前とターゲットタグに http-8080 、プロトコルとポートに許可したいポートを指定（例：tcp:8080,3000,3100）
VMインスタンスの編集画面で、ネットワークタグに http-8080 を追加

これで http://<外部IP>:<ポート>/ にブラウザで接続できると思います。
SPAなどの場合、通信先IPの指定も忘れずに。

Visual Studio Code Insiders & Extensionsで開発

Visual Studio Code Insidersをインストールします。
2019年8月現在、Visual Studio Code（以下VSCode）正式版ではRemote SSHなどが動作しないのでInsiders版をローカルPCにインストールします。
https://code.visualstudio.com/docs/?dv=osx&build=insiders

Remote Developmentをインストール

以下のExtension全部入りのExtensionであるRemote Developmentをインストールします。
VSCode Insiders版のExtensionタブで「Remote Development」で検索してください。

Remote Containers
Remote SSH
Remote WSL

VMインスタンス側の接続設定

VMインスタンス編集画面で、SSH認証鍵欄にローカルMacの公開鍵を追加して保存（またはVMインスタンス内のauthorized_keys に公開鍵を追加）

ローカル側の接続設定

ローカルMacの~/.ssh/config を編集

Host <ホスト名>
  Hostname <立ち上げたVMインスタンスの外部IP>
  User <GCPユーザー名>

VSCode のRemote SSHタブ上に、上記で追加した<ホスト名>が出てくるのでダブルクリック
接続完了

接続できない場合は、以下を疑ってみてください。

~/.ssh/config のユーザー名がGCPユーザー名ではない、または外部IPが違う
ssh初回接続をVSCodeで実施してしまうと、ローカルMacのknown_hostsに追加するところで止まってしまうので、ターミナルなどで一度ssh接続してみる

余談

本当は、GCEのContainer-Optimized OS(COS)を使ってリモート環境を構築し始めたんですが、VSCodeのRemote Serverインストールでコケたのでやめました。
Container-Optimized OS の機能と利点はこちら。
https://cloud.google.com/container-optimized-os/docs/concepts/features-and-benefits?hl=ja

また、Cloud Shellのコードエディタで開発できるようにしようかと思いましたが、VMインスタンスからCloud Shell上にソースコードを同期する必要があるため、面倒なのでやめました。
素直にVSCodeでソースを書きましょう。

では、良いリモート開発ライフを。

DEV Community: Kazuhiro Miyajima