GitHub Codespaces 用に PHP プロジェクトを設定する

はじめに

このガイドでは、PHP プロジェクトの例の設定方法を紹介します Visual Studio Code Web クライアントを使用する GitHub Codespaces で。 codespace でプロジェクトを開き、事前定義済みの開発コンテナーの構成を追加および変更するプロセスについて説明します。

このチュートリアルを完了すると、VS Code Web クライアントまたは VS Code デスクトップアプリケーションを使用して、独自のリポジトリに開発コンテナー構成を追加できるようになります。

dev コンテナーの詳細については、「開発コンテナーの概要」を参照してください。

ステップ 1: codespace でプロジェクトを開く

まだサインインしていない場合は、GitHub.com にサインインします。
https://github.com/microsoft/vscode-remote-try-php にアクセスします。
[このテンプレートを使用する] をクリックし、 [codespace で開く] を選びます。

codespace を作成すると、プロジェクトが専用のリモート仮想マシン上に作成されます。既定では、codespace のコンテナーには、PHP を含む多くの言語とランタイムがあります。また、Composer、XDebug、Apache、pecl、nvm、git、lynx、curl などの一般的なツールセットも含まれています。

codespace をカスタマイズするには、vCPU と RAM の量を調整するか、dotfile を追加して環境をカスタマイズするか、インストールされているツールやスクリプトを変更します。詳しくは、「codespace のカスタマイズ」を参照してください。

GitHub Codespaces は、devcontainer.json というファイルを使って、codespace で作業するときに使う開発コンテナーを構成します。各リポジトリには 1 つ以上の devcontainer.json ファイルを含めることができ、codespace でコードを操作するために必要な開発環境を正確に提供できます。

起動時に、GitHub Codespaces は devcontainer.json ファイルと、開発コンテナーの構成を設定する依存ファイルを使って、ツールやランタイムをインストールし、プロジェクトが必要とするその他のセットアップタスクを実行します。詳しくは、「開発コンテナーの概要」を参照してください。

ステップ 2: 開発コンテナー構成を追加する

GitHub Codespaces の既定の開発コンテナー ("dev container") を使用すると、vscode-remote-try-php などの PHP プロジェクトで正常に作業することができます。ただし、独自の開発コンテナーを構成して、プロジェクトに必要なすべてのツールとスクリプトを含めることをお勧めします。これにより、リポジトリのすべての GitHub Codespaces ユーザーに対して、完全に再現可能な環境が保証されます。

カスタム開発コンテナーを使用するようにリポジトリを設定するには、devcontainer.json ファイルを 1 つ以上作成する必要があります。これは、定義済みの構成テンプレートから追加するか、Visual Studio Code 内に追加するか、または独自に記述することができます。 dev コンテナーの構成の詳細については、「開発コンテナーの概要」を参照してください。

Visual Studio Code Command Palette にアクセス (Shift + Command + P / Ctrl + Shift + P) し、「開発の追加」と入力します。 [Codespaces: 開発コンテナー構成ファイルの追加] をクリックします。
[新しい構成の作成] をクリックします。
この例では、codespace を作成したテンプレートリポジトリに既に開発コンテナー構成が含まれているため、構成ファイルが既に存在することを示すメッセージが表示されます。既存の構成ファイルを上書きするので、 [続行] をクリックします。
[すべての定義を表示する] をクリックします。
「php」と入力して [PHP] をクリックします。プロジェクトで特定のツールを使用している場合は、その他のオプションを使用できます。たとえば、 [PHP & MariaDB] などです。
プロジェクトに使用する PHP のバージョンを選択します。この場合は、"(既定値)" とマークされたバージョンを選択します。
インストールできる追加機能のリストが表示されます。コマンドラインから GitHub と対話するためのツールである、GitHub CLI をインストールします。このツールをインストールするには、「github」と入力し、GitHub CLI を選択して、 [OK] をクリックした後、 [Keep defaults] (既定値を使用) を選択します。
開発コンテナー構成ファイルが既に存在することを示すメッセージが表示されます。 [上書き] をクリックします。

