GitHub CodespacesでリモートPHP開発環境を整えてPhpStormで使う3ステップ

先月、GitHubとJetbrainsはGitHub CodespacesがJetbrains製IDEで使えるようになったと発表がありました。

https://blog.jetbrains.com/blog/2022/11/09/remote-development-in-jetbrains-ides-now-available-to-github-codespaces-users/

ということで、リモートなPHP開発環境を整えてPhpStormで使うまでの3ステップを紹介します。

:::note alert
まだ、ベータ版なので安定はしていないです。
:::

## ステップ1: GitHub上にリポジトリを作ってGitHub Codespacesのコンテナ設定を行う

まずはGitHubのリポジトリを作って、GitHub Codespacesの設定を行います。
本来は、設定せずともCodespacesは利用できますが、デフォルトはNode.js用開発環境なため、PHP開発環境に変えます。変えると言っても簡単で、MicrosoftがPHP開発環境用のコンテナイメージを用意しています。

https://hub.docker.com/_/microsoft-vscode-devcontainers

`mcr.microsoft.com/vscode/devcontainers/php`を利用すればPHP開発環境になります。この環境を作るにはリポジトリ直下に`.devcontainer`というディレクトリを作り、`Dockerfile`と`devcontainer.json`を用意します。

```
ProjectRepository
|
|- .devcontainer
    |
    |- Dockerfile 開発環境のコンテナ設定
    |- devcontainer.json 開発環境の設定ファイル
```

#### Dockerfile
Dockerfileはこんな感じです。

```dockerfile:Dockerfile
ARG VARIANT=8-bullseye
FROM mcr.microsoft.com/vscode/devcontainers/php:${VARIANT}

# Node.jsも使っちゃう場合
ARG NODE_VERSION="16"
RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi

# Composerインストール
COPY --from=composer /usr/bin/composer /usr/bin/composer

# 何かしら追加パッケージをインストールする
RUN curl -1sLf 'https://dl.cloudsmith.io/public/symfony/stable/setup.deb.sh' | bash
RUN apt install -y symfony-cli \
                sqlite3

# PHPのエクステンションを追加
RUN docker-php-ext-enable xdebug
RUN docker-php-ext-install pdo_mysql
```

上記のPHP用コンテナを使い、必要なパッケージ追加などのコンテナ自体の設定を記述していきます。パッケージ管理用の`Composer`、DBなどのパッケージ、PHPのエクステンションを追加していきます。

:::note info
ここではリモート開発環境を快適にするために、[Symfony CLI](https://symfony.com/download)を追加でインストールしています。
:::

:::note warn
上記PHPコンテナは2022年12月現在、最新の**PHP 8.2**です。
:::

### devcontainer.json

devcontainer.jsonには開発環境をビルドするときの設定などを記述します。

```json:devcontainer.json
{
  "build": {
    "dockerfile": "Dockerfile"
  }
}
```

こう設定すれば、`.devcontainer`ディレクトリ上の`Dockerfile`を使って開発環境をビルドします。

上記が準備できたらpushして、ブラウザ上でCodespaceを作成します。

![スクリーンショット 2022-12-18 23.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/26b2be4a-f0cf-b4d1-4c5f-d82ed58efa72.png)

リポジトリの`<> Code`ボタンをクリックして、`Codespaces`タブをクリック、`Create codespaces on {ブランチ名}`ボタンを押せばコンテナをビルドして開発環境ができあがります。

![スクリーンショット 2022-12-18 23.08.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/24cd19ed-9077-be1c-d8e8-4984d7c0fd28.png)

ビルドが完了すると、ブラウザ上でVisual Studio Codeが立ち上がります♪
これでも十分開発できるPHP開発環境が整います。**ただし、PhpStormでは動きません。**

### ステップ1.1: 作成したCodespaceを再度表示する

作成したCodespaceをブラウザ上のVisual Studio Codeで表示する場合は、リポジトリページの`<> Code`ボタンをクリックして、Codespace名をクリックすると、再度Visual Studio Codeが起動します。

![スクリーンショット 2022-12-28 11.05.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/f3031277-364f-0152-1488-0c8d4648fb51.png)


## ステップ2: PhpStormで動くように設定変更する

PhpStormでGitHub Codespacesを使うためには2つ設定を変更する必要があります。

### SSHを利用できるようにする

Jetbrains製IDEでGitHub Codespacesを使うにはCodespaceにSSH接続できるようにしなければいけません。
SSHサーバとして利用するには`devcontainer.json`に設定を追記します。

```diff:devcontainer.json
{
  "build": {
    "dockerfile": "Dockerfile"
+ },
+ "features": {
+   "ghcr.io/devcontainers/features/sshd:1": {
+     "version": "latest"
+   }
  }  
}
```

`features`キーにsshdのコンテナを追記すればOKです。これだけでSSHが利用できるようになります。

### コンテナサイズを変更する

Jetbrains製IDEで安定して動作させるためには4CPU(4コア)以上のマシンを使うことをJetbrainsは推奨しています。
デフォルトでは2CPUなマシンを使っているので、マシンタイプを変更します。

![スクリーンショット 2022-12-18 23.10.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/675de4d9-ba13-885e-d549-80da425fab8f.png)

再びブラウザのリポジトリ画面で`Codespaces`タブをクリックすると、先ほど作った開発環境が表示されています。
右側の`...`をクリックするとメニューが表示されるので、`Change machine type`をクリックします。

![スクリーンショット 2022-12-18 23.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/b9e9c713-4c3c-44e6-475c-a19386c5133b.png)

するとマシンタイプ一覧が表示されるので、お好みのタイプを選択し、`update codespace`ボタンをクリックします。

:::note alert
当然ながら性能の良いマシンを使えば使うほど費用は上がりますのでご注意ください。
ざっくりいうと倍々で上がっていきます。（2022年12月現在）

https://docs.github.com/en/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces
:::


## ステップ3: Jetbrains Gatewayを使ってGitHub Codespacesに接続する

ここまでできたらあとはPhpStormで使うだけです。GitHub Codespacesに接続するためには[Jetbrains Gateway](https://www.jetbrains.com/ja-jp/remote-development/gateway/)が必要なので、まずはこちらをインストールします。

### プロバイダ追加

インストール後立ち上げると接続先プロバイダ選択画面が表示されますが、GitHub Codespacesが表示されていない場合は、プロバイダのインストールが必要です。

![スクリーンショット 2022-12-18 23.23.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/6fa4f11c-dac8-d93e-ed55-fab301d7534b.png)

左下の歯車から`Manage Providers`をクリックして、追加します。

![スクリーンショット 2022-12-18 23.22.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/ac1116fd-aa0f-66e6-ca7a-7fa8e5f8dd4c.png)

`Market place`で`github codespaces`で検索すれば出てくるので、`インストール`ボタンをクリックして追加します。（画面は追加後です🙏）

### GitHubログイン

プロバイダの追加ができたら、GitHubにログインします。

![スクリーンショット 2022-12-18 23.29.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/d4956a8b-37af-25d8-5d11-9b681a872a6f.png)

`Connect to Codespaces`をクリックするとGitHubログインボタンが表示されてるので、画面の指示に従ってログインします。

![スクリーンショット 2022-12-18 23.32.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/334f8cee-642b-6d50-33e9-aef02a1a8308.png)

ログイン完了すると、利用できるCodespace一覧が表示されるので、利用するCodespaceをクリックします。

![スクリーンショット 2022-12-18 23.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/6f061006-f929-633b-57fc-f2ee87ba06bd.png)

すると、どのIDEで開くかセレクトボックスが表示されるので、PhpStormを選択し、`Connect`ボタンをクリックすれば...

![スクリーンショット 2022-12-18 23.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/170134f3-807c-d68a-c0cf-908f802e783b.png)


PhpStormでGitHub Codespaceが表示され、開発が可能になります！！！！！
これでリモートPHP開発環境をPhpStormで使えるようになりました！！！！！

:::note
初めて使うCodespaceの場合、もろもろの設定やダウンロードで2〜5分ほど時間がかかります。気長にお待ちください。
:::

### パッケージをインストールする

Codespaceを立ち上げただけでは、PHPパッケージがインストールされていません。パッケージをインストールしましょう。
PhpStormのターミナルから`composer install`します。

```shell
composer install

# Symfony CLIからだと
symfony composer install
```

### ローカルWebサーバを立ち上げて、ブラウザで確認できるようにする

PhpStormでGitHub Codespacesを使うと、ポートフォワーディングにより、`localhost`でCodespaceのWebサーバにアクセスできます。
まずは、Codespace上でローカルWebサーバを立ち上げます。このときのためのSymfony CLIです。

```shell
symfony server:start -d
```
これでCodespace上でローカルWebサーバが立ち上がりました。

:::note warn
上記コマンドを叩くと『CAをインストールするとHTTPS通信できるようになるよ！』とメッセージが表示されますが、CAインストールは不要です。
（CAを入れると、証明書エラーが表示されます。）
:::

続いてポートフォワーディングです。

![スクリーンショット 2022-12-19 0.11.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/de2c41cd-c874-f9f2-b887-e45a9b3dca0d.png)

PhpStormの左上にCodespace名が表示されているのでクリックします。

![スクリーンショット 2022-12-18 23.45.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/6fe9e32a-71af-966e-9215-303f3a3419fd.png)

すると、小窓が表示されるので、`Ports`を選んで、`+`ボタンを押します。ポートが入力できるようになるので、対象のポートを入力します。
（Symfony CLIでのローカルWebサーバは8000なので、8000を入力します。）

![スクリーンショット 2022-12-19 0.11.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/d69970f8-3998-b054-9c02-b56bb93ff3b1.png)

`Apply`ボタンを押して、左側のステータスが✅になったら完了です。

![スクリーンショット 2022-12-19 0.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9882/c03c3ce4-3642-43fe-e3be-49cc00bc4516.png)

この状態でブラウザで[http://localhost:8000](http://localhost:8000)にアクセスすると、localhostなのにも関わらず、CodespaceのローカルWebサーバにアクセスできるようになります。


## 参考: Docker in Dockerを使う

Codespace内で、DBやMailなどの別アプリケーションを動かしたい場合、ローカル開発と同じようにDocker Composeで環境構築できます。
参考にここまでの環境に加えてDocker　ComposeでMySQLを構築したレポジトリを公開しましたので、ご参考になさってください。

https://github.com/Ippey/symfony-workspace

なお、以下の記事に参考に構築しました。こちらもあわせてどうぞ！

https://info.drobe.co.jp/blog/engineering/github-codespaces


## 感想

PhpStorm上でGitHub Codespacesが使えるようになったことで、いろいろとローカル環境を整える必要がなくなりました。
もうちょっと安定してくれたら、かなり使えるようになると思うので、引き続き注目していきたいです。