DockerでLaravel+Vue+mariadbの環境を作って初期設定まで行う
この記事について
2年ぶりに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
作成したファイルを下記のようにそれぞれ記載してください。
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
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を使用しています。
#!/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初期設定
まずは日本語化するために設定ファイルをそれぞれ書き換えていってください。
//'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で設定した内容に書き換えてください。
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
//livewire(通常のUI)とinertia(VueやReactでUIを開発する場合)の2種類ある。
//今回は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の方にもコミットしてあります。
あとがきと感想
約2年ぶりにLaravelを触りました。
あの頃はVer5.6でしたがいつの間にか3世代もメジャーアップデートされており、26世紀青年状態です。
一番戸惑ったのは認証系、UI系がJetStreamなるものに変わっており、パッケージインストールの必要があるので、困惑しました。
CSSフレームワークもVueもどんどん進化しており、また勉強し直しなので、今後も何か学んだらどんどんブログに書いていこうと思います。