これを書いているのは2019年の9月ですが、今年はあまり暑くなくて過ごしやすい夏でしたね。
とはいえ残暑の方が厳しい可能性もあるので、できればローカルのMacでDockerを立ち上げることで余計な熱源は減らしたいですよね。
そこでGCE(Goodle Compute Engine)にインスタンスを立てて、VSCodeで繋いで、ローカルMacでの開発と遜色ない環境を構築する方法を紹介します。
（Windowsも基本は同じ手順でイケると思いますが、手元にないので）
Macが熱くならない以外にも、以下のメリットがあります。
- ブラウザとターミナルとエディタ、ネットワークさえあれば開発できる
- 強いマシンを買う必要がない=エコ
- ネットワークが速い（dockerイメージのpullやnode modulesのインストールなどで体感できる）
目次
以下の手順で設定します。
- 事前準備
- GCEインスタンス作成＆起動
- GCEインスタンス上で、個別プロジェクトのdocker-compose実行
- Visual Studio Code Insiders & Extensionsで開発
事前準備
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 updatesudo apt install apt-transport-https ca-certificates curl gnupg2 software-properties-commoncurl -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 updateapt-cache policy docker-cesudo apt install docker-cesudo systemctl status dockerdocker --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-composedocker-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 projectsgit 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でソースを書きましょう。
では、良いリモート開発ライフを。
Top comments (0)