devcontainer.json ファイルが作成され、エディターで開きます。

カスタム開発コンテナー構成の詳細

Visual Studio Code エクスプローラーを見ると、devcontainer.json ファイルを含むプロジェクトのリポジトリのルートに .devcontainer ディレクトリが追加されていることがわかります。これは、このリポジトリから作成された codespace のメイン構成ファイルです。

devcontainer.json

追加した devcontainer.json ファイルには、name、image、および features プロパティの値が含まれます。便利なプロパティがいくつか含まれていますが、コメントアウトされています。

選んだイメージに応じて、ファイルは次のようになります。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/php
{
  "name": "PHP",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/php:1-8.2-bullseye",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  // Configure tool-specific properties.
  // "customizations": {},

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [
    8080
  ],
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  }

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html"

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}

name: 開発コンテナーには任意の名前を付けることができます。既定値が指定されています。
image: codespace の開発コンテナーの作成に使われるコンテナーレジストリ (DockerHub、GitHub Container registry、またはAzure Container Registry) 内の画像の名前。
features: 1 つ以上のオブジェクトの一覧。各オブジェクトは、使用可能な開発コンテナー機能のいずれかを参照します。機能とは自己完結型であり、インストールコードと開発コンテナーの構成の共有可能なユニットです。これらは、開発コンテナーにツール、ランタイム、またはライブラリの機能を追加する簡単な方法を提供します。機能追加は、VS Code または、GitHub 上の devcontainer.json エディターで行えます。詳細については、「devcontainer.json ファイルへの機能の追加」の Visual Studio Code または Web ブラウザー タブをクリックしてください。
forwardPorts - ここにリストされているポートはすべて自動的に転送されます。詳しくは、「codespace でのポートの転送」を参照してください。
postCreateCommand: codespace が作成された後にコマンドを実行するには、このプロパティを使います。これは、文字列 (上記のとおり)、配列、またはオブジェクトとして書式設定できます。詳しくは、開発コンテナーの Web サイトの開発コンテナーの仕様をご覧ください。
customizations: このプロパティを使用すると、codespace での作業に使用される場合、特定のツールまたはサービスをカスタマイズできます。たとえば、VS Code の特定の設定と拡張機能を構成できます。詳細については、開発コンテナー Web サイトの「サポートツールとサービス」を参照してください。
remoteUser: 既定では、vscode ユーザーとして実行されていますが、必要に応じてこれを root に設定することができます。使用可能なプロパティの完全な一覧については、開発コンテナーの Web サイトの開発コンテナーの仕様に関するページを参照してください。

追加の開発コンテナー構成ファイル

Docker に慣れている場合は、Dockerfile または Docker Compose を使用して、devcontainer.json ファイルに加えて codespace 環境を構成できます。これを行うには、devcontainer.json ファイルと一緒に Dockerfile または docker-compose.yml ファイルを追加します。詳細については、開発コンテナー Web サイトの「イメージ、Dockerfiles、Docker Compose の使用」を参照してください。

ステップ 3: devcontainer.json ファイルを変更する

開発コンテナーの構成を追加し、すべての機能を基本的に理解したので、変更を行って環境をさらにカスタマイズできます。この例では、次の動作を行うプロパティを追加します。

開発コンテナーの作成後に composer install を実行して、composer.json ファイルに一覧表示されている依存関係をインストールします。
この codespace に VS Code 拡張機能を自動的にインストールします。

devcontainer.json ファイルで、機能に関するコメントアウトされた 2 つの行を削除します。
```
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
```

customizations プロパティを次のように編集して、"Composer" 拡張機能をインストールします。

JSONC

// Configure tool-specific properties.
"customizations": {
  // Configure properties specific to VS Code.
  "vscode": {
    "extensions": [
      "ikappas.composer"
    ]
  }
},

// Configure tool-specific properties.
"customizations": {
  // Configure properties specific to VS Code.
  "vscode": {
    "extensions": [
      "ikappas.composer"
    ]
  }
},

features プロパティの後にコンマを追加します。

