입문

Laravel에서 vue.js로 개발할 때.
laravel-mix를 곁들인 열중량 적재 기능(HMR)이 편리하다.
그러나 호스트에서 작동한다고 가정하면 Docker를 바탕으로 HMR 개발 환경을 만들고 싶어 곤혹스러워 정보를 정리한다.

개요

Laravel6 + vue.다음은 js on Docker 환경에서 HMR 설정을 소개합니다.
나는 라라닥을 쓰지 않는다.
버전 제어가 필요한 도구를 호스트에 넣기 싫으므로 Docker 컨테이너에서 모두 완료합니다.
(yarn의 운행은 용기 안에서 느리게 실행되지만 Ubuntu에서는 큰 차이를 느끼지 못해 용기 안에서 운행하는 상황을 기재했다.)

환경

Ubuntu 18.04

Docker 19.03.5

docker-compose 1.25.0

Laravel 6

결론

웹 서버에서 Laravel 구축 서버 사용

PHP 및 Node.js는 같은 용기로 설정

Webpack 프록시 기능을 통해 8080 액세스를 8000 포트(서버 구축)로 전송

소스 여기 있어요.
https://github.com/odaryo/laravel6_vuejs_HMR

환경 건설에 관하여

디렉토리 구성

┬－ docker （Dockerの設定）
│    └－ app
│        ├－ conf.d  （php設定ファイル）
│        │   ├－ php_settings.ini
│        │   └－ xdebug.ini
│        └－ Dockerfile
├－ src  （Laravelディレクトリ）
└－ docker-compose.yml

저장소 환경

docker-compoe

앱 컨테이너에는 Laravel 구축 서버를 시작하는 설정이 포함되어 있습니다.
docker-compose.yml

version: '3'

services:
  # laravel
  app:
    build:
      context: ./
      dockerfile: ./docker/app/Dockerfile
    depends_on:
      - db
    links:
      - db
    volumes:
      - ./app:/app:cached
      - ./docker/app/conf.d/xdebug.ini:/usr/local/etc/php/conf.d/xdebug.ini
      - ./docker/app/conf.d/php_settings.ini:/usr/local/etc/php/conf.d/php_settings.ini
    command: bash -c "php artisan serve --host 0.0.0.0" # 起動時にビルドインサーバーを起動
    ports:
      - "8000:8000"  # php artisan serve 用のポート
      - "8080:8080"  # HMR用のポート

  # DB (mysql)
  db:
    image: mysql:8
    environment:
      - MYSQL_DATABASE=testdb
      - MYSQL_USER=testuser
      - MYSQL_PASSWORD=password
      - MYSQL_ROOT_PASSWORD=root
      - TZ=Asia/Tokyo
    restart: always
    volumes:
      - dev_mysql_data:/var/lib/mysql
    ports:
      - "33306:3306"

volumes:
  dev_mysql_data:
    driver: local

Dockerfile

PHP 컨테이너 및 Nodejs 용기로 나누면 순조롭지 않기 때문에 여러 단계로 구성된 형식으로 PHP 용기에 Node가 있습니다.js 추가
Dockerfile

# Nodeイメージ
FROM node:13-alpine as node

# PHPイメージ
FROM php:7.3-alpine

# Laravel環境に必要なパッケージをインストール
RUN apk update \
    && apk upgrade \
    && apk add --no-cache \
        bash \
        git \
        unzip \
        libpng \
        libpng-dev \
        libjpeg \
        icu \
        icu-dev \
        icu-libs \
        libxml2 \
        libxml2-dev \
        openssl \
        openssl-dev \
    && docker-php-ext-install \
        pdo_mysql \
        mysqli \
        gd \
        mbstring \
        intl \
        xml \
        opcache \
    && docker-php-ext-enable intl mbstring \
    && apk --update --no-cache add autoconf g++ make \
    # xdebugインストール
    && pecl install -f xdebug \
    && docker-php-ext-enable xdebug \
    && apk del --purge autoconf g++ make

# Composerのインストール
RUN curl -sS https://getcomposer.org/installer | php ;mv composer.phar /usr/local/bin/composer;
RUN composer global require hirak/prestissimo \
    && composer global require phpunit/phpunit

# Nodeコンテナからyarnとnodeをコピー
COPY --from=node /opt/yarn-v* /opt/yarn
COPY --from=node /usr/local/bin/node /usr/local/bin/

# 使いやすいようにシンボリックリンク作成
RUN ln -s /opt/yarn/bin/yarn /usr/local/bin/yarn \
    && ln -s /opt/yarn/bin/yarnpkg /usr/local/bin/yarnpkg

# ホスト側とuser_id, group_idを合わせる
ARG USER_ID
ARG GROUP_ID

RUN addgroup -g ${GROUP_ID} -S app-user && \
    adduser -u ${USER_ID} -S app-user -G app-user

USER app-user:app-user

# Setup working directory
WORKDIR /app

참고 자료

Rails 6.0 × MySQL8을 사용하여 Docker 환경 구축(Alpine 기반)

멀티스테이지 빌드에서 Node.js 설치 간소화

생성 과정

docker 시작

$ docker-compose build
$ docker-compose up -d

laravel 설치

앱 컨테이너 실행에 들어갑니다.
※ laravel이 설치되기 전에는 용기가 작동하지 않으므로run 명령으로 실행해야 합니다.

$ docker-compose run app /bin/bash
$ composer create-project --prefer-dist laravel/laravel .

vue.js 설정 사용

laravel/ui에서 설치합니다. 기본적으로 laravel 6.0에서 설치하지 않기 때문입니다.

$ composer require laravel/ui --dev
$ php artisan ui vue
$ exit

여기서 docker 다시 시작

$ docker-compose up -d

액세스http://localhost:8000, 시작 화면 표시 시 OK

node_설치 모듈

$ docker-compose exec app yarn

HMR 설정

welcome.blade.php의 body 안에서 Vue.js 구성 요소 추가
구성 요소가 설치를 사용할 때 생성된 예
welcome.blade.php

<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>

webpack.mix.js에 HMR 설정 추가

8080에 접근하면 오류Cannot GET /가 발생하기 때문에 서버를 구축하는 8000개의 포트에 프록시할 것입니다
webpack.mix.js

mix.webpackConfig({
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        proxy: {
            '*': 'http://0.0.0.0:8000'
        },
        // Windows（Docker for windows）の場合は下記を追加する
        // watchOptions:{
        //     aggregateTimeout:200,
        //     poll:5000
        // },
    }
});

열 재부팅 수행

$ docker-compose exec app yarn hot

액세스 http://localhost:8080, 구성 요소의 내용을 표시하면 완성됩니다.
변경 사항이 적용될 수 있도록 구성 요소를 수정합니다.

참고 자료

Laravel5.8+vue.호스트 모듈 교체

끝날 때

열중량을 통해 전단 개발이 진전되다.
주의해야 할 것은 HMR 감시 파일은 자바스크립트와 CSS이기 때문에blade 자체를 업데이트하면 브라우저를 업데이트해야 한다는 것이다.