Docker上でLarevel + Vue3 + Typescriptを使いたかったから環境を作った

## 【きっかけ】
以前投稿した記事
「[Larevel + Vue3 + Typescriptでvue-routerを使いたい](https://qiita.com/Hoi-hoi/items/96705df38cb7ddcfca1d)	」
をDocker上で実施するために環境を作った話

## 【Docker上に必要だったもの】
* PHP（言わずもがな)
* Composer(Laravel作成のため)
* Apache(Laravelの実行環境)
* npm(Vueなどを入れるため)
* MySQL（環境作成後にアプリ作成のため）

## 【実際に用意した構成】
コンテナの分割を極力避けたかっため、
* MySQL以外を扱うappコンテナ
* MySQLを扱うMySqlコンテナ

の2つに分割
``` 
project
├─ docker
│  ├─ app
│  │  ├─ Dockerfile (「MySQL以外」のイメージを作成する元のファイル)
│  │  ├─ php.ini (PHP設定ファイル)
│  │  └─ 000-default.conf (apache設定ファイル)
│  │
│  └─ mysql
│      ├─ Dockerfile (「MySQL」のイメージを作成する元)
│      ├─ my.cnf (MySQL設定ファイル)
│      └─ data/ (MySQLのデータを管理するディレクトリ)
│
├─ docker-compose.yml (docker-composeを実行するためのファイル)
└─ src/ (Laravelプロジェクトを作成するディレクトリ)
```

## 【各ファイル内容】
### app/Dockerfile
このファイルを元にappコンテナが作られる
```
# ベースとなるイメージ
FROM php:8.1-apache
# 設定ファイルをコンテナ内にコピー
COPY ./php.ini /usr/local/etc/php
COPY ./000-default.conf /etc/apache2/sites-enabled/

# composerの取得・設定
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

# npm取得
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -

# ミドルウェア取得
RUN apt-get update \
&& apt-get install -y \
nodejs \
git \
zip \
unzip \
vim \
mariadb-client \
&& docker-php-ext-install pdo_mysql

# Apache設定
RUN mv /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled
RUN a2enmod headers
RUN /bin/sh -c a2enmod rewrite

# 安定版のLaravel取得
RUN composer global require "laravel/installer"
```

### php.ini
PHPのタイムゾーンや文字関係の設定
``` 
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.languge = "Japanese"

```

### 000-default.conf
Apacheの設定
```
<VirtualHost *:80>
	ServerAdmin webmaster@localhost
	DocumentRoot /var/www/html/public
	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined
	<Directory /var/www/html/laravelapp/public>
		AllowOverride All
	</Directory>
</VirtualHost>
```

### mysql/Dockerfile
このファイルを元にMySQLコンテナが作られる
```
# ベースとなるイメージ
FROM mysql:8
# 設定ファイルをコンテナ内にコピー
COPY my.cnf /etc/mysql/conf.d/
# コピーした設定ファイルの権限変更
RUN chmod 644 /etc/mysql/conf.d/my.cnf
```

### my.cnf
MySQLの文字設定
```
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci
[client]
default-character-set=utf8mb4
```

### docker-compose.yml
YAMLファイルのためインデント注意
```
version: '3'
services:
  # appコンテナの設定
  app:
    ports:
      - "8000:80"
    build: ./docker/app
    container_name: laravel_app
    volumes:
      - ./src:/var/www/html
  # dbコンテナの設定
  db:
    build: ./docker/mysql
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: sample
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 3306:3306
```

## 【コンテナ起動】
project/に移動してまずイメージをビルド
```
docker-compose build
```

同じディレクトリでコンテナを起動
```
docker-compose up -d
```

## 【プロジェクト作成】
appコンテナに入る
```
docker-compose exec app bash
```
appコンテナ内に入るとコンソールは以下の表示になる
```
/var/www/html# 
```
appコンテナ内で以下のLaravelプロジェクトをディレクトリ直下に作成
* 以下のコマンドでsrcディレクトリ直下に作成される
```
composer create-project laravel/laravel ./
```
## 【以上まで完了したら】
appコンテナに入った状態で以前の記事の[パッケージインストール](https://qiita.com/Hoi-hoi/items/96705df38cb7ddcfca1d#%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)から実施する

ただし、今回の環境ではApache上でプロジェクトが動いているため、
「Laravelプロジェクトを実行」の手順は不要

## 【参考にさせていただいた記事】

Dockerを使ってLaravel開発環境構築(Apache) https://qiita.com/A-Kira/items/9a03d7b230741ed7b1de

DockerでApache+PHP+MySQLの環境を構築してみる https://qiita.com/me-654393/items/1ed212cb33eafe734835