Codespacesを使ってブラウザで開発をしよう

Codespacesを使ってブラウザで開発をしよう

Codespacesとは

クラウド上で、開発ができる機能。

VSCodeやブラウザを使って開発が可能。

ブラウザで開発可能なので、自身のPCのスペックに関係なく(タブレットでも)スムーズに開発ができます。(PWA化もされているので、Vimのプラグインなどを入れても、ブラウザのショートカットキーとかぶらず、快適に開発ができます)

Codespaces
Your instant dev environment

※2022/07/03時点でβ版の機能です。

このように、開発環境のスペックをそのつど選ぶことができます。

重い処理をする際に気軽にスペックを上げることができるのは非常に魅力的。

料金はこちら

Codespaces の支払いについて - GitHub Docs
価格を見て、OrganizationでのCodespacesの支払いの管理方法を確認してください。

Submoduleを使っている環境でも使用可能

Submodules を使っている環境をCodespacesを使い開発できるようにする

  • dev-env
    • front
    • api

のようなリポジトリを3つ使っているケースを想定。

普段はDocker Composeを使って開発をしているので、今回もDocker Composeを使い複数コンテナを立ち上げローカルでの開発と同じように開発することを目指します。※ということで、 docker on dockerみたいな環境を準備する必要がありそうで。

API環境とFrontの開発環境では、設定する環境や必要なVSCodeの拡張機能も違ったりします。

そんなときは、下記のようにして複数の環境用の設定ファイルを準備することができます。

.devcontainer/SUBDIRECTORY/devcontainer.json

Introduction to dev containers - GitHub Docs
When you work in a codespace, the environment you are working in is created using a development container, or dev container, hosted on a virtual machine.

今回はFront用の環境のみを準備することとします。将来複数の環境を作ることを見越して

dev-env/.devcontainer/front/devcontainer.json

を準備。このようにすることによって、下記のimgのように、Codespacesを作成する際に、環境情報を選べるようになります。

devcontainer.json

devcontainer.json reference
devcontainer.json reference

devcontainer.jsonに環境情報を定義していきます。

{    
	"image": "ubuntu:latest",
        "name": "dev-container-front2",     
	"features": {    
		"docker-in-docker": {
			"version": "latest",
			"moby": true,
			"dockerDashComposeVersion": "v2"
		},
		"github-cli": "latest",
		"fish": "latest"
	},    
	"extensions": [    
		"rvest.vs-code-prettier-eslint",    
		"dbaeumer.vscode-eslint",    
		"allanoricil.nuxt-vscode-extension",    
		"willjleong.nuxt-typescript-snippets",    
		"rvest.vs-code-prettier-eslint",    
		"octref.vetur"    
	],    
	"settings": {    
	},
	"postCreateCommand": "bash ./.devcontainer/init.bash"
	// "settings": {
	// 	"terminal.integrated.shell.linux": "/bin/fish"
	// }
}

image: 開発を行うコンテナのimageを指定。今回はubuntuの最新versionを指定。

※もちろんDockerfileを使用することもできるので、より複雑な環境を作りたい場合はDockerfileを指定。

features: 予め用意してくれている便利機能たち。ここに定義しておくと、開発環境に自動的に追加してくれる。今回はなんとdocker-in-dockerというかなり便利な道具があったので採用。これによりubuntuコンテナ上にDockerを自動的にinstallしてくれる。(もちろんDocker Composeも)

fishやgithub-cliなどもあるので、必要にあわせて入れておくと良いだろう。

extentions: 開発に必要な拡張機能をここに書いておくと環境立ち上げ時に自動的にinstallされたものが立ち上がる。拡張機能やその設定も差異なくシェアできるのは大変心強い。

postCreateCommand:開発環境が出来上がったときに一度だけ実行されるコマンドである。今回はsubmoduleの取得コマンドをここで実行する。

その他のcommand実行タイミングがわかるライフサイクルの詳細はこちら。

devcontainer.json reference
devcontainer.json reference

その他、使える機能一覧(features)はこちら。

vscode-dev-containers/script-library/docs at main · microsoft/vscode-dev-containers
A repository of development container definitions for the VS Code Remote - Containers extension and GitHub Codespaces - vscode-dev-containers/script-library/docs at main · microsoft/vscode-dev-cont...

その他にもDocker Composeを生かす設定などありますので、公式ドキュメントを読んでおくと良いと思います。

init.bash

#!/bin/bash

set -eu
cd $(dirname $0)

cd ../
sed -i -e 's#git@github.com:#https://github.com/#g' .gitmodules
sed -i -e 's#git@github.com:#https://github.com/#g' .git/config
git submodule update --init --recursive
echo "" > front/.env


SSHでのcloneだとCodespaces上ではうまく動かないため、https経由でのsubmoduleの取得に変更してから、取得します。

また、compose.ymlファイルで.envをmountしているとErrorが起きるので一旦空の.envファイルをここで作成しています。

実行!!

ブラウザ上でVSCodeが動きました!

拡張機能も期待通りにinstall済み。

Docker ComposeやNode.js コンテナ上でのyarn devも問題なく動きました。

またPWAとしてDLすると、通常のVSCodeと何ら遜色なく開発が行えました。

※通常のVSCodeと見分けが付きやすいように色を変えています。

そして、localhostにアクセスする必要な場合は、自動的にlocalhostを使用するコンテナを立ち上げると、確認用のURLが発行されます!なんて便利。

余談

ダブレット

タブレットでも開発できました。

ただ、キーボードのレイアウト設定がめちゃくちゃめんどくさそう。

おわりに

今回、Zennのスクラップ機能を使ってメモをしならが調査等していましたが、とても便利でした。

Codespaces | GitHub