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

【きっかけ】

以前投稿した記事
「Larevel + Vue3 + Typescriptでvue-routerを使いたい 」
を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コンテナに入った状態で以前の記事のパッケージインストールから実施する

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

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

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

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