Zenn
💻

Laravel10 + Nuxt3 コンテナ環境構築

2023/12/10に公開
Docker
Laravel
Nuxt
PHP
Vue.js
tech

概要

Laravel10 + Nuxt3 コンテナ環境構築に関する手順やメモ
環境：windows11（wsl2+ubuntu）
コンテナ構成：Nuxt.js + laravel + nginx + mysql

ファイル構成(今回作成するもの)

$ tree -L 2 ./laravel-nuxt/
./laravel-nuxt/
├── backend
│   ├── Dockerfile
│   ├── docker-entrypoint.sh
│   └── php.ini
├── docker-compose.yml
├── frontend
│   └── Dockerfile
└── nginx
    ├── Dockerfile
    └── conf

frontendディレクトリ配下がNuxt.js、backendディレクトリ配下がLaravel

手順

docker 初期導入手順

# install
sudo apt-get update
sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

# iptables-nft -> iptables-legacy 切り替え（WSL2 + Ubuntu22.04のみ）
sudo update-alternatives --config iptables

# sudo 権限なしで dockerコマンド
sudo usermod -aG docker $USER
# セッションリフレッシュ
exec su -1 $USER

# 失敗したとき用
# docker compose で完全削除
docker-compose down --rmi all --volumes --remove-orphans

nuxtコンテナ設定

作業ディレクトリの作成

mkdir laravel-nuxt ; cd laravel-nuxt

nuxt app 作成(npmのインストール等は割愛)

npm init nuxt-app frontend

Dockerファイル作成

cat <<EOF > frontend/Dockerfile
FROM node:16.13.1-alpine

WORKDIR /usr/src/app

ENV LANG=C.UTF-8
ENV TZ =Asia/Tokyo
EOF

php & composer インストール

php インストール

sudo apt update
sudo apt install php
# バージョン確認
php -v

php拡張機能インストール

sudo apt-get install zip
sudo apt-get install php-cli php-common php-mysql php-zip php-gd php-mbstring php-curl php-xml php-bcmath
# モジュール確認
php -m

composer インストール

curl -sS https://getcomposer.org/installer | php
sudo mv composer.pher /usr/local/bin/composer
sudo chmod +x /usr/local/bin/composer
# バージョン確認
composer -v

laravelコンテナ作成

プロジェクト作成

composer create-project laravel/laravel backend

Dockerfile作成

cat <<EOF > backend/Dockerfile
FROM php:8.1-fpm

COPY --from=composer:2.3.5 /usr/bin/composer /usr/bin/composer
COPY php.ini /etc/php/8.1/cli/conf.d/99-etc.ini

ADD docker-entrypoint.sh ./
RUN chmod +x ./docker-entrypoint.sh
CMD ["./docker-entrypoint.sh"]

RUN docker-php-ext-install pdo_mysql

WORKDIR /var/www/laravel
EOF

php.ini作成

cat <<EOF > backend/php.ini
# php.ini
[PHP]
post_max_size = 100M
upload_max_filesize = 100M
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

extension=redis.so
EOF

docker-entrypoint.sh作成

cat <<EOF > backend/docker-entrypoint.sh
# docker-entrypoint.sh
# Install Laravel packages
composer install

if [ ! -e ./.env ]; then
  cp .env.example .env
fi

php artisan serve --host=0.0.0.0
EOF

env作成

cp backend/.env.example backend/.env
emacs backend/.env
---
# 該当箇所を下記に書き換え
# DB_HOSTはlocalhostではなくコンテナ名を指定すること
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=database
DB_USERNAME=user
DB_PASSWORD=password
---

Mysqlコンテナ作成

env作成(環境ごとに適当な値を入れてください)

cat <<EOF > .env
DB_DATABASE=database
DB_USERNAME=user
DB_PASSWORD=password
DB_ROOT_PASSWORD=root
EOF

Nginxコンテナ作成

ディレクトリ作成

mkdir -p nginx/conf

Dockerfile作成

cat <<EOF > nginx/Dockerfile
FROM nginx:1.19
RUN apt-get update && \
    apt-get install -y apt-utils \
    locales && \
    sed -i -e 's/# ja_JP.UTF-8/ja_JP.UTF-8/g' /etc/locale.gen && \
    locale-gen ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LC_TIME C
ENV TZ Asia/Tokyo
RUN echo "${TZ}" > /etc/timezone \
    && dpkg-reconfigure -f noninteractive tzdata
COPY conf/default.conf /etc/nginx/conf.d/default.conf
EOF

default.conf作成

cat <<EOF > nginx/conf/default.conf
server {
  listen 80;
  root /app/public;

  location / {
    proxy_pass    http://frontend:3000;
  }
  location /api {
    proxy_pass http://backend:8000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    add_header X-Server-Hostname $hostname;
    add_header X-Server-Address $server_addr;
  }

  client_max_body_size 100m;
  keepalive_timeout 5;
}
EOF

Docker立ち上げ

docker-compose.ymlを作成

cat <<EOF > docker-compose.yml
version: "3.7"
services:
  frontend:
    build: ./frontend
    environment:
      - NODE_ENV=development
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./frontend:/usr/src/app
    command: sh -c 'npm install && npm run dev'
    ports:
      - '3000:3000'
    tty: true
  backend:
    build: ./backend
    tty: true
    volumes:
        - ./backend:/var/www/laravel
    ports:
      - '8000:8000'
    env_file:
      - ./backend/.env
  mysql:
    image: mysql/mysql-server:5.7
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    ports:
      - '3306:3306'
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: '${DB_ROOT_PASSWORD}'
      MYSQL_DATABASE: '${DB_DATABASE}'
      MYSQL_USER: '${DB_USERNAME}'
      MYSQL_PASSWORD: '${DB_PASSWORD}'
    volumes:
      - /var/lib/mysql
    env_file:
      - ./.env
  nginx:
    build:
      context: ./nginx/
      dockerfile: Dockerfile
    ports:
      - 80:80
    tty: true
    restart: always
    depends_on:
      - frontend
      - backend
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
EOF

コンテナ立ち上げ

docker compose up -d

確認

  • Nginx + Nuxtコンテナ確認
  • Laravel + Mysqlコンテナ確認
    • migrationが通ることを確認
docker compose exec backend php artisan migrate
  • Laravelコンテナ確認

参考

下記リポジトリにて更新中
https://github.com/suraud/laravel_nuxt_env

Discussion