【Laravel】LaravelによるWeb開発プロジェクトPart1 - 環境構築とLaravel Mixを利用してフロントエンドを設定するまで- #PHP

はじめに

皆さん、こんにちは。今回はPHPのWebフレームワークであるLaravelでWebアプリケーションを構築していこうと思います。筆者はRailsによるWeb開発のキャリアからスタート(本当はデータセンターの保守エンジニアですが)し、PHPの開発はWordPressのようなCMS上での開発経験しかありません。
しかし、ここ最近フレームワークや言語どうこうと言うより、設計する機会を増やして考える時間を増やしたいという思いの上、今回はLaravelで開発する事にしました。

各Version

PHP 7.3.4
Laravel 5.8.3

phpbrewによるPHP本体のインストール

当初、phpenvを利用していましたが、phpenvはrbenvからのcloneプロジェクトであり、僕の環境では、rbenvで利用している環境変数と競合している模様でプロジェクト毎にPHPをインストールし、開発・利用するには、中々辛いツールとなっていました。phpenvについてはこちら→https://github.com/phpenv/phpenv

そこで、一旦phpenvでPHPをインストールするのは諦めて、phpbrewでPHPをインストールする事にしました。

% curl -L -O https://github.com/phpbrew/phpbrew/raw/master/phpbrew
% chmod +x phpbrew
% sudo mv phpbrew /usr/local/bin/phpbrew

.zshrc

[[ -e ~/.phpbrew/bashrc ]] && source ~/.phpbrew/bashrc

% source ~/.zshrc

これによりphpbrew経由でphpをインストールする事ができます。また、下記composer、Laravelをインストールする際に必要となるモジュールを有効にするためにはext コマンドを利用します。

% phpbrew install 7.3.4
% phpbrew ext install {module_name}

composerのインストール

Laravelを導入する前に、composerをインストールします。composerはPHPプロジェクトが必要とするライブラリやパッケージを管理するライブラリ依存管理ツールです。
以下のスクリプトを実行してみましょう。

% php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
% php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
% php composer-setup.php
% php -r "unlink('composer-setup.php');"

composerのインストールが完了したらcomposer.pharをPATH環境変数に置いておきます。

mv composer.phar /usr/local/bin/composer

以上により、Laravelをインストールする準備が出来たので、開発ディレクトリ配下で以下のコマンドを実行してみましょう。

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

Laravel本体の設定

Laravelドキュメントが若干探しにくかったですが、一旦https://readouble.com/laravel/5.8/ja/installation.htmlのドキュメントやhttps://laracasts.com/series/laravel-from-scratch-2018の動画を通じて、一つ一つ読んでいきながら開発を進めて行こうと思います。

コンテナの設定

一先ず、開発がしやすくなるようにまずはコンテナによる開発環境の構築スクリプトを書いていきます。
基本は、PHPの最新版が入っているコンテナイメージにcomposer, npm, laravelをインストール(コンパイルに必要なパッケージインストールも含めて)するだけです。

Dockerfile

FROM php:7.3.4

RUN apt update

RUN apt install -y git libpq-dev wget gnupg zlib1g-dev libzip-dev
RUN docker-php-ext-install pdo_pgsql zip
# 日本語環境を整える
ENV LANG C.UTF-8

# JSTにシステム時刻を変更
RUN rm -f /etc/localtime
RUN ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

# postgresql-client install
RUN sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ stretch-pgdg main" >> /etc/apt/sources.list.d/pgdg.list'
RUN wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | apt-key add -
RUN apt update && apt install -y postgresql-client
RUN mkdir -p /usr/local/laravel

# 最新のnpmをインストール
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt update && apt install -y nodejs npm

WORKDIR /usr/local/laravel

# compose install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" && \
    php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" && \
    php composer-setup.php && \
    php -r "unlink('composer-setup.php');"

RUN mv composer.phar /usr/local/bin/composer
RUN composer global require laravel/installer
ADD . /usr/local/laravel

docker-compose.yml

version: '3'
volumes:
  pids:
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    command: bash -c "php artisan serve --host=0.0.0.0"
    links: [db]
    volumes:
      - .:/usr/local/laravel
    ports:
      - 8000:8000
    stdin_open: true
    tty: true
  db:
    image: postgres:latest
    environment:
      - POSTGRES_USER=daily_report
      - POSTGRES_PASSWORD=daily_report
      - POSTGRES_DB=daily_report_development
    ports:
      - 5432:5432

コンテナを起動したら、npm install && npm run devでパッケージインストールとコンパイルを行います。

% docker exec -it daily_report_web_1 /bin/bash
% npm install
% npm run dev

npmパッケージの見直し

まだ歴史は全然辿れていないですが、LaravelはデフォルトでwebpackのラッパーであるLaravel mixが使えるように、package.jsonにデフォルトでインストール対象のパッケージがまとめてあります。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

vueもデフォルトで入っている模様なので、どうせならjqueryは廃止してvue-bootstrapにリプレースしたいものです。と言うわけでnpmのパッケージを入れ替えます。

% npm uninstall jquery
% npm uninstall bootstrap
% npm install bootstrap-vue

また、node_modules配下にインストールしたbootstrap,bootstrap-vueのcssのコンパイル設定をwebpack.mix.js上で行います。

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.copy('node_modules/bootstrap/dist/css/bootstrap.css', 'public/css/bootstrap.css')
   .copy('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css/bootstrap-vue.css')
   .styles(['resources/css/cover.css'], 'public/css/cover.css')
   .js('resources/js/app.js', 'public/js')

以上の設定で、コンパイルを行います。

% npm run dev

まとめ

Laravel Mixはピュアなwebpackで設定するのも良いかなと思いましたが、折角デフォルトで存在するWrapperでもあるので、一旦Laravel Mix経由でフロントエンドの設定を行なっていきたいと思います。
まだ、PHPのコード全然書いていないので、本格的な開発は次からです。
それでは。

【Laravel】LaravelによるWeb開発プロジェクトPart1 - 環境構築とLaravel Mixを利用してフロントエンドを設定するまで-