この記事では、Laravel を利用してWebアプリケーションを開発する為のDockerを利用した環境構築手順についてご紹介します。
※ この環境を利用する為には、事前にdocker、docker-composeが動作する状態であることが前提条件です。
Windowsの場合は、以下を参考に事前に「WSL」と「Docker Desktop for Windows」を用意してください
WSLのインストール
Windowsをご利用している方は、Dockerを利用する為にシェルコマンドを実行できる環境を用意する必要があるため、以下を参考にしてWSLをインストールしてください。
https://docs.microsoft.com/ja-jp/windows/wsl/install
WSLをインストールしたらUbuntuのターミナルを起動します。
# 初回起動時に、ユーザ名とパスワードが聞かれます。 # 何も入力せずにEnterを押すとroot ユーザーで利用できるようになるので、rootユーザーとして設定します。 # 初めにライブラリを最新化します。 $ apt update # 日本語に対応しておきます。 $ apt -y install language-pack-ja $ update-locale LANG=ja_JP.UTF8 $ apt -y install manpages-ja manpages-ja-dev
Docker Desktop for Windows のインストール
Windowsをご利用している方は、以下を参考にしてDocker Desktop for Windowsをインストールしてください。
参考 https://docs.docker.com/docker-for-windows/install/
↓コマンドプロンプトでバージョンが表示されればOK docker --version
WSL2から、Docker for Windows を利用できるようにする(Windowsの場合)
- 通知領域から、dockerのアイコンを右クリックして、Settingを選択
- Generalのexpose deamon on~~のチェックを入れます。
- ResourcesのWSL INTEGRATION から、”Ubuntu” をスイッチをONにします。
# WSL 側のルートを Docker for Windows に合わせるように WSL のマウント設定を行います。 $ vi /etc/wsl.conf --- [automount] root = / options = "metadata" --- # 以下のように Cドライブのパスが"/mnt/c/"→"/c/" に変更されていれば正常です。 $ cd /c/Users/USER/github $ pwd /c/Users/USER/github # WSL 上にDockerとDocker Composeをインストールする。 $ apt install docker $ apt install docker-compose
これでWSLからWindows側にインストールしたDockerが利用できるようになります。
ソースコードをダウンロードする
こちらから「use this template」をクリックして自分のGithubリポジトリに複製後、github からソースコードをダウンロードします。
# ソースコードを配置したいディレクトリに移動する cd /c/Users/USER/github # Githubからソースコードをダウンロードする git clone git@github.com:xxxx/laravel-react-boilerplate.git
MySQL Client のインストール
# MySQLに接続する為のコマンドをインストールします。(バージョンは何でもOKです) # Windowsの場合 $ apt install mysql-client # Macの場合 $ brew install mysql-client
Node.js のインストール
# Windowsの場合 $ curl -L git.io/nodebrew | perl - setup # Macの場合 $ brew install nodebrew # nodebrew をシェルのパスに追加する $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc # Node.js をインストール $ mkdir -p ~/.nodebrew/src $ nodebrew ls-remote $ nodebrew install v16.13.1 $ nodebrew use v16.13.1 $ npm install -g yarn
📦 ディレクトリ構造
. ├── docker （各種Daemon） │ │ │ ├── apache （Webサーバー） │ │ ├── conf.d (apacheの設定ファイル) │ │ └── logs （apacheのログ） │ ├── mysql （DBサーバー） │ │ ├── conf.d (mysqlの設定ファイル) │ │ ├── data (mysqlのデータファイル) │ │ ├── init （mysqlの初期DDL） │ │ ├── logs （mysqlのログ） │ │ └── script （mysql関連のスクリプト） │ ├── php （PHP-FRM） │ │ └── logs （phpのログ） │ ├── phpmyadmin （DB管理ツール） │ └── s3 （オブジェクトストレージ） │ ├── htdocs （Apache公開ディレクトリ） │ │ │ ├── app │ │ ├── Console (バッチアプリケーション) │ │ ├── Exceptions (例外処理) │ │ ├── Http （Webアプリケーション） │ │ ├── Models（モデル） │ │ ├── Prociders（サービスプロバイダー） │ │ └── Services（共通処理） │ ├── bootstrap │ ├── config │ ├── database │ ├── public │ ├── resources │ ├── routes │ ├── storage │ ├── tests │ └── composer.json └── dc.sh （Dockerの起動用スクリプト）
🔧 開発環境の構築
各種デーモンを起動する
# 初期化 $ ./dc.sh init # すべてのDockerコンテナを起動する $ ./dc.sh start # データベースが立ち上がるまで少し待ちます。(初回は5分程度) # データベースが起動したら、MySQLにログインしてみる $ ./dc.sh mysql login
Minio にS3バケットを作成する
# AWS-CLIにアクセスする。
$ ./dc.sh aws local
# バケットを作成する
> aws --endpoint-url http://s3:9000 s3 mb s3://laraec.isystk.com
# バケットを公開する
> POLICY='{ "Version": "2012-10-17", "Statement": [{ "Sid": "MakeItPublic", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::laraec.isystk.com/*" }] }'
> aws --endpoint-url http://s3:9000 s3api put-bucket-policy --bucket laraec.isystk.com --policy "${POLICY}"
# バケットの一覧を確認する
> aws --endpoint-url http://s3:9000 s3 ls
# テストファイルをアップロードする
> aws --endpoint-url http://s3:9000 s3 cp ./front.png s3://laraec.isystk.com
$ open http://localhost:9000/laraec.isystk.com/front.png
バックエンド環境を構築する
# PHPサーバーにログインしてみる（composer や artisan などのコマンドは基本的にここで行う） $ ./dc.sh php login # .envをコピーする > cp .env.example .env # モジュールをダウンロード > composer update # encryption keyを生成する > php artisan key:generate # キャッシュをクリアする > php artisan cache:clear > php artisan config:clear # テーブルとテストデータの作成 > php artisan migrate:fresh --seed # ディレクトリにアクセス権限を付与 > chmod 777 -R bootstrap/cache > chmod 777 -R storage > chmod 777 -R resources/excel # テスト用の画像をS3（Minio）にアップロードします。※事前に minioをセットアップしておくこと > php artisan s3upload # アップロードした画像を参照できるようにシンボリックリンクを作成する > cd public > ln -s ../storage/app/public uploads
フロントエンド環境を構築する
# フロントエンドをビルドする。 $ cd htdocs $ yarn && yarn run dev # ブラウザでアクセス（フロント） $ open https://localhost/ # ブラウザでアクセス（管理画面） $ open https://localhost/admin/ # バッチを実行する（商品CSV出力バッチ） $ ./dc.sh php login $ php artisan stockcsv # サーバーを停止する場合 $ ./dc.sh stop
🖊️ Docker 操作用シェルスクリプトの使い方
Usage:
$(basename ${0}) [command] [<options>]
Options:
stats|st Dockerコンテナの状態を表示します。
init Dockerコンテナ・イメージ・生成ファイルの状態を初期化します。
start すべてのDaemonを起動します。
stop すべてのDaemonを停止します。
apache restart Apacheを再起動します。
mysql login MySQLデータベースにログインします。
mysql export MySQLデータベースのdumpファイルをエクスポートします。
mysql import MySQLデータベースにdumpファイルをインポートします。
mysql restart MySQLデータベースを再起動します。
php login PHP-FPMのサーバーにログインします。
php cache Laravelのキャッシュをクリアします。
php migrate Laravelのマイグレードを実行します。
php seed Laravelのテストデータを登録します。
--version, -v バージョンを表示します。
--help, -h ヘルプを表示します。
PhpMyAdmin
MySQLデータベースに接続してデータの参照や編集が可能です。Dockerを起動後に利用可能です。
Mailhog
ダミーのメールサーバーです。実際にはメールは送信されず、送信されたメールはブラウザで閲覧できます。Dockerを起動後に利用可能です。
Minio
S3に準拠したダミーのオブジェクトストレージです。Dockerを起動後に利用可能です。
ソースコード
https://github.com/isystk/laravel-react-boilerplate
関連記事
