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

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

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

% source ~/.zshrc

% phpbrew install 7.3.4
% phpbrew ext install {module_name}

% 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');"

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

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

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

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

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

{
    "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"
    }
}

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

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