💡

Docker+Laravel6環境でwebpack.mix.jsをビルドする方法

に公開
Docker
webpack
Node.js
mix
Laravel 6
tech

まえがき

DockerでLaravel6環境を構築しているとき、sassやvue.jsのビルド環境はどうやっているでしょうか？
大抵ホスト端末にnodeを入れて行っていると思いますが、Docker環境であればnodeもコンテナに入れた方がいい場合があります。

というのも、node.jsというのは古すぎても新しすぎてもバグで動かなくなるため、プロジェクトで決めたバージョンを使うのがいいのですが、ホスト端末に用意すると複数のプロジェクトを同時進行するのが困難になるためです。
それを切り替えたりフォルダごとに環境を分けるnodeバージョン管理ツールもありますが、それもチームで開発する場合は手順書で別途バージョン情報を共有し、参加メンバーに合わせてもらう必要があります。

その点、Dockerコンテナにしてしまえば、コンテナ情報をdocker-composeなどのソースコードとしてgit管理できるため、後から参加する人は設定を気にする必要がなくなります。

そのやり方を解説します。

前提確認

Laravel 6系のフロントエンドビルドは Laravel Mix（内部的にはWebpack）で行います。
つまり PHPではなく Node.js 環境でビルドします。

Dockerの「PHPコンテナ」だけにはNode.jsやnpmは入っていないのが普通ですので、以下のいずれかの方法でビルドします。

（おさらい）Dockerを使わない方法

ホスト(windowsやmacなど）でビルドする、もっとも簡単な方法です。
大体ネットで調べたらこんな感じで出てきます。
Laravel Mix は PHP ではなく Node.js/npm で動きますので、ホストPCにNode.jsが入っていれば以下の手順でOKです。

手順

bash
# Laravel プロジェクトディレクトリに移動
cd /path/to/your-laravel-project

# 依存パッケージをインストール（初回だけ）
npm install

# 開発用ビルド
npm run dev

これで public/js や public/css 以下にビルドされます。

DockerにNode.jsコンテナを用意する方法

もし「開発環境はすべてコンテナで完結させたい」場合は、DockerでNode.jsコンテナを追加します。

Docker Compose にnodeサービスを追加します。

docker-compose.yaml
version: '3'

services:
  app:
    image: php:7.4-fpm
    # Laravel本体
    # ...

  node:
    image: node:14
    working_dir: /var/www/html
    volumes:
      - ./:/var/www/html 
    command: tail -f /dev/null

このようにしておいて、以下のようにNode.jsコンテナに入ります：

bash
docker compose exec node bash

nodeコンテナの中で以下を実行します：

bash
cd {package.jsonがあるフォルダ}
npm install
npm run dev

上記のコマンド列で、cdしていますがこれは、npm installでpackage.jsonが見つからないというエラーが出た場合は、docker-compose.yamlとlaravelフォルダの場所が別の階層になっている場合があるので、コンテナの中で移動するということです。

以上でコンテナ環境でビルドできました。
お疲れさまでした。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp

Discussion