[Laravel Vue3] LaravelとVue3をDockerで立ち上げる

こんな感じのウェブサイト作ってーとペラ10枚くらいのPDFを投げられてきたので、とりあえずLaravelの最新くらいとVue3でいいかなーっていう時のメモ

BtoCのCの画面frontと管理画面のadmin両方動かします。S3を使うためminioも一緒に入れます。Laravelから保存はできるものの生成されるURIで画像が表示されません。。（本番は平気なのでここら辺の設定がおかしいはず）

version: '3.8'

services:
  front:
    build:
      context: ./front
      dockerfile: Dockerfile
    ports:
        - '21288:80'
        - "8000:8000"
        - "5173:5173"
    volumes:
      - ./front/src:/var/www/front
      - ./config/apache/default.conf:/etc/apache2/sites-enabled/000-default.conf
      - ./config/apache/logs:/var/log/httpd
      # - ./php/bin:/var/www/bin
    depends_on:
      - mysql
    networks:
      - web-net
  admin:
    build:
      context: ./admin
      dockerfile: Dockerfile
    ports:
        - '21289:81'
        - "8001:8001"
        - "5174:5174"
    volumes:
      - ./admin/src:/var/www/admin
      - ./config/apache/default.conf:/etc/apache2/sites-enabled/000-default.conf
      - ./config/apache/logs:/var/log/httpd
      # - ./php/bin:/var/www/bin
    depends_on:
      - mysql
    networks:
      - web-net
  mysql:
    image: mysql:8.0.31
    platform: linux/arm64/v8
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=webappli
      - MYSQL_USER=webappli
      - MYSQL_PASSWORD=webappli
    volumes: 
      - ./config/mysql/volumes:/var/lib/mysql
      - ./config/mysql/conf.d/my.cnf:/etc/mysql/conf.d/mysql.cnf
      - ./config/mysql/data:/data
      # - ./mysql/init.d:/docker-entrypoint-initdb.d
    ports:
      - "23506:3306"
    networks:
      - web-net
  ymca-minio:
    image: quay.io/minio/minio
    ports:
      - '9000:9000'
      - '9001:9001'
    networks:
      ymca-net:
        ipv4_address: 172.21.0.15
    environment:
      - MINIO_ROOT_USER=minio
      - MINIO_ROOT_PASSWORD=minio1234
    entrypoint: sh
    command: -c "/opt/bin/minio server /export --address :9000 --console-address :9001"
    volumes:
      - ./minio/data:/export
networks:
  ymca-net:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 172.21.0.0/16
          gateway: 172.21.0.1

FROM php:8.1-apache

RUN apt-get update \
    # unzip (composer create-project で必要)
    && apt-get install -y unzip \
    # Vim 
    && apt-get install -y vim \
    # PHP BCMath
    && docker-php-ext-install bcmath \
    # PHP GD
    && apt-get install -y zlib1g-dev libpng-dev libfreetype6-dev libjpeg62-turbo-dev libjpeg-dev \
    && docker-php-ext-configure gd --with-jpeg \
                                --with-freetype\
    && docker-php-ext-install -j$(nproc) gd \
    # PHP intl
    && apt-get install -y libicu-dev \
    && docker-php-ext-install intl \
    # PHP  zip
    && apt-get install -y \
                libzip-dev \
                zip \
    && docker-php-ext-install zip \
    # PHP PDO MySQL
    && docker-php-ext-install pdo_mysql \
    && apt-get install -y sudo less default-mysql-client \
    # cron intl
    && apt-get install -y cron \
    # mod_rewrite 有効化
    && a2enmod rewrite

WORKDIR /var/www/admin
# RUN curl "https://awscli.amazonaws.com/awscli-exe-linux-aarch64.zip" -o "awscliv2.zip"
# RUN unzip awscliv2.zip
# RUN sudo ./aws/install

#Composerのインストール
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
RUN composer create-project --prefer-dist laravel/laravel .
# Node.jsのインストール
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && \
apt-get install -y nodejs

RUN npm install create-vite@2

RUN npm install vuejs-paginate-next --save

RUN npm install vue-router

COPY ./config/php/php.ini /usr/local/etc/php/

EXPOSE 80

こんな感じでdocker-compose.ymlとDockerfileを書いてみました。実行時はこんな感じでLaravelを起動

 docker compose exec admin php artisan serve --host=0.0.0.0 --port=8001

続けて別のターミナルでViteを起動

 docker compose exec admin npm run dev

今回LaravelのInertiaも面白そうと思っていたのですがスケジュールがタイトだったので見送ってVueにしました。それでも少しでも新しいのを触りたくwebpackではなくVIteってなんだ？やってみよ！というノリで進めました。それとVue2は触っていたのですがVue3を触ってみよう！！というノリで始めたプロジェクトでした。
1人でやっているプロジェクトでしたが最終的には4人（未経験新人1人、中途未経験1人、3年目1人）となり案の定燃えましたw