Docker + Laravel + Vue の環境構築 - Docker編

# はじめに
- `Docker`が`Windows10 Home`にも対応したということでDockerでの環境構築を始めてみました。
- `Docker`と`Vue`は初めて触ります。`Laravel`のみ少し経験あり。
- Xserverにデプロイするつもりで構築。
    - ドキュメントルートはプロジェクト直下の `public_html`
    - 本来はWebサーバーは`Apache`だけど、慣れたいのでnginx使ってます。

## 改訂
- 2021/1/31
    - `npm run dev`の実行に必要なnodeのバージョンが12.14以上となったため、nodeのimage修正。他微修正。
- 2021/2/24
    - Dockerデスクトップインストール後の`WSL2インストール`について追加。

# 環境
- Windows 10 Home（20H2）

# Dockerのインストールについて
- **インストール**
    - [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)
    - インストールの詳細については割愛します。
- **発生したトラブル**
    - `Win10`にすんなりインストールして使えるとはいかず、バージョンアップをしました。
    - Windowsアップデートがまだの場合、下記公式からダウンロード可能です。
        - [Windows 10 のダウンロード](https://www.microsoft.com/ja-jp/software-download/windows10)
    - WSL2インストール
        - Dockerデスクトップインストール後に下記のようなアラートが表示された場合は、指示に従って`Linuxカーネル更新`を行ってください。

![WSLアラート.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/e1beb8c1-e94d-8a5e-a859-ecb77c1a3142.png)

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/73872a99-8573-47b7-3ef6-0d8d2a1644d2.png)



- **最終的に生成されたバージョン**
    - Docker: 20.10.2
    - Docker Compose: 1.27.4

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/88bc4b74-b8f3-115c-fdaf-407b68cc0b05.png)


## Docker
- Docker単体でも使えるが`Docker Compose`を使うのが便利なようです。
- docker-composeは`yml`ファイルに複数のコンテナの定義を記述し、立ち上げができます。
- WEBサーバーやDB等の1つのファイルで管理でき、コンテナ間の連携もできる大変便利なツールです。
- 今回使う`Docker Desktop`のインストール内容に`Docker Compose`も含まれています。

## Docker Composeの準備
- 下記の`yml`を実行し、以下の環境が作られました。
    - php : 7.4.14
    - nginx : 1.19.6
    - MySql : 5.7.32
    - PhpMyAdmin : 5.0.4
    - npm : ~~6.12.1~~ 7.4.3
    - node : ~~12.13.1~~ 15.7.0
- 任意のバージョンで構築したい場合は[Dockerhub](https://hub.docker.com/)で欲しいバージョンを探し、ymlファイル内の`image`の指定を変更してください。

```docker-compose.yml
version: '3'

services:
  php:
    build: ./docker/php
    volumes:
      - ./src:/var/www

  nginx:
    image: nginx
    ports:
      - 80:80
    volumes:
      - ./src:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
    tty: true
    
    command: [nginx-debug, '-g', 'daemon off;']

  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: sample_project
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
      
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=docker
      - PMA_PASSWORD=docker
    links:
      - db
    ports:
      - 4000:80
    volumes:
      - ./docker/phpmyadmin/sessions:/sessions

  node:
    image: node:15.7-alpine
    tty: true
    volumes:
      - ./src:/var/www
    working_dir: /var/www
```

## php -> Dockefileの準備
`Dockerfile`に各コンテナの詳細情報を定義します。
これは`php`用のDockerfileで、今回個別に用意するのはこれだけです。

```Dockerfile
FROM php:7.4-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y zlib1g-dev mariadb-client vim libzip-dev \
  && docker-php-ext-install zip pdo_mysql
#  && git curl cron unzip

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

WORKDIR /var/www

# laravelインストール
RUN composer global require "laravel/installer"
```

## php -> php.iniの準備

```php.ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
```

## nginx -> default.conf

```
server {
  listen 80;
    index index.php index.html;
    root /var/www/public_html;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
    }

  location ~ \.php$ {

    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass php:9000;
    fastcgi_index index.php;
    include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}
```

# ここまでのディレクトリ構成

適当な場所にプロジェクトフォルダを作り、下記のように配置してください。
※`[]`で囲ってる箇所はディレクトリです。

```
[myLaravel]
  ├── [docker]
  │    ├── [nginx]
  │    │   └── default.conf
  │    └── [php]
  │        ├── Dockerfile
  │        └── php.ini
  └── [src]
```

# Docker Composeの実行
- コマンドプロンプト、または`Git Bash`等を使ってプロジェクトフォルダへ移動してください。
- 下記コマンドを実行すると`Docker Compose`の内容からコンテナが作成され、下記のように動作を確認できます。

```
~/myLaravel$ docker-compose up -d

Starting mylaravel_db_1         ... done
Starting mylaravel_node_1       ... done
Starting mylaravel_php_1        ... done
Starting mylaravel_phpmyadmin_1 ... done
Starting mylaravel_nginx_1      ... done
```

`Docker Desktop`を確認すると下記のように指定したプロジェクトと、コンテナが作成されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/9cb2f0fc-8a77-3203-8b8d-af871d598c3e.png)

これで環境が整いました。

## Docker Desktopからの操作

各コンテナにカーソルを合わせると、いくつかアイコンが表示されます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/4f94fb1f-ef58-ae65-ad2e-25f4df96a7ce.png)

左から

- **ブラウザを開く**
    - WebサーバーやPhpMyAdmin等ブラウザ上で確認できるものにだけ、アイコンが表示されます。
- **コンソール画面を開く**
    - コンソール上での操作を行います。
    - 他の記事だとコマンド`docker-compose exec php bash`を使ってるものが多いです。
    - なぜか僕はこのコマンドでエラーになるので、デスクトップアプリ経由で使ってます。
        - `docker-compose.yml`の各コンテナの設定に`tty:true`があればできるはずなんですが解決できなかったので、設定から外しています。
    - PHPコマンドやnpmを使う時はそれぞれのコンソール上からしか実行できないので、やりたいことに合わせたコンソールを開く必要があります。ちょっとめんどくさい。
- **コンテナの停止**
- **コンテナの再起動**
- **コンテナの削除**


## 最終的にできた構成
`db`, `phpmyadmin`ディレクトリが作られました。中身は特に気にしなくていいので省略してます。

```
[myLaravel]
  ├── [docker]
  │    ├── [db]
  │    │   └── ...
  │    ├── [nginx]
  │    │   └── default.conf
  │    ├── [php]
  │    │   ├── Dockerfile
  │    │   └── php.ini
  │    └── [phpmyadmin]
  │        └── [sessions]
  └── [src]
```

# 次回
次回はLaravelとVueの環境構築を進めます。
https://qiita.com/Hassaaaaaaan/items/a07e8cd20b9b8d84c461

# 参考にさせていただいた記事
https://qiita.com/phper_sugiyama/items/654f7a9171ae5ccf3e83
https://qiita.com/rockinruuula1227/items/83f3f1406f339083ef3f