Nuxt3 用の GitHub Codespaces テンプレートを作りました

Posted on 2022-12-14

GitHub Universe 2022 ではさまざまな発表がありました。発表の詳細は GitHub Universe 2022 における新発表のすべて - GitHub ブログをみてもらえれば良いと思います。

そして、私が強く推している GitHub Codespaces がついに正式リリースされました。GitHub の個人アカウントでも月 60 時間まで無償利用できるようになったのにはびっくりしましたね（全世界の開発者に月 60 時間利用できる 2 コアの仮想マシンが配布されたことになる！？）。

Codespace Templates

今回の正式リリースのタイミングで、Codespace Templates の追加もアナウンスされました。Codespaces のテンプレート機能は、あらかじめ特定の環境が仕込まれた Codespaces で、公式で用意された環境を使うことも自分で好みのテンプレートを作ることもできます。現状公式からは React や Ruby on Rails などのテンプレートが用意されています。

GitHub から提供されているテンプレート一覧

特に嬉しいポイントは、これまでリポジトリに紐づけて Codespaces を起動しなければならなかったのが、テンプレートを使うと Codespaces 単体で起動できるようになったことです。これで、Codespaces が本当に純粋な開発用仮装マシンになったとも言えるのではないでしょうか。

テンプレートを自作する

あらかじめ GitHub が用意しているテンプレートはまだ少ないこともあり、自分が欲しいテンプレートは独自に追加する必要がでてくるかもしれません。公式ドキュメント（GitHub Codespaces 用のテンプレートリポジトリを設定する - GitHub Docs）もあるので詳細な仕様には触れませんが、追加方法は簡単でざっと以下の手順になります。

GitHub 上にテンプレートリポジトリを用意する
好みの開発環境を定義した .devconainer.json を作成する
必要に応じて対象となるフレームワークやライブラリを追加する
その他起動時に必要なファイルや設定を追加しておく

これらを設定したテンプレートリポジトリを作成したら、以下の URL を実行することで対応する Codespaces が起動します。

起動 URL: https://github.com/codespaces/new?template_repository={Owner/テンプレートリポジトリ名}

Nuxt3 用テンプレートを作りました

執筆時点で Nuxt 用の Codespace Templates がなかったので（Next.js はあります）、この機会に作ってみました。このテンプレートから起動すると、以下の処理が自動的に実行され個別の準備が不要になります。

Node.js / TypeScript インストール
Vue.js 開発用 Extension (Volar) のインストール
プロジェクト初期ファイルの作成
npm パッケージのインストール
dev server の起動

この構成を実現するための .devconainer.json は以下のようになりました。

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:18-bullseye",
  "hostRequirements": {
    "cpus": 2
  },
  "waitFor": "onCreateCommand",
  "updateContentCommand": "npm install && npm run build",
  "postCreateCommand": "",
  "postAttachCommand": "npm run dev",
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "forwardPorts": [3000],
  "customizations": {
    "codespaces": {
      "openFiles": ["app.vue"]
    },
    "vscode": {
      "extensions": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
    }
  }
}

"onAutoForward": "openPreview" という設定により、Codespace 内でコードと同一タブ内にブラウザ（Simple Browser）が開くようになって便利です。

Simple Browser

この設定ファイルの含む Nuxt3 の初期構成ファイルをセットアップしたリポジトリを GitHub のテンプレートリポジトリとして保存し公開しました。

Codespace から起動するには、以下の URL を実行してください。いつでも最新の Nuxt3 の開発環境をすぐにコードを書き始められる状態で利用できます。

https://github.com/codespaces/new?template_repository=k-miyake/codespaces-nuxt3

この URL を使って起動した Codespace は自分の GitHub アカウントの Your Codespaces に以下のように保存されています。名前も変更できるので、Nuxt3 など好きな名前に変更しておくと良いでしょう。

Your Codespaces

Codespaces を停止したい場合は、この画面から Stop Codespace を実行すると停止できます。停止すると課金も止まります。