More than 1 year has passed since last update.

運営者ギルド

異世界転生したらなぜか無料でWebアプリをブラウザだけでしっかり目に開発開始出来た件

Last updated at 2023-01-04Posted at 2023-01-04

はじめに

お久しぶりです。

この度（2022/11頭）にGitHub Codespacesが個人でも無料で限定的（最大60時間のみ）に使えるようになったとのことで、少し遅れて色々調べてみましたので紹介記事になります。

書くこと

GitHub Codespacesとは
GitHub Codespacesのココが凄い！
VisualStudioCode DevContainers
GitHub.devとの違い

書かないこと

React、Next.jsの基本的な構文
JetBrains周り
あとがき

俺はwebアプリ開発をしたいがPCにNode.jsも入れたくないしなんならディレクトリも作りたくない。どこにでもいる普通の高校生だ〜ユースケース〜

例えば、GitHub上のOSSで気になるアーキテクチャを発見し、ローカルPCにcloneするまでではないにしろ少しだけデバッグしながら挙動を確かめたい場合や、タブレットしか持っていない時にタスクを行う必要が発生した時等には、以上のようなセリフをエンジニアの皆様なら呟かれることだと思います。

今回は、相当に特異なケースだとは思いますが、コンテナ構築やディレクトリの作成が出来ない状況でWebアプリを開発・公開したいという状況を想定して記事を進めていこうと思います。

「簡単なことですよ、ブラウザ上で開発して、そのままリポジトリにコミットすればいいのです」〜GitHub Codespacesとは〜

GitHub Codespacesとは、数秒で起動するクラウド開発環境です。
フルビルドされたイメージを使い開発環境を立ち上げるため、非常に高速に開発を始めることが出来ます。
vscodeのremote containerの仕組みがベースとなっています。また、JetBrains Gatewayとの統合が行われています。つまるところ、ブラウザ上にvscodeの作業環境を再現したり、ローカルから好きなIDEでリモート接続して作業環境を構築する事ができます。

codespaceの立ち上げ方

GitHubのヘッダー中、ユーザーアイコン横の＋アイコンをクリックし、ドロップダウンを展開します
「New codespace」をクリックします
既存のリポジトリをGitHub codespacesによって立ち上げるための画面（ https://github.com/codespaces/new ）が表示されます
urlからnewを消して（ https://github.com/codespaces ）を表示することで、新規にcodespaceを作成し開発を始める事が出来る画面を表示出来ます。（お知らせを消した状態での、トップからの導線が見つかりませんでした）
サラの状態からプロジェクトを作成し開始することも出来るほか、各環境でのテンプレートを使用することも可能です。
今回はNext.jsのテンプレートを選択しプロジェクトを開始します。

テンプレートを選択し、リポジトリにpushまでやってみる

Next.jsのテンプレートを選択すると、新規にタブが開かれ、数秒間設定画面が表示されます。

設定が完了したタイミングでCodespaceが表示されます。

もうヤベェですよね。
ブラウザ上でvscode画面が表示されています。
ちなみにテンプレートを選択し、Codespaceが表示された直後のこの状態では拡張機能等は入っていません。

一旦リポジトリを作成し、mainにpushするところまでやってみたいと思います。

リポジトリの作成

GitHub上にリポジトリを作成します。
いつものやつですね。
適当に作ります

GitHub Codespacesからリポジトリにpush

$ git init
initialコミット
$ git remote set-url origin https://FAL-coffee:${Developer setting画面から入手したrepo権限のあるセキュリティトークン}@github.com/FAL-coffee/codespace-yabasugi.git
remoteブランチの設定の追加
git push --set-upstream origin main

というか、動くのは当たり前なんですがターミナルが普通に操作出来るのに自分は少し感動しました。

GitHub Codespaces「キンキンキンキンキンキン」〜作業実践〜

こちらではGitHub Codespacesを実際に開発環境として運用するための過程を書いてみようかと思います。
GitHub Codesacesの実態はクラウド環境上に立ち上げられたインスタンス上で動くDockerコンテナです。
⇨ 開発コンテナーの概要

そういった前提の上で、やりたい事 -> やる事　の順に色々書き殴っていこうかと思います。

codespacesで立ち上がったvscodeの拡張機能の設定

codespacesで立ち上がるvscodeには、デフォルトでは拡張機能は一切インストールされていません。
しかし、codespacesを実作業において活用するためにはvscode拡張機能は必須です。
今回Next.jsプロジェクトの開発のために便利なアドオンは以下のようなものがあります。

Prettier
Prettier+でも◎
ESLint
gitlens
AutoCloseTag
HTMLタグを書くと、勝手に閉じタグを書いてくれるやつです。あると便利です。任意です。
react snippet
React用のスニペットです。要ると思います。好きなの選んでください。任意です。
next.js snippet
next.js用のスニペットです。あると良いと思います。好きなの選んでください。任意です。

しかし毎回MarketPlaceからそれらをインストールし、設定を行なっていてはキリがありません。
最早旨みが何かすらわからなくなります。

当然codespacesを立ち上げた際には、アドオンまで含めて環境を構築したいと思います。

そういった場合は、.devcontainer/.devcontainer.jsonに注目する必要があります。
.devcontainer.jsonはVisual Studio Code Dev Containers拡張機能のためのファイルで、記述した設定に従ってDocker上にvscodeの作業環境を構築しています。
例えば、Next.jsテンプレートを選択し、codespacesを立ち上げた際の初期状態では以下のようなコードとなっています。

{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "hostRequirements": {
    "cpus": 4
  },
  "waitFor": "onCreateCommand",
  "updateContentCommand": "npm install && npm run build",
  "postCreateCommand": "",
  "postAttachCommand": {
    "server": "npm run dev"
  },
  "customizations": {
    "codespaces": {
      "openFiles": [
        "pages/index.js"
      ]
    }
  },
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "forwardPorts": [3000]
}

特に感覚的に分かりやすいのは"customizations"の項目で、各環境で表示された時用に固有の設定を行うことが出来ます。
今回では"codespaces"で開かれたとき、"openFiles"（最初に表示するファイル）がpages/index.jsとなっているため、初期状態ではpages/index.jsが編集可能な状態で表示されました。

GitHub Codespacesでは.devcontainer.jsonに設定を加えることで、vscodeに予め設定を行った状態で表示させることが可能です。

最低限、フォーマッタ、リンターくらいは必要なのでcodespacesを開いたときに既にそれらのアドオンがインストールされている状態になるように設定を加えようと思います。

+  "extensions": [
+    "svipas.prettier-plus",
+    "dbaeumer.vscode-eslint",
+  ],

公式ドキュメント --Create a devcontainer.json fileを読むと、コンテナ作成時に追加したい拡張機能のidを設定することが出来るとの記述があるのが分かります。
とりあえずPrettier+とESLintだけ入れてみました。

また、保存時にフォーマッタを走らせたり、ファイル名変えたらimportして呼び出しているファイルの方でもimport文変えてくれたりして欲しいです。
公式ドキュメント --Container specific settingsは環境別の設定のことが書いてあるものですが、settingsで色々設定のプロパティを指定出来ることがわかると思います。
よって、保存時のオートフォーマットやらを諸々書いてみます。

出来上がりが以下です。

{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "extensions": [
    "svipas.prettier-plus",
    "dbaeumer.vscode-eslint",
  ],
+  "settings": {
+    "files.trimTrailingWhitespace": true,
+    "editor.formatOnSave": true,
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "prettier.tabWidth": 2,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "svipas.prettier-plus"
+    },
+  },
  "hostRequirements": {
    "cpus": 4
  },
  "waitFor": "onCreateCommand",
  "updateContentCommand": "npm install && npm run build",
  "postCreateCommand": "",
  "postAttachCommand": {
    "server": "npm run dev"
  },
  "customizations": {
    "codespaces": {
      "openFiles": [
        "pages/index.js"
      ]
    }
  },
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "forwardPorts": [3000]
}

.devcontainer.jsonがこの状態の時、GitHub Codespacesを立ち上げると以下のような状態になります。
拡張機能がきちんと入っており、自動フォーマッタが有効となっています。
いい感じですね。

イメージを上書きしたい

GitHub Codesacesの実態はクラウド環境上に立ち上げられたインスタンス上devcontainerによって立ち上げられたDockerコンテナである事をこれまで記述してきましたが、立ち上がるDockerコンテナのイメージを変更したりカスタマイズしたい場合があると思います。
その場合は、以下を参照します。

公式ドキュメント --Create a devcontainer.json file

Create a devcontainer.json file
VS Code's container configuration is stored in a devcontainer.json file. This file is similar to the launch.json file for debugging configurations, but is used for launching (or attaching to) your development container instead. You can also specify any extensions to install once the container is running or post-create commands to prepare the environment. The dev container configuration is either located under .devcontainer/devcontainer.json or stored as a .devcontainer.json file (note the dot-prefix) in the root of your project.
You can use any image, Dockerfile, or set of Docker Compose files as a starting point. Here is a simple example that uses one of the pre-built Development Container images:

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-12",
  "forwardPorts": [3000],
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  }
}

以上は公式ドキュメントからの引用ですが、日本語訳するとDockerコンテナイメージを指定することも出来る。これらは事前にビルドされた開発コンテナイメージを使用した簡単な例であると書いてあります。
"image"がどう考えても関係ありそうなので調べてみます。

devcontainer.json > image
公式ドキュメント --vscode-dev-containers/container-templates/image/.devcontainer/devcontainer.json

// Update the 'image' property with your Docker image name.
"image": "mcr.microsoft.com/vscode/devcontainers/base:debian-11",

image プロパティを Docker イメージ名で更新します。

と書かれています。
これですね。

imageのプロパティとして扱えるDocker imageはこれらのようなものがあります。
javaにphp、pythonやruby、Rust、Goなど様々な作業環境に適応可能なイメージが用意されています。

またそれらのimageからではなく、自作のDockerイメージを扱いたいときは以下のようにします。

{
  // "image": "mcr.microsoft.com/devcontainers/typescript-node:0-12",
  // Dockerfile を指定
  "dockerFile": "./Dockerfile",
  ...
}

ここからはいつものDockerfileとdocker-composeです。
このように、imageプロパティやdockerFileプロパティによってcodespacesを立ち上げる際のコンテナイメージを変更可能です。

って、なんでGitHub.devくんが！？〜GitHub CodespacesとGitHub.devの違い〜

ちなみにGitHub上で、リポジトリやPRを眺めているときに.をキーボード上で入力することでGitHub.devを表示することが出来ます。

見た目は非常によく似た機能ではありますが、GitHub Codespacesとは少し違い、こちらはあくまで簡易エディタです。
あくまでマシンインスタンスの無い、エディタだけのものなのでターミナルやコンテナは付いてきません。（gitlensがデフォで生えてるくらい)
拡張もメモリ上でjsだけで処理出来る程度のものにのみ対応します。