DockerでLaravel＋Vue＋mariadbの環境を作って初期設定まで行う

公開：2021/01/31
更新：2021/02/136 min読了の目安（約5400字）TECH技術記事
Docker
Laravel
Vue.js
初心者
#
jetstream

この記事について

２年ぶりにLaravelを触ってみて、とりあえず初期設定までできるようになったので、今後使えるように備忘録として残しておきます。

構成としてはLaravel8でVueのSPAを作成する前提で組んでいます。
M1チップMacで作っているので、ARMユーザーでも安心です。
間違ってたり直して欲しいところがあったら指摘して頂けたら幸いです。

ゴール

Laravel8、Vue、DB、Jetstreamのセットアップを行い、認証画面まで表示させる。

開発環境

MacBook Air (M1, 2020)
OS:Ver11.1 BigSur
Docker version 20.10.1
docker-compose version 1.27.4

Dockerのセットアップ

ディレクトリとファイル作成

今回は「lara_dock_spa」という名前でPJを作成します。
自分のプロジェクトに合わせて全置換で差し替えてください。

ディレクトリ

/lara_dock_spa
├─ /db       # データの保存先ディレクトリ
├─ /web      # アプリケーションコードの保存先ディレクトリ
├─ Dockerfile
├─ docker-compose.yml
└─ install-composer.sh

作成したファイルを下記のようにそれぞれ記載してください。

DockerFile
FROM php:7.4.1-fpm

COPY install-composer.sh /
RUN apt-get update \
  && apt-get install -y wget git unzip libpq-dev \
  && docker-php-ext-install pdo_mysql\
  && : 'Install Node.js' \
  &&  curl -sL https://deb.nodesource.com/setup_12.x | bash - \
  && apt-get install -y nodejs \
  && : 'Install PHP Extensions' \
  && docker-php-ext-install -j$(nproc) pdo_pgsql \
  && : 'Install Composer' \
  && chmod 755 /install-composer.sh \
  && /install-composer.sh \
  && mv composer.phar /usr/local/bin/composer

WORKDIR /var/www/html/lara_dock_spa
docker-compose.yml
version: '3'
services:
  lara_dock_spa_web:
    build: .
    container_name: lara_dock_spa_web
    volumes:
      - ./web:/var/www/html/lara_dock_spa
    ports:
      - 8081:8081
      - 3000:3000
  lara_dock_spa_db:
    image: mariadb:latest
    container_name: lara_dock_spa_db
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: lara_dock_spa
      MYSQL_USER: laravel
      MYSQL_PASSWORD: secret
      TZ: Asia/Tokyoa
    volumes:
    - ./db/data:/var/lib/mysql
    - ./db/my.cnf:/etc/mysql/conf.d/my.cnf
    - ./db/sql:/docker-entrypoint-initdb.d
    ports:
    - 3306:3306

※MySQLはM1チップMacでは使用できないためMariaDBを使用しています。

install-composer.sh
#!/bin/sh

EXPECTED_SIGNATURE="$(wget -q -O - https://composer.github.io/installer.sig)"
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
ACTUAL_SIGNATURE="$(php -r "echo hash_file('sha384', 'composer-setup.php');")"

if [ "$EXPECTED_SIGNATURE" != "$ACTUAL_SIGNATURE" ]
then
    >&2 echo 'ERROR: Invalid installer signature'
    rm composer-setup.php
    exit 1
fi

php composer-setup.php --quiet
RESULT=$?
rm composer-setup.php
exit $RESULT

ビルドと起動

docker-compose.ymlが設置されているディレクトリで下記を実行してください。

docker-compose up -d

モリモリビルドが始まって特にエラーが起きなければ成功です。
Docker for desktopを使用している方はDashboardを開いてコンテナが起動しているのを確認してください。

Laravelのセットアップ

LaravelPJ作成

起動が完了したらWebコンテナに入ります。

docker-compose exec lara_dock_spa_web bash

Webコンテナに入った状態でLaravel プロジェクトを作成。

composer create-project --prefer-dist laravel/laravel .

webディレクトリにモリモリインストールされるのでまたしばらく待ちます。
完了したら開発用サーバ立ち上げ

php artisan serve --host 0.0.0.0 --port 8081

Webブラウザでhttp://127.0.0.1:8081/にアクセスし、Welcomeページが表示されたらLaravelのインストールは成功です。

ちなみに

コンテナからログアウト

exit

Docker停止

docker-compose stop

Docker再起動

docker-compose restart

Laravel初期設定

まずは日本語化するために設定ファイルをそれぞれ書き換えていってください。

web/config/app.php
//'locale' => 'en',
'locale' => 'ja',
//===========================
//'timezone' => 'UTC',
'timezone' => 'Asia/Tokyo',

次にメッセージ系を日本語化するため、下記コマンドで日本語パッケージをインストール

インストーラのダウンロード
php -r "copy('https://readouble.com/laravel/6.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
インストーラの実行
php -f install-ja-lang.php
インストーラの削除
php -r "unlink('install-ja-lang.php');"

DB接続設定を行います。
.envファイルを下記のようにdocker-compose.ymlで設定した内容に書き換えてください。

web/.env
DB_CONNECTION=mysql
#DB_HOST=127.0.0.1
DB_HOST=lara_dock_spa_db
DB_PORT=3306
#DB_DATABASE=laravel
DB_DATABASE=lara_dock_spa_db
DB_USERNAME=root
#DB_PASSWORD=
DB_PASSWORD=password

DB疎通確認

php artisan migrate:status

赤文字で「Migration table not found.」と表示されてギョッとしますが、こちらのメッセージが出れば正常に疎通ができているのでDB接続は正常です。

認証系やUIパッケージをインストール

最新のLaravel8では認証系やUI関連の設定がJetStreamというパッケージに外出しされているので、こちらをインストールします。

パッケージインストール
composer require laravel/jetstream
JetStreamセットアップ
//livewire(通常のUI)とinertia(VueやReactでUIを開発する場合)の２種類ある。
//今回はVueで開発がしたいのでinertiaを選択
php artisan jetstream:install inertia

完了したらJSをビルドする。

npm install && npm run dev

マイグレーションを実行する

php artisan migrate

再びサーバを起動し、ブラウザで確認すると右上に認証画面へのリンクが作成されており、いい感じの認証機能が実装された状態になっています。

php artisan serve --host 0.0.0.0 --port 8081


今回作成したものはGithubの方にもコミットしてあります。

https://github.com/chegeba/lara_dock_spa

あとがきと感想

約２年ぶりにLaravelを触りました。
あの頃はVer5.6でしたがいつの間にか3世代もメジャーアップデートされており、２６世紀青年状態です。
一番戸惑ったのは認証系、UI系がJetStreamなるものに変わっており、パッケージインストールの必要があるので、困惑しました。
CSSフレームワークもVueもどんどん進化しており、また勉強し直しなので、今後も何か学んだらどんどんブログに書いていこうと思います。

参考

https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project
https://qiita.com/mitashun/items/160784ce352cf529f853
https://qiita.com/manbolila/items/498aae00f3574c72f031
https://ja.m.wikipedia.org/wiki/26世紀青年