"features": {
  "ghcr.io/devcontainers/features/github-cli:1": {}
},

postCreateCommand プロパティをコメント解除し、末尾にテキストを追加して、composer.json ファイルが存在する場合にコマンド composer install を実行します。 (既存のコマンドは、Apache がワークスペース内のファイルにアクセスできるようにするセットアップ手順にすぎません。)

JSONC

// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html; if [ -f composer.json ];then composer install;fi"

// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html; if [ -f composer.json ];then composer install;fi"

選んだイメージに応じて、devcontainer.json ファイルは次のようになります。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/php
{
  "name": "PHP",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/php:1-8.2-bullseye",

  // Configure tool-specific properties.
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      "extensions": [
        "ikappas.composer"
      ]
    }
  },

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [
    8080
  ],
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html; if [ -f composer.json ];then composer install;fi"

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}

変更を保存します。
VS Code Command Palette にアクセス (Shift+Command+P / Ctrl+Shift+P) し、「リビルド」と入力します。 [Codespaces: コンテナーのリビルド] をクリックします。

ヒント: キャッシュをクリアし、新しいイメージを使用してコンテナーを再構築するために、完全なリビルドを実行することが必要になる場合があります。詳しくは、「codespace でのコンテナーのリビルド」を参照してください。

リポジトリに変更をコミットする前に、codespace 内でリビルドすることにより期待どおりに変更が動作します。何らかの失敗があった場合、コンテナの調整を継続するためにリビルドできるリカバリコンテナを備えた codespace に配置されます。

開発コンテナーが再構築され、codespace が再び使用可能になると、postCreateCommand が実行され、Composer の依存関係がインストールされ、"Composer" 拡張機能が使用できるようになります。

手順 4:アプリケーションを実行する

前のセクションでは、postCreateCommand を変更して、一連のパッケージを composer install コマンドを使ってインストールしました。依存関係がインストールされたら、アプリケーションを実行できます。ただし、このシナリオでは、まず Apache がリッスンするポートを変更する必要があります。ポート 8080 を転送するため、既定のポート 80 ではなくこのポートを使うように Apache に指示します。

ご自分の codespace のターミナルで、次を入力します。

Shell

sudo sed -i 's/Listen 80$//' /etc/apache2/ports.conf

sudo sed -i 's/Listen 80$//' /etc/apache2/ports.conf

次に、以下を入力します。

Shell

sudo sed -i 's/<VirtualHost \*:80>/ServerName 127.0.0.1\n<VirtualHost \*:8080>/' /etc/apache2/sites-enabled/000-default.conf

sudo sed -i 's/<VirtualHost \*:80>/ServerName 127.0.0.1\n<VirtualHost \*:8080>/' /etc/apache2/sites-enabled/000-default.conf

次に、制御ツールを使って Apache を起動します。
Shell
```
apache2ctl start
```
```
apache2ctl start
```
プロジェクトが開始されると、VS Code の右下隅に "トースト" 通知メッセージが表示され、転送されたポートでアプリケーションが使用できることがわかります。実行中のアプリケーションを表示するには、 [ブラウザーで開く] をクリックします。

ステップ 5: 変更をコミットする

新しいコードであれ、構成の変更であれ、codespace に変更を加えたら、その変更をコミットしたくなるでしょう。リポジトリに構成の変更をコミットすると、このリポジトリから codespace を作成する他の人が、同じ構成を使用するようにできます。 VS Code 拡張機能の追加など、行うすべてのカスタマイズをすべてのユーザーが使えるようになります。

このチュートリアルでは、テンプレートリポジトリから codespace を作成したので、codespace 内のコードはまだリポジトリに格納されていません。現在のブランチを GitHub に発行することで、リポジトリを作成できます。

詳しくは、「Codespace でソースコントロールを使用する」をご覧ください。

次のステップ

これで、独自の PHP プロジェクトにカスタム開発コンテナー構成を追加できるようになります。

より高度なシナリオ向けの追加のリソースは次のとおりです。

GitHub Codespaces 用に PHP プロジェクトを設定する

この記事の内容