最終目標
- 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 が表示されていれば完了とする。