DockerでLaravel9の開発環境を構築する

DockerでLaravel9の開発環境を構築する

目次

この記事では、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の場合)

  1. 通知領域から、dockerのアイコンを右クリックして、Settingを選択
  2. Generalのexpose deamon on~~のチェックを入れます。
  3. 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

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。