Codespacesを使ってブラウザで開発をしよう
Codespacesとは
クラウド上で、開発ができる機能。
VSCodeやブラウザを使って開発が可能。
ブラウザで開発可能なので、自身のPCのスペックに関係なく(タブレットでも)スムーズに開発ができます。(PWA化もされているので、Vimのプラグインなどを入れても、ブラウザのショートカットキーとかぶらず、快適に開発ができます)
※2022/07/03時点でβ版の機能です。
このように、開発環境のスペックをそのつど選ぶことができます。
重い処理をする際に気軽にスペックを上げることができるのは非常に魅力的。
料金はこちら
Submoduleを使っている環境でも使用可能
Submodules を使っている環境をCodespacesを使い開発できるようにする
- dev-env
- front
- api
のようなリポジトリを3つ使っているケースを想定。
普段はDocker Composeを使って開発をしているので、今回もDocker Composeを使い複数コンテナを立ち上げローカルでの開発と同じように開発することを目指します。※ということで、 docker on dockerみたいな環境を準備する必要がありそうで。
API環境とFrontの開発環境では、設定する環境や必要なVSCodeの拡張機能も違ったりします。
そんなときは、下記のようにして複数の環境用の設定ファイルを準備することができます。
.devcontainer/SUBDIRECTORY/devcontainer.json
今回はFront用の環境のみを準備することとします。将来複数の環境を作ることを見越して
dev-env/.devcontainer/front/devcontainer.json
を準備。このようにすることによって、下記のimgのように、Codespacesを作成する際に、環境情報を選べるようになります。
devcontainer.json
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実行タイミングがわかるライフサイクルの詳細はこちら。
その他、使える機能一覧(features)はこちら。
その他にも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のスクラップ機能を使ってメモをしならが調査等していましたが、とても便利でした。