最終目標

Docker 環境で Laradock を使用して Laravel のローカル環境を構築する
Laradock の設定よりは Laravel の設定のほうが多いかも。
Laravel Mix を導入し、css と js をコンパイルして表示させる。

Laradock とは

Laadockとは、DockerでPHP開発環境を構築する際に必要なSQLやWEBサーバなどすべて Dockerfile や .ymlファイルに既に定義してあるもの。
実行すれば、そこまでたくさんの設定をせずに、開発環境を構築することができる。

既存環境

MacOS version

% sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76

git version

Laradock は git からダウンロードするため、git が必須になる。

% git --version
git version 2.21.0 (Apple Git-122)

※ git の 2.21.0 は使わずに最新版を使用してください。

docker version

docker がまだ入っていない場合は、Dockerインストールを行う。

% docker -v
Docker version 19.03.8, build afacb8b

docker-compose version

docker-compose がまだ入ってない場合は、インストールを行う。

% docker-compose -v
docker-compose version 1.25.4, build 8d51620a

開発環境をつくってく

Laradock をインストールする

任意のディレクトリを作成し、そこに Laradock を git clone する

 % mkdir test_project
 % cd test_project

test_project % git clone https://github.com/Laradock/laradock.git

git clone するけど、Laradock は git 管理不要なので、Laradock と gitを切り離しする

% cd laradock 
% rm -rf .git/

環境変数の変更を行う

環境変数を作成する

% cd laradock
% cp -p env-example .env

.env

# コードの場所を指定しておく
APP_CODE_PATH_HOST=../test_project/

# MYSQL の version は 5.7 がいいので変更〜
MYSQL_VERSION=5.7

mysql の準備

laradock % cd mysql 
mysql % ls
mysql % cd docker-entrypoint-initdb.d 
docker-entrypoint-initdb.d % cp -p createdb.sql.example createdb.sql

createdb.sql

# コメントアウトを外し、任意の DB 名を作成しておく
CREATE DATABASE IF NOT EXISTS `test_db` COLLATE 'utf8_general_ci' ;
GRANT ALL ON `test_db`.* TO 'default'@'%' ;

mysql.conf を変更する

mysql.conf

# 変更箇所は以下
[mysqld]
sql-mode="STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION"
character-set-server=utf8mb4
default-authentication-plugin=mysql_native_password
skip-character-set-client-handshake
collation-server = utf8mb4_unicode_ci
init-connect = SET NAMES utf8mb4

[client]
default-character-set=utf8mb4

laradock の下に移動して、`docker-compose` を起動する

laradock % docker-compose up -d nginx mysql

この時点で正常に起動が可能になったので、dockerを使用した環境自体は、完成となる。
以下からは、Laravelのための各種設定になる。

mysql にログインしDBを作成する

mysql で準備したファイルを実行して、DBの作成を行う。

laradock % docker-compose exec mysql bash
root@1/# mysql -u root -p < /docker-entrypoint-initdb.d/createdb.sql
Enter password:

Laravel プロジェクトを作成する

作業エリアにログインする

laradock % docker exec -it laradock_workspace_1 bash
root@:/var/www#

Laravel プロジェクトをダウンロードする。今回のつくる名前は『test_project』

# 最新版の場合はこちら
root@:/var/www# composer create-project laravel/laravel test_project
# バージョン指定
composer create-project "laravel/laravel=5.8.*" test_project

インストール後確認すると、

root@d63aa0ee391e:/var/www# ls
laradock  test_project

できてる…！！

Laravel の設定

Laravel `.env`の設定

Laravel の設定を行っていく。まずは、.envの設定から。

.env

# 書き換えたところのみ記載する
APP_NAME=test_project
APP_PATH=./test_project/

DB_HOST=mysql
DB_DATABASE=test_db
DB_USERNAME=default
DB_PASSWORD=secret

各種 `conf`の設定を行う

config/の各種ファイル

app.php

# タイムゾーンの変更をする
'timezone' => 'Asia/Tokyo',
# 言語の設置を行う
'locale' => 'ja',

database.php

# 不要なものは削除する.

DB接続を試す

ログインして接続されているか確認をする

laradock % docker exec -it laradock_workspace_1 bash
root@:/var/www#

migration を実行する

root@:/var/www/test_project# php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.06 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.05 seconds)

正常に通れば、DBの接続がせいこうしている。

`Laravel Mix` の設定を行う

browser-sync-webpack-plugin を使用するため追記
webpackConfigの設定を追記

webpack.mix.js

const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

    .webpackConfig({
        plugins: [
          new BrowserSyncPlugin({
            open: 'external',
            host: '',
            proxy: 'nginx',
            browser: "google chrome",
            files: [
              './resources/**/*',
            ],
            watchOptions: {
              usePolling: false,
              interval: 300,
            },
            open: "external",
            reloadOnRestart: false,
          }),
        ],
      });

# cross-env をインストールする
root@:/var/www/test_project# npm install --save-dev cross-env
# browser-sync-webpack-plugin をインストールする
root@:/var/www/test_project# npm install  browser-sync-webpack-plugin --save-dev
# browser-sync をインストール
npm install  browser-sync --save-dev

watch-poll 動かす

# root@:/var/www/test_project# npm run watch-poll

もし動かない場合は…

# node_modules を消して再インストールするとうまくいくかも〜…
root@:/var/www/test_project# rm -rf node_modules
root@:/var/www/test_project# rm package-lock.json 
root@:/var/www/test_project# npm cache clear --force
root@:/var/www/test_project# npm install

`storage`ディレクトリのパスを通す

# パスを通す
laradock % docker exec -it laradock_workspace_1 bash
root@:/var/www# chmod -R 777 storage/

# キャッシュ消す
root@:/var/www# php artisan config:cache
Configuration cache cleared!
Configuration cached successfully!

接続して画面に `Laravel` が表示するか確認する。

Laravel が表示されていれば完了とする。