Github Codespacesを使ってみたメモ

Windowsにちょっと古いAnglarの環境を構築しようとしたところ、やれnpm 7.xは駄目だ6.x使えだとか、nodistはメンテされてなくてnpmインストールしようとするとエラーになるだとか、散々な目にあったのでGithub Codespacesに手を出してみた。

まずはローカルで

いきなりやっても上手く行かないだろうから、devcontainer(VS Code + Docker)の環境を最初に作った。

/.devcontainer/devcontainer.json を用意する。

VS Codeのパレットで

Remote-Containers: Add Development Container Configuration Files

を打つと各言語のテンプレートが選択できるので、Node.js & TypeScriptのものを選んだ。

{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        "args": {
            "VARIANT": "12"
        }
    },
    "settings": {},
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],
    "mounts": [
        "source=hello-modules,target=${containerWorkspaceFolder}/hello/node_modules,type=volume"
    ],

    "remoteUser": "node",
    "postCreateCommand": "sudo chown node ./hello/node_modules"
}

変更したのは以下の箇所。

"mounts": [ "source=hello-modules,target=${containerWorkspaceFolder}/hello/node_modules,type=volume" ],

"postCreateCommand": "sudo chown node ./hello/node_modules"

これはnode_modulesをホスト側と共有しない設定。自分はhelloの下にnode_modulesを置いてるのでこのような指定になっている。

これを指定しないと我慢ができないほど遅い。指定すれば我慢出来るレベルの遅さになる。

/.devcontainer/Dockerfile を用意する。

これはdevcontainer.json と一緒にできる。

ARG VARIANT="12"
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}

RUN su node -c "npm i -g @angular/cli@10.2.3"

変更したのは以下の箇所。

ARG VARIANT="12"

テンプレートを作成する時にバージョン12を指定したのに、なぜかここは16で作られていた。自分の理解が浅いためか、正直よくわからない。何を指定してもdevcontainer.jsonの設定で上書きしてくれるのだろうか。

追記：上書きされるみたい Dockerfile ARG入門 - Qiita

RUN su node -c "npm i -g @angular/cli@10.2.3"

angularをインストールしている。

空のプロジェクトフォルダを作成する

ここの手順は正直正しいのか自信がないが、先に空フォルダを作っておかないと権限周りで行き詰まった。

hello

VS Codeでコンテナを立ち上げる

VS Code の右下にある><みたいなアイコンをクリックして、Open Folder in Containerを実行する。すると定義したDockerfileに応じたコンテナが起動する。

Angularのプロジェクト作成

コンテナの中で ng new hello といった形でAnglarプロジェクトを作成する。

自分はここで権限エラーに遭遇して苦しんだ。コンテナを初回起動する前に先に空フォルダを作っておくことで回避できた。

npm インストール

プロジェクトフォルダに移動してnpm iを実行。

npm start

実行できることを確認。

githubにpush

push push

Github Codespacesを試す

Codespacesを有効にする

ここに行って「ベータ版を申し込む」を押す。

github.co.jp

Codespaceを作成

リポジトリページの緑色のCode▼のボタンをクリックするとCodespacesのタブが追加されてるので、そこからCodespaceを作成。

やってみた感想

とにかく権限周りで躓いた。

苦労してnode_modules周りを隔離しても、Windows + WSL2 + Dockerは結構重い。

Codespacesの方が断然軽かった…と思ってCodespaceのインスタンスの種類を調べたら、4core 8GB RAMだった。そりゃ速いに決まってる。個人の利用は今のところ無料だけど、本来なら1時間$0.36のプラン。1日8時間20日使ったら6000円くらいになる。まぁアリっちゃアリか。