Laravel mix vue No.1 - Docker Environment - Dockerでlaravel環境 (laradockを使わない)

こんにちは、あすかのkoheiです。

今回はPHP Laravel の環境を構築したいと思います。

LaravelではPHPの組み込み開発サーバ、VagrantでHomestead、Valetなどの開発環境がありますが、 dockerよく聞くのでやってみます。

DockerだとLaradockがあるのですが、いっぱいはいってて、うわぁ～ってなったので、Laravel用の小さいのにします。

連載記事

• Laravel mix vue No.1 - Docker Environment - Dockerでlaravel環境 (laradockを使わない)
• Laravel mix vue No.2 - Vue Router, Component - Vueルータの設定とコンポネント作成
• Laravel mix vue No.3 - Authentication API - Apiで認証
• Laravel mix vue No.4 - Vuex - Vuexで状態管理
• Laravel mix vue No.5 - Api Email Verification - メール認証に変更
• Laravel mix vue No.6 - Api Resetting Passwords - パスワードリセット
• Laravel mix vue No.7 - Socialite - ソーシャルログイン
• Laravel mix vue No.8 - Laravel Internationalization - Laravel多言語化
• Laravel mix vue No.9 - Vue Internationalization - Vue多言語化

Docker Environment - Dockerでlaravel環境 (laradockを使わない)

サンプル

• docker系のファイルだけ
  github ldocker 01

• 完成
  github ldocker 02

---

要件

• 64 bit Windows 10 Pro
• docker -> php7.4, nginx, mysql, redis, nodejs
• laravel7.3

---

windowsの設定とDocker Desktop for Windowsのインストール

Windowsの機能　->　Hyper-Vにチェック　-> PC再起動

install docker desktop

Docker Desktop for Windows を以下のリンク「Get Docker Desktop for Windows (stable)」からダウンロードしてインストール

Docker Desktop for Windows

Docker Desktop for Windows start

ショートカットをクリックするとタスクバーにアイコンが表示

アイコンをクリックするとメニューが表示

---

フォルダ構成

├── server
├── docker-compose.yml <- １これ作る
└─── docker
   ├─ php
   │   ├── Dockerfile <- ２これ作る
   │   └── php.ini <- ３これ作る
   ├── nginx
   │   └── default.conf <- ４これ作る
   └── db

---

ファイルを用意する

１. docker-compose.ymlをつくる

# Docker Composeのバージョン
 version: "3"

# 作成するコンテナを定義
 services:
  ## phpサービス
  php:
    ### コンテナの名前
    container_name: my_php
    ### コンテナの元になるDockerfileがおいてあるパス
    build: ./docker/php
    ### ホストPC側のプログラムソースディレクトリをマウント
    volumes:
      - ./server:/var/www
    ports:
      - "3000:3000"
      - "3001:3001"

  ## nginxサービス
  nginx:
    ### Nginxコンテナのもとになるイメージを指定
    image: nginx
    ### コンテナの名前
    container_name: my_nginx
    ### ホスト側の80番ポートとコンテナ側の80番ポートをつなげる
    ports:
      - 80:80
    ### ホストPC側をnginxにマウント
    volumes:
      - ./server:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    ### 依存関係
    depends_on:
      - php

  ## dbサービス
  db:
    ### イメージを指定
    image: mysql:5.7
    ### コンテナの名前 -> これがホスト名になるので.envでは「DB_HOST=my_db」とする
    container_name: my_db
    ### db設定
    environment:
      MYSQL_ROOT_PASSWORD: root
      #### .envで使うDB_DATABASEの値
      MYSQL_DATABASE: database
      #### .envで使うDB_USERNAMEの値
      MYSQL_USER: docker
      #### .envで使うDB_PASSWORDの値
      MYSQL_PASSWORD: docker
      TZ: "Asia/Tokyo"
    ### コマンドで設定
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    ### ホスト側のポートとコンテナ側のポートをつなげる
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ### ホスト側のポートとコンテナ側のポートをつなげる
    ports:
      - 3306:3306

  ## redisサービス
  redis:
    ### イメージを指定
    image: redis:latest
    ### コンテナの名前 -> これがホスト名になるので.envでは「REDIS_HOST=my_redis」とする
    container_name: my_redis
    ### ホスト側のポートとコンテナ側のポートをつなげる
    ports:
      - 6379:6379

2. Dockerfileをつくる

FROM php:7.4-fpm

COPY php.ini /usr/local/etc/php/

#time zone setting!
ENV TZ Asia/Tokyo
RUN echo "${TZ}" > /etc/timezone \
   && dpkg-reconfigure -f noninteractive tzdata

RUN apt-get update

#pdo
RUN apt-get update \
  && apt-get install -y libzip-dev mariadb-client \
  && docker-php-ext-install zip pdo_mysql

