[続！Dev Container] GitHub Codespacesでクラウド開発環境を構築

5.2 Dockerfile のサンプル

ARG VARIANT="jammy"
FROM mcr.microsoft.com/vscode/devcontainers/base:1-${VARIANT}

5.3 .devcontainer/docker-compose.yml のサンプル

version: "3"
services:
    devcontainer:
        build:
            context: .
            dockerfile: .devcontainer/Dockerfile
        environment:
            TZ: Asia/Tokyo
            MYSQL_USER: developer
            MYSQL_PASSWORD: password
            MYSQL_HOST: mysql:3306
            # localstack
            LOCALSTACK_HOST: localstack:4566
            DEFAULT_REGION: ap-northeast-1
            AWS_ACCOUNT_ID: "000000000000"
            AWS_ACCESS_KEY_ID: dummy-access-key
            AWS_SECRET_ACCESS_KEY: dummy-secret-key
        volumes:
            - ..:/workspaces:cached
        command: /bin/sh -c "while sleep 1000; do :; done"

5.4 docker-compose.yml のサンプル

こちらは一般的なアプリケーション開発で利用されている docker-compose.yml のサンプルです。
このファイルでは、 MySQL [6] や localstack ^[7] などのアプリケーションに必要なサービスや環境変数、ボリュームの設定を行っています。これにより、アプリケーションを構成するコンテナを一括で構築・実行することができます。

version: "3"
services:
    app:
        build:
            context: .
            dockerfile: Dockerfile
        volumes:
            - .:/workspace
        ports:
            - "3000:3000"
    mysql:
        container_name: mysql
        build: ./docker/mysql
        environment:
            MYSQL_DATABASE: sample
            MYSQL_USER: developer
            MYSQL_PASSWORD: password
            MYSQL_ROOT_PASSWORD: password
        volumes:
            - ./docker/mysql/sql:/docker-entrypoint-initdb.d
        ports:
            - 3320:3306
    localstack:
        image: localstack/localstack:latest
        environment:
            - HOSTNAME=localstack
            - SERVICES=s3
            - DEFAULT_REGION=ap-northeast-1
            - DATA_DIR=/tmp/localstack/data
        volumes:
            - "${LOCALSTACK_VOLUME_DIR:-./volume}:/var/lib/localstack"
            - "/var/run/docker.sock:/var/run/docker.sock"
        ports:
            - 4777:4566

6. VSCode、JetBrains IDE から利用

6.1 VSCode で Codespaces を起動する

VSCode で Codespaces を利用するためには、「VSCode GitHub Codespaces」拡張機能をインストールする必要があります。
拡張機能パネルを開くために、左側のアクティビティバーから拡張機能アイコンをクリックし、検索ボックスに「GitHub CodeSpaces」と入力します。検索結果に表示される「GitHub CodeSpaces」拡張機能をインストールします。
または、 こちら からインストールすることもできます。

GitHub にログインする

VSCode で「GitHub CodeSpaces」拡張機能を起動し、GitHub アカウントでサインインします。

6.2 JetBrains IDE で Codespaces を起動する

JetBrains Gateway は、JetBrains 製の IDE（IntelliJ IDEA、WebStorm、PyCharm など）で GitHub CodeSpaces を利用するためのツールです。 [8] JetBrains Gateway で CodeSpaces を起動する手順は以下のとおりです。
なお、先程の例に示したように、JetBrains Gateway で CodeSpaces を利用するためには、 .devcontainer.json に以下の設定を追加する必要があります。

JetBrains Gateway のインストールページ にアクセスし、インストーラをダウンロードしてインストールします。
または、 JetBrains Toolbox からインストールすることもできます。

GitHub CLI をインストールする
JetBrains Gateway は、GitHub CLI を利用して GitHub にログインします。
GitHub CLI をインストールするには、 こちら の手順に従ってください。
Windows を利用している場合は、 こちら のインストーラを利用することもできます。

GitHub にログインする

JetBrains Gateway を起動し、 GitHub Codespace をインストールします。

次に、メニューの GitHub Codespaces > Sign in to GitHub をクリックし、 GitHub にログインします。

ワンタイムコードと認証ページへのリンクが表示されます。リンクをクリックし、GitHub にログインします。

ワンタイムコードを入力し、[Continue] ボタンをクリックします。
次に、 [Authorize github] ボタンをクリックします。

Your Recent Codespaces から起動したい Codespace を選択し、[Open] ボタンをクリックします。
もし、 Codespaces を作成していない場合は Click here から Codespaces の作成画面を開くことができます。

7. 導入してみて感じたメリット・デメリット

7.1 メリット

7.2 デメリット

8. さいごに

いかがでしたでしょうか。参考になれば幸いです。
設定ファイルのサンプルは、実際に開発で利用しているものから抜粋したもので、各メンバーがそれぞれローカル環境、Dev Container、Codespaces でシームレスに開発をおこなっています。
さらに、VS Code の Code Tour 拡張機能と組み合わせて、新規メンバーのオンボーディングや、ワークショップ形式の勉強会にも活用しています。
ワークショップでは、環境構築手順の手間を省いてすぐに本題の作業に取り組むことが出来るので、Codespaces の利便性を大いに感じています。

また、Google Cloud からも Cloud Workstations ^[11] がリリースされました。興味がありましたらぜひ触ってみてください。

GitHub Codespaces は、クラウドベースの開発環境を手軽に構築するための強力なツールです。Dev Container を利用することで、チーム全体での環境構築を効率化することができます。GitHub Codespaces を利用することで、さらに手軽に開発環境の構築を行うことができ、チームの生産性の向上につながります。ぜひ、GitHub Codespaces を活用してみてください。