cakePHP4をインストールしてVScode でRemoteContainerにdocker構築してみた

#はじめに
研修でCakePHP4をインストールし、vscodeを利用してRemoteContainerに環境構築を行ったので、アウトプットのために実際に行ってきた手順を書いていきたいと思います。
余計な部分も書いておりますので、参考にする方がいらっしゃるなら最後まで読んでから必要な部分を見つけて下さると良いと思います。
初めてqiitaに投稿致しますが、同じような部分で躓いている方の手助けにもなれば幸いです。


#この記事の対象者
CakePHPをインストールしたことがない。
Dockerに不慣れである。
初めて環境構築する。


#事前環境
ホストOS: WIndows10 home
ゲストOS: WSL2 Ubuntu20.04
DockerDesktop
vscode
PHP 7.4.20 (cli)

#目次
1.cakePHP4のインストール
2.Remote Development拡張機能のインストール
3.データベース接続
4.終わりに


#1.CakePHP4のインストール
まずCakePHPをインストールするためにはComposerのインストールが推奨されているのでそれに沿って進めていきます。
wslでインストールするディレクトリを作成して下記のコマンドを実行してください。
最新の情報を確認したい場合はcakePHPの公式ページにも書いてありますのでそちらを参照してください。
[CakePHPのインストール](https://book.cakephp.org/4/ja/installation.html)

```
$php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
$php composer-setup.php　
$php -r "unlink('composer-setup.php');"
```

以上を実行することでディレクトリ内は以下のようになります。

```
$ls
composer.phar
```
composerのインストールが完了しましたので下記のコマンドでプロジェクトを作成してみましょう。

```
$php composer.phar create-project --prefer-dist cakephp/app:4.* my_app_name
```
ここでエラー文が表示されました。

```
Your requirements could not be resolved to an installable set of packages.
Problem 1
・
・
・
・
```
拡張モジュールが足りないと言っています。Problemに求められている拡張機能が書かれているので導入していきます。
私の場合はphp7.4-intl、php7.4-mbstring、php7.4-domをインストールすることになりました。

```
$sudo apt -y install php7.4-intl
$sudo apt -y install php7.4-mbstring
$sudo apt-get install php7.4-dom
```
もう一度プロジェクトを作成してみます。

```
$php composer.phar create-project --prefer-dist cakephp/app:4.* my_app_name
```
```
$ls
composer.phar  my_app_name
```
これでmy_app_nameが作れました。cakePHPのインストールは以上で完了です！


ここまでくればサーバーを起動することは簡単です。
my_app_nameディレクトリで下記のコマンドを実行してください。

```
$bin/cake server
```
サーバーが起動しているかは[http://localhost:8765](http://localhost:8765)で確認出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/1da6f1df-108a-abc9-311f-4f27632bd837.png)

#2.Remote Development拡張機能のインストール
まだ全く使いこなせていませんがリモート先のファイルを編集することができるvscodeの拡張機能です。
Remote Developmentをインストールするとそれに伴って他にも必要なものをいくつかインストールしてくれます！
それではvscodeでターミナルを開いて先ほど作ったtestディレクトリまで移動して次のコマンドを実行していきます。

```
$cd test
$code .
```

最初のインストールには時間がかかります。
vscodeを開くと左下にwsl:＜ディストリビューション名＞という表示が出ています。
これでリモートでwslにつながっています。

次にmariaDBを使うためにコンテナを開きます。
ctr+sft+pを押してremote containers: open folder in containersを検索してクリックします。

![Screenshot_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/f1237fc8-d00b-36b1-2b67-528a7140d26d.png)

show all Definitions...を選択するとPHP&MariaDBを選択できますのでクリックしてください。
dockerfileなどのコンテナの立ち上げに必要なものが.devcontainerディレクトリにインストールされているはずです。

左下に以下のようにPHP&MariaDB表示されていればmariadbとphpが使えるようになってます！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/283a6ecd-ac5e-a28d-2eab-4b509b27432b.png)
つまり私は最初にPHPをインストールしましたが、そんなことしなくても使えるということです！
リモートコンテナが複数人で開発を行う時に役立つと聞いたことはありましたが、ようやく理解できてきました。

#3.データベース接続
ではPHP&MariaDBでもサーバーを開きましょう。ディレクトリを移動して、、、

```
$bin/cake server
Xdebug: [Step Debug] Could not connect to debugging client. Tried: localhost:9000 (through xdebug.client_host/xdebug.client_port) :-(

Fatal error: You must enable the intl extension to use CakePHP. in /workspace/my_app_name/config/requirements.php on line 31
```
最初にintlを拡張したのにまたして欲しいと言ってます。
イメージではありますが、コンテナの環境内ではまだintlは拡張されていないということなんでしょうね。

なるほど～勉強になる。

ということはコンテナ内にてintlを拡張できなければなりませんね。
Dockerfileに以下のintlを拡張する命令をいれてください。

```Dockerfile:Dockerfile
RUN apt-get update && apt-get install -y --no-install-recommends \
        libicu-dev \
    && rm -rf /var/lib/apt/lists/*
RUN docker-php-ext-install intl
```
左下をクリックしてRebuild Containerを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/283a6ecd-ac5e-a28d-2eab-4b509b27432b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/d9deca3e-fe0b-2867-144c-d8cf3786d1ff.png)


ではサーバーを立ち上げましょう。

```
$bin/cake server
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/a49df215-f85d-f439-e5f4-4017118adbd3.png)
もう慣れ親しんだページです。データベースのところが赤くなっていて接続できていないと教えてくれています。
データベースの接続設定は my_app_name/config/app_local.phpで設定できます。
app_local.phpは以下のようになっています。接続したいデータベースはmariadbですので.devcontainerディレクトリのymlファイルを確認してみます。

```php:app_local.php
'Datasources' => [
        'default' => [
            'host' => 'localhost',
            'username' => 'my_app',
            'password' => 'secret',
            'database' => 'my_app',
            'url' => env('DATABASE_URL', null),
        ],
```
```docker:docker-compose.yml
db:
    image: mariadb:10.4
    restart: unless-stopped
    volumes:
      - mariadb-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: mariadb
      MYSQL_DATABASE: mariadb
      MYSQL_USER: mariadb
      MYSQL_PASSWORD: mariadb
```
以下のように書き直せば接続できます。他にも多くの利用できる機能があると思います。公式ページを確認してみてください。
パスワードなどはデフォルトのまま使用してますが、自分で変更することは簡単に出来るはずです。

```php:app_local.php
'Datasources' => [
        'default' => [
            'host' => 'db',
            'username' => 'mariadb',
            'password' => 'mariadb',
            'database' => 'mariadb',
            'url' => env('DATABASE_URL', null),
        ],
```
ではサーバーを立ち上げてみましょう。緑のチェックが入っていればデータベースに接続できています。
[http://localhost:8765](http://localhost:8765)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628058/70568cde-29df-7417-902b-ef61d2072f13.png)


もはやメモですが以下のコマンドでMariaDBが使えました。

```
mysql -h db -P 3306 -u root -p
```
#4.終わりに
この記事では実際に行った流れの通り書いてますので不必要な部分があります。文章中にも一度触れましたがPHPや拡張モジュールをインストールすることはローカルPCで行う必要はありません。
Remote Containerに環境を作っているのに、自分のPCでも環境構築するのはやっていて私も違和感がありましたw
綺麗にやるならPHP&MariaDBを開いてからCakePHPをインストールするのがいいんじゃないでしょうか。
ともあれ、この記事を参考にすれば恐らくremoteでもlocalにでもCakePHPの環境構築が出来ると思います。


初めてqiitaの記事を書きましたがいかがでしたでしょうか。
この記事を見た方の力になれていることを祈ります。

#参考
[Linux(Ubuntu)にphp7.4をインストールする方法](https://qiita.com/Jazuma/items/b59ac8a450422b17228e)
[VSCodeのRemote Developmentを使ってみる](https://qiita.com/HoriThe3rd/items/b2f6c440f096106cf89e)
[【WSL / WSL2】VSCode×WSLでWindows上にLinux開発環境を構築](https://qiita.com/_masa_u/items/d3c1fa7898b0783bc3ed)