#node
RUN apt-get install -y wget git unzip libpq-dev \
    && : 'Install Node.js' \
    &&  curl -sL https://deb.nodesource.com/setup_12.x | bash - \
    && : 'Install PHP Extensions' \
    && apt-get install -y nodejs

#composer
COPY --from=composer /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

#git
RUN apt-get install -y git

# redis
RUN git clone https://github.com/phpredis/phpredis.git /usr/src/php/ext/redis
RUN docker-php-ext-install redis

#vim
RUN apt-get install -y vim

# workdir
WORKDIR /var/www

3. phpのphp.iniをつくる

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

4. Nginxのdefault.conf

server {
    listen       80;
    index index.php index.html;
    root /var/www/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

---

docker を動かす

docker-compose.yml ディレクトリで実行

docker start

docker-compose up -d

# 表示
Creating my_redis ... done
Creating my_php   ... done
Creating my_db    ... done
Creating my_nginx ... done

コンテナに入る

docker-compose exec + [ サービス名 ] + bash

docker-compose exec php bash

laravel プロジェクト作成

composer create-project --prefer-dist laravel/laravel .

# 以下が出ると成功
Application key set successfully.

ブラウザで表示

ブラウザでhttp://localhost/にアクセス

---

docker の操作

コンテナから出る

exit

終了

docker-compose stop

スタート

docker-compose start

終了とコンテナ削除

docker-compose down

コンテナ確認

docker-compose ps

起動していないものも含めてコンテナ確認

docker ps -a

使ってないコンテナの削除

docker container prune

イメージ確認

docker images

使ってないイメージの削除

docker image prune

ネットワークの確認

docker network list

使ってないネットワークの削除

docker network prune

使ってないコンテナ、ボリューム、ネットワーク、イメージの削除

docker system prune

---

laravel のセッティング

appコンフィグを修正

...

'timezone' => 'Asia/Tokyo',
...
'locale' => 'ja',

.envを修正

APP_NAME=[project name]
...

DB_CONNECTION=mysql
DB_HOST=my_db # コンテナの名前
DB_PORT=3306
DB_DATABASE=database
DB_USERNAME=docker
DB_PASSWORD=docker
...

REDIS_HOST=my_redis # コンテナの名前
REDIS_PASSWORD=null
REDIS_PORT=6379

Laravel Auth インストール

composer require laravel/ui --dev
php artisan ui vue --auth
php artisan migrate

# 今回使わないものを消す
npm uninstall popper.js
rm app/Http/Controllers/HomeController.php
rm resources/js/components/ExampleComponent.vue
rm resources/views/home.blade.php
rm resources/views/welcome.blade.php
rm -r resources/sass
rm -r resources/views/auth
rm -r resources/views/layouts

キャッシュクリア

php artisan config:clear
php artisan config:cache

---

vue の準備

npmのインストール

npm-check-updatesでチェック npm-check-updates

# npmのアップデート
npm i -g npm
# npmモジュールインストール
npm i
# npm-check-updatesインストール
npm i -g npm-check-updates
# モジュールアップデート確認
ncu -u
# モジュールアップデート
npm update
# cross-env インストール
npm install --save-dev cross-env

vueのインストール

後で使うのでvue-router、 vuex も入れる

npm i -D vue-router
npm i -D vuex

webpack.mix.jsを修正

以下と差し替える

const mix = require('laravel-mix');

mix.js("resources/js/app.js", "public/js");

mix.browserSync({
  // アプリの起動アドレスを「nginx」
  proxy: "nginx",
  // ブラウザを自動で開かないようにする
  open: false
});

laravelのウェブルートを作成

以下と差し替える

<?php

use Illuminate\Support\Facades\Route;

// API以外はindexを返すようにして、VueRouterで制御
Route::get('/{any?}', fn () => view('index'))->where('any', '.+');

index.blade.phpを作成

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ config('app.name') }}</title>
  <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

vueのapp.jsを修正

以下と差し替える

import "./bootstrap";
import Vue from "vue";

new Vue({
  el: "#app",
  template: "<h1>Hello world</h1>"
});

bootstrap.jsの修正

以下と差し替える

window._ = require('lodash');

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

開発ビルド

npm run dev

# 表示
Okay, done. The following packages have been installed and saved to your package.json dependencies list:

        - browser-sync

        - browser-sync-webpack-plugin@2.0.1

        Finished. Please run Mix again.

# もう一度
npm run dev

ブラウザでhttp://localhost/にアクセス

ホットリロード

npm run watch

ブラウザでhttp://localhost:3000/にアクセス

これで開発がらくになります。

次はこれLaravel mix vue No.2 - Vue router, Vue component - Vueルータの設定とコンポネント作成