Dockerが苦手なLaravelエンジニアのためのVue.js開発環境 on Dockerことはじめ

はじめに

バックエンド開発をメインにされているLaravelエンジニアの皆さん、こんにちは！普段の業務でPHPとLaravelを使ってゴリゴリ開発されている中で、フロントエンドの技術、特にVue.jsやDockerといった言葉を耳にする機会も増えているのではないでしょうか。

はじめに
なぜ今DockerでVue.js開発環境を構築するのか？
この記事でできるようになること
前提知識の確認とゴール設定
Dockerの基本（イメージ、コンテナ、Docker Composeなど）をサクッと理解する
Laravel開発でDockerを使ったことはありますか？
Vue.js開発で目指すゴールとメリット
必要なツールのインストール（Docker Desktop, VS Codeなど）
プロジェクト作成前の準備（ディレクトリ構成の検討）
Docker Composeで環境を構築してみよう
docker-compose.ymlを書いてみよう
各種設定ファイルの解説
PHPのDockerfile (docker/php/Dockerfile)
必要に応じてLaravelの依存関係をインストールするためのコマンドを追加
Node.jsのDockerfile (docker/node/Dockerfile)
環境変数ファイル (.env.docker)
Vue CLIを使ってプロジェクトを生成する
Dockerコンテナ内でVue.jsの開発サーバーを起動する
開発を効率化するTIPS
ホットリロードの設定
よくあるトラブルシューティングと解決策
まとめ
DockerとVue.jsで開発環境を整えるメリット
今後のステップアップに向けて
安心安全のホワイト高還元SESに転職を考えている方へ

「Dockerってよく聞くけど、なんか難しそう…」「Vue.jsも興味はあるけど、どうやって開発環境を構築すればいいのか分からない…」そう感じている方も少なくないはずです。私も以前はそうでした。しかし、現代の開発において、これらはもはや避けては通れない技術になりつつあります。

この記事では、そんなDockerやモダンフロントエンドに苦手意識を持つLaravelエンジニアの皆さんに寄り添い、Vue.jsの開発環境をDockerで構築する第一歩をサポートします。

なぜ今DockerでVue.js開発環境を構築するのか？

その理由は大きく2つあります。

環境構築の再現性と手軽さ: 開発環境をDockerコンテナとして構築することで、「私の環境では動くのに、あなたの環境では動かない」といった“環境差異”の問題を解決できます。新しいメンバーがプロジェクトに参加した際も、Dockerコマンドをいくつか実行するだけで、すぐに開発に着手できるようになります。

フロントエンドとバックエンドの分離・連携: LaravelでAPIを構築し、Vue.jsでリッチなUIを構築する、といったAPIファーストな開発が主流になりつつあります。Dockerを使えば、これらの異なる技術スタックを独立したコンテナとして管理しつつ、シームレスに連携させることが可能です。

この記事でできるようになること

この記事を読み終える頃には、あなたは以下のことができるようになります。

Dockerの基本的な概念を理解し、なぜ開発に役立つのかを把握する。
Docker Composeを使って、LaravelとVue.jsが連携する開発環境を構築する。
Dockerコンテナ内でVue.jsプロジェクトを立ち上げ、開発サーバーを起動する。
開発効率を上げるための便利なTIPSを知る。

さあ、一緒にモダンな開発環境への扉を開きましょう！

前提知識の確認とゴール設定

本格的な構築に入る前に、いくつか確認しておきたいことと、この記事で目指すゴールについて明確にしておきましょう。

Dockerの基本（イメージ、コンテナ、Docker Composeなど）をサクッと理解する

Dockerに触れたことがない方でも大丈夫です！まずは最低限これだけは知っておいてほしい概念をサクッと説明します。

イメージ (Image): アプリケーションとその実行に必要なもの（コード、ランタイム、ライブラリ、設定ファイルなど）をすべてパッケージ化した、読み取り専用のテンプレートです。例えるなら、OSやアプリケーションがインストールされたPCの設計図のようなものです。
コンテナ (Container): イメージを基に実行される、独立した隔離された環境です。イメージが設計図なら、コンテナはその設計図から作られた実際に動作するPCそのものです。コンテナは非常に軽量で、素早く起動・停止できます。
Docker Daemon : Dockerのバックグラウンドプロセスで、イメージのビルド、コンテナの実行、管理など、Dockerの全ての操作を処理します。
Docker CLI : ユーザーがDocker Daemonとやり取りするためのコマンドラインインターフェースです（例: docker run, docker build）。
Docker Compose : 複数のコンテナを連携させてアプリケーションを構成・実行するためのツールです。例えば、Webサーバー、データベース、PHPアプリケーションなど、それぞれ異なるコンテナをまとめて管理・起動することができます。まるで複数のPCを一つの指示書でまとめて動かす司令塔のようなものです。

Laravel開発でDockerを使ったことはありますか？

もしLaravel Sailなど、Laravel公式が提供するDocker開発環境を使ったことがあるなら、この記事の内容もすんなり理解できるでしょう。基本的な考え方は同じです。もし全く経験がなくても、一つずつ丁寧に解説していきますのでご安心ください。

Vue.js開発で目指すゴールとメリット

今回目指すゴールは、Dockerコンテナ上でLaravelのバックエンドとVue.jsのフロントエンドがスムーズに連携し、開発効率の良い環境を構築することです。

この環境のメリットは以下の通りです。

開発環境の統一: チーム全員が同じ環境で開発でき、"環境依存"の問題を解消します。
依存関係の隔離: PHPのバージョンやNode.jsのバージョンなど、異なるプロジェクトで必要な依存関係が混在するのを防ぎます。
スピーディーなセットアップ: 新しいプロジェクトやメンバーが加わった際も、最小限の手間で開発を開始できます。
本番環境に近い構成: 本番環境もDockerで運用するケースが増えているため、開発環境をDockerにすることで、本番との乖離を最小限に抑えられます。
環境構築の準備
それでは、実際に手を動かす準備を始めましょう。

必要なツールのインストール（Docker Desktop, VS Codeなど）

まずは以下のツールをあなたのPCにインストールしてください。

Docker Desktop:
Dockerを利用するために必須のアプリケーションです。Windows、macOS、Linuxに対応しています。
Docker Desktop公式サイトからダウンロードしてインストールしてください。インストール後、Docker Desktopを起動し、正常に動作することを確認してください。
重要: インストール後、Docker Engineが起動していることを確認してください。
Visual Studio Code (VS Code):
非常に高機能で人気の高いコードエディタです。Docker開発との相性も抜群です。
VS Code公式サイトからダウンロードしてインストールしてください。
インストール後、以下の拡張機能を入れておくと便利です。
Docker: DockerfileやDocker Composeファイルの補完、コンテナの管理など。
Remote - Containers: コンテナ内で開発する際に非常に強力な機能を提供します。
Git:
バージョン管理システムです。コードを管理するために必須です。
まだインストールしていない場合は、Git公式サイトからインストールしてください。

プロジェクト作成前の準備（ディレクトリ構成の検討）

今回は、Laravelプロジェクトの中にVue.jsプロジェクトを組み込む形を想定して進めます。典型的なディレクトリ構成は以下のようになります。

your-project/
├── backend/                  # Laravelプロジェクトのルートディレクトリ
│   ├── app/
│   ├── bootstrap/
│   ├── config/
│   ├── ...
│   └── public/
│       └── index.php
├── frontend/                 # Vue.jsプロジェクトのルートディレクトリ
│   ├── public/
│   ├── src/
│   │   └── main.js
│   ├── package.json
│   └── ...
├── docker-compose.yml        # Docker Composeの設定ファイル
├── .env.docker               # Docker用の環境変数ファイル
└── README.md
your-project/
├── backend/                  # Laravelプロジェクトのルートディレクトリ
│   ├── app/
│   ├── bootstrap/
│   ├── config/
│   ├── ...
│   └── public/
│       └── index.php
├── frontend/                 # Vue.jsプロジェクトのルートディレクトリ
│   ├── public/
│   ├── src/
│   │   └── main.js
│   ├── package.json
│   └── ...
├── docker-compose.yml        # Docker Composeの設定ファイル
├── .env.docker               # Docker用の環境変数ファイル
└── README.md

この構成では、backendディレクトリがLaravel、frontendディレクトリがVue.jsのコードを格納します。docker-compose.ymlはプロジェクトのルート（your-project/）に配置します。

まずは、このyour-projectディレクトリを作成しましょう。

Bash

mkdir your-project
cd your-project
Bash

mkdir your-project
cd your-project

Docker Composeで環境を構築してみよう

いよいよDocker Composeを使って開発環境を構築していきます。今回は、Webサーバー（Nginx）、PHP実行環境（PHP-FPM）、データベース（MySQL）、そしてVue.jsの開発サーバーを動かすNode.js環境の4つのサービスを連携させます。

docker-compose.ymlを書いてみよう

プロジェクトルート（your-project/）にdocker-compose.ymlというファイルを作成し、以下の内容を記述してください。

YAML

# your-project/docker-compose.yml
version: '3.8'

services:
  # Nginxサービス：WebサーバーとしてLaravelとVue.jsのアクセスを捌く
  nginx:
    image: nginx:stable-alpine
    container_name: your_project_nginx
    ports:
      - "8080:80" # ホストの8080ポートをコンテナの80ポートにマッピング
    volumes:
      - ./backend:/var/www/html/backend # Laravelのコードをマウント
      - ./frontend:/var/www/html/frontend # Vue.jsのコードをマウント
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf # Nginx設定ファイル
    depends_on:
      - php
      - node # Vue.js開発サーバーにアクセスできるようにするため
    networks:
      - app-network

  # PHP-FPMサービス：Laravelアプリケーションを実行
  php:
    build:
      context: . # docker-compose.ymlがあるディレクトリをビルドコンテキストとする
      dockerfile: ./docker/php/Dockerfile # PHPのDockerfileを指定
    container_name: your_project_php
    volumes:
      - ./backend:/var/www/html/backend # Laravelのコードをマウント
    networks:
      - app-network

  # Node.jsサービス：Vue.js開発サーバーとnpmコマンドを実行
  node:
    build:
      context: .
      dockerfile: ./docker/node/Dockerfile
    container_name: your_project_node
    volumes:
      - ./frontend:/var/www/html/frontend # Vue.jsのコードをマウント
      - node_modules:/var/www/html/frontend/node_modules # node_modulesをボリュームとして分離（パフォーマンス向上）
    working_dir: /var/www/html/frontend # コンテナ起動時の作業ディレクトリ
    ports:
      - "3000:3000" # Vue.js開発サーバーのポート
    networks:
      - app-network
    tty: true # ターミナルをアタッチできるようにする (インタラクティブモード)

  # MySQLサービス (オプション): データベース
  db:
    image: mysql:8.0
    container_name: your_project_db
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - dbdata:/var/lib/mysql # データを永続化
    ports:
      - "3306:3306" # ホストの3306ポートをコンテナの3306ポートにマッピング
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  dbdata: # MySQLのデータ用ボリューム
  node_modules: # node_modules用ボリューム
YAML

# your-project/docker-compose.yml
version: '3.8'

services:
  # Nginxサービス：WebサーバーとしてLaravelとVue.jsのアクセスを捌く
  nginx:
    image: nginx:stable-alpine
    container_name: your_project_nginx
    ports:
      - "8080:80" # ホストの8080ポートをコンテナの80ポートにマッピング
    volumes:
      - ./backend:/var/www/html/backend # Laravelのコードをマウント
      - ./frontend:/var/www/html/frontend # Vue.jsのコードをマウント
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf # Nginx設定ファイル
    depends_on:
      - php
      - node # Vue.js開発サーバーにアクセスできるようにするため
    networks:
      - app-network

  # PHP-FPMサービス：Laravelアプリケーションを実行
  php:
    build:
      context: . # docker-compose.ymlがあるディレクトリをビルドコンテキストとする
      dockerfile: ./docker/php/Dockerfile # PHPのDockerfileを指定
    container_name: your_project_php
    volumes:
      - ./backend:/var/www/html/backend # Laravelのコードをマウント
    networks:
      - app-network

  # Node.jsサービス：Vue.js開発サーバーとnpmコマンドを実行
  node:
    build:
      context: .
      dockerfile: ./docker/node/Dockerfile
    container_name: your_project_node
    volumes:
      - ./frontend:/var/www/html/frontend # Vue.jsのコードをマウント
      - node_modules:/var/www/html/frontend/node_modules # node_modulesをボリュームとして分離（パフォーマンス向上）
    working_dir: /var/www/html/frontend # コンテナ起動時の作業ディレクトリ
    ports:
      - "3000:3000" # Vue.js開発サーバーのポート
    networks:
      - app-network
    tty: true # ターミナルをアタッチできるようにする (インタラクティブモード)

  # MySQLサービス (オプション): データベース
  db:
    image: mysql:8.0
    container_name: your_project_db
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - dbdata:/var/lib/mysql # データを永続化
    ports:
      - "3306:3306" # ホストの3306ポートをコンテナの3306ポートにマッピング
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  dbdata: # MySQLのデータ用ボリューム
  node_modules: # node_modules用ボリューム

各種設定ファイルの解説

上記のdocker-compose.ymlに加えて、各サービスで利用する設定ファイルや Dockerfile を作成していきます。

まず、your-project/dockerディレクトリを作成し、その中にnginx, php, nodeディレクトリを作成します。

Bash

mkdir -p docker/nginx docker/php docker/node
#Nginx設定ファイル (docker/nginx/default.conf)
Nginxは、Webサーバーとして外部からのリクエストを受け付け、それをLaravelのPHP-FPMサービスやVue.jsの開発サーバーに転送する役割を担います。

Nginx

# your-project/docker/nginx/default.conf
server {
    listen 80;
    server_name localhost;
    root /var/www/html/backend/public; # Laravelのpublicディレクトリを指定

    index index.php index.html index.htm;

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

    # LaravelのPHP-FPMにリクエストを転送
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php:9000; # phpサービス（コンテナ名）の9000ポート
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    # Vue.js開発サーバーへのプロキシ設定
    # /frontend 配下のアクセスをNode.jsコンテナのVue.js開発サーバーに転送
    location /frontend/ {
        proxy_pass http://node:3000/; # nodeサービス（コンテナ名）の3000ポート
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
Bash

mkdir -p docker/nginx docker/php docker/node
#Nginx設定ファイル (docker/nginx/default.conf)
Nginxは、Webサーバーとして外部からのリクエストを受け付け、それをLaravelのPHP-FPMサービスやVue.jsの開発サーバーに転送する役割を担います。

Nginx

# your-project/docker/nginx/default.conf
server {
    listen 80;
    server_name localhost;
    root /var/www/html/backend/public; # Laravelのpublicディレクトリを指定

    index index.php index.html index.htm;

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

    # LaravelのPHP-FPMにリクエストを転送
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php:9000; # phpサービス（コンテナ名）の9000ポート
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    # Vue.js開発サーバーへのプロキシ設定
    # /frontend 配下のアクセスをNode.jsコンテナのVue.js開発サーバーに転送
    location /frontend/ {
        proxy_pass http://node:3000/; # nodeサービス（コンテナ名）の3000ポート
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

この設定のポイントは、/へのアクセスはLaravel（PHP-FPM）に、/frontend/へのアクセスはVue.js開発サーバー（Node.jsコンテナの3000番ポート）に転送するようにしている点です。

PHPのDockerfile (docker/php/Dockerfile)

Laravelを動作させるためのPHP環境を定義します。

Dockerfile

# your-project/docker/php/Dockerfile
FROM php:8.3-fpm-alpine

# 必要なPHP拡張機能をインストール
RUN apk add --no-cache \
    nginx \
    mysql-client \
    curl \
    oniguruma-dev \
    libxml2-dev \
    zip \
    unzip \
    git \
    supervisor \
    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd opcache sockets \
    && docker-php-ext-enable opcache

# Composerをインストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html/backend # Laravelの作業ディレクトリ
Dockerfile

# your-project/docker/php/Dockerfile
FROM php:8.3-fpm-alpine

# 必要なPHP拡張機能をインストール
RUN apk add --no-cache \
    nginx \
    mysql-client \
    curl \
    oniguruma-dev \
    libxml2-dev \
    zip \
    unzip \
    git \
    supervisor \
    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd opcache sockets \
    && docker-php-ext-enable opcache

# Composerをインストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html/backend # Laravelの作業ディレクトリ

必要に応じてLaravelの依存関係をインストールするためのコマンドを追加

RUN composer install --no-dev --optimize-autoloader --no-scripts

Node.jsのDockerfile (docker/node/Dockerfile)

Vue.jsの開発サーバーやnpmコマンドを実行するためのNode.js環境を定義します。

Dockerfile

# your-project/docker/node/Dockerfile
FROM node:20-alpine

# 必要なパッケージをインストール
RUN apk add --no-cache \
    git \
    build-base \
    python3

WORKDIR /var/www/html/frontend # Vue.jsの作業ディレクトリ
Dockerfile

# your-project/docker/node/Dockerfile
FROM node:20-alpine

# 必要なパッケージをインストール
RUN apk add --no-cache \
    git \
    build-base \
    python3

WORKDIR /var/www/html/frontend # Vue.jsの作業ディレクトリ

環境変数ファイル (.env.docker)

データベースの接続情報などを定義します。プロジェクトルート（your-project/）に.env.dockerというファイルを作成してください。

Ini, TOML

# your-project/.env.docker
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_vue_db
DB_USERNAME=laravel_vue_user
DB_PASSWORD=secret
DB_HOST=dbとしているのは、docker-compose.ymlで定義したデータベースサービスのコンテナ名がdbだからです。Docker Composeの内部ネットワークでは、サービス名がホスト名として解決されます。
Ini, TOML

# your-project/.env.docker
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_vue_db
DB_USERNAME=laravel_vue_user
DB_PASSWORD=secret
DB_HOST=dbとしているのは、docker-compose.ymlで定義したデータベースサービスのコンテナ名がdbだからです。Docker Composeの内部ネットワークでは、サービス名がホスト名として解決されます。

Vue.jsプロジェクトを立ち上げる
ここまででDocker環境の骨格ができました。次に、LaravelとVue.jsのそれぞれのプロジェクトを準備します。

Laravelプロジェクトの作成
まずはLaravelプロジェクトを作成します。コンテナ内でComposerを使って作成するのがベストプラクティスです。

your-projectディレクトリで以下のコマンドを実行します。

Bash

 docker compose run --rm php composer create-project laravel/laravel . --prefer-dist
Bash

 docker compose run --rm php composer create-project laravel/laravel . --prefer-dist

このコマンドは、phpサービス（PHPコンテナ）の中でcomposer create-projectを実行し、現在のディレクトリ（backendにマウントされている）にLaravelプロジェクトを作成します。--rmオプションは、コマンド実行後にコンテナを自動的に削除することを意味します。

プロジェクト作成後、backend/.envファイルを更新し、.env.dockerに合わせたデータベース設定を記述してください。

Ini, TOML

# backend/.env (一部抜粋)
DB_CONNECTION=mysql
DB_HOST=db       # Docker Composeのサービス名
DB_PORT=3306
DB_DATABASE=laravel_vue_db
DB_USERNAME=laravel_vue_user
DB_PASSWORD=secret
Ini, TOML

# backend/.env (一部抜粋)
DB_CONNECTION=mysql
DB_HOST=db       # Docker Composeのサービス名
DB_PORT=3306
DB_DATABASE=laravel_vue_db
DB_USERNAME=laravel_vue_user
DB_PASSWORD=secret

Vue CLIを使ってプロジェクトを生成する

次に、Vue.jsプロジェクトをfrontendディレクトリに作成します。これもNode.jsコンテナの中で行います。

まず、your-project/frontendディレクトリが空であることを確認してください。

Bash

# your-project ディレクトリで実行
docker compose run --rm node vue create .
vue create .は、現在のディレクトリ（frontendにマウントされている）にVue.jsプロジェクトを生成します。
Bash

# your-project ディレクトリで実行
docker compose run --rm node vue create .
vue create .は、現在のディレクトリ（frontendにマウントされている）にVue.jsプロジェクトを生成します。

途中でいくつか質問されますが、今回は以下の設定で進めましょう。

Default ([Vue 3] Babel, ESLint) を選択。

これでyour-project/frontendディレクトリ以下にVue.jsプロジェクトのファイル群が生成されます。

Dockerコンテナ内でVue.jsの開発サーバーを起動する

これで全ての準備が整いました！いよいよ全てのコンテナを起動し、開発サーバーを立ち上げましょう。

your-projectディレクトリで以下のコマンドを実行します。

Bash

docker compose up -d
このコマンドは、docker-compose.ymlに定義された全てのサービスをバックグラウンドで起動します。

コンテナが起動したら、LaravelのマイグレーションとVue.jsの依存関係をインストールします。

Bash

# Laravelのマイグレーション実行 (phpコンテナ内で実行)
docker compose exec php php artisan migrate

# Vue.jsの依存関係インストール (nodeコンテナ内で実行)
docker compose exec node npm install

# Vue.jsの開発サーバー起動 (nodeコンテナ内で実行)
docker compose exec node npm run serve
Bash

docker compose up -d
このコマンドは、docker-compose.ymlに定義された全てのサービスをバックグラウンドで起動します。

コンテナが起動したら、LaravelのマイグレーションとVue.jsの依存関係をインストールします。

Bash

# Laravelのマイグレーション実行 (phpコンテナ内で実行)
docker compose exec php php artisan migrate

# Vue.jsの依存関係インストール (nodeコンテナ内で実行)
docker compose exec node npm install

# Vue.jsの開発サーバー起動 (nodeコンテナ内で実行)
docker compose exec node npm run serve

npm run serveを実行すると、Vue.jsの開発サーバーが起動し、通常は
http://localhost:3000
でアクセス可能になります。しかし、今回はNginxを経由してアクセスするので、
http://localhost:8080/frontend/
にアクセスしてみましょう。

ブラウザで
http://localhost:8080/
にアクセスすると、Laravelのデフォルトページが表示されるはずです。
そして、
http://localhost:8080/frontend/
にアクセスすると、Vue.jsのウェルカムページが表示されるはずです！

おめでとうございます！これでDockerを使ったLaravel & Vue.jsの開発環境が構築できました。

開発を効率化するTIPS

せっかくDockerで開発環境を構築したので、さらに効率的に開発を進めるためのTIPSをいくつかご紹介します。

ホットリロードの設定

Vue.jsの開発サーバーはデフォルトでホットリロード（コードを変更すると自動的にブラウザが更新される機能）が有効になっています。しかし、Dockerコンテナ内で動かす場合、ファイルシステムの監視がうまく機能しないことがあります。

今回の設定では、nodeサービスのvolumesに./frontend:/var/www/html/frontendと設定しているため、ホストOSのファイル変更がコンテナ内に即座に反映され、ホットリロードが機能するはずです。もし動かない場合は、Vue CLIのvue.config.jsに以下の設定を追加してみてください。

JavaScript

// frontend/vue.config.js
module.exports = {
  devServer: {
    watchFiles: {
      paths: ['src/**/*', 'public/**/*'],
      options: {
        usePolling: true, // ファイル監視にポーリングを使用する
      },
    },
  },
};
JavaScript

// frontend/vue.config.js
module.exports = {
  devServer: {
    watchFiles: {
      paths: ['src/**/*', 'public/**/*'],
      options: {
        usePolling: true, // ファイル監視にポーリングを使用する
      },
    },
  },
};

この設定は、ファイルシステムの変更をポーリング（定期的に確認）することで、ホットリロードを強制的に有効にします。パフォーマンスに影響を与える場合があるので、最終手段として利用しましょう。

VS CodeのRemote Development機能で開発を快適に
VS Codeの「Remote - Containers」拡張機能を使うと、まるでローカルで開発しているかのように、Dockerコンテナ内を開発環境として利用できます。これは非常に強力な機能です。

VS Codeを開き、左側のアクティビティバーにあるリモートエクスプローラーのアイコンをクリックします。

「Containers」セクションで、稼働中のyour_project_phpまたはyour_project_nodeコンテナを探します。

コンテナ名の横にある「Attach to Container」アイコン（四角に矢印が伸びているようなアイコン）をクリックします。

これにより、新しいVS Codeウィンドウが開き、その中のターミナルはコンテナ内部のシェルに接続されます。LaravelのArtisanコマンドやnpmコマンドなどを、コンテナ内で直接実行できるようになり、非常に開発体験が向上します。

よくあるトラブルシューティングと解決策

コンテナが起動しない、または途中で落ちる:

docker compose logs [サービス名]でログを確認してください。エラーメッセージから原因が特定できることが多いです。

ポートの競合がないか確認してください（例: ホストの8080ポートが別のアプリケーションで使われていないか）。

docker system prune -aで不要なイメージやコンテナ、ボリュームを削除してから再度試してください（ただし、実行には注意が必要です）。

ファイル変更が反映されない:

docker-compose.ymlのvolumes設定が正しいか確認してください。
ホットリロードがうまく機能しない場合は、前述のvue.config.jsの設定を試してください。

データベースに接続できない:

.env.dockerやbackend/.envのデータベース接続情報が正しいか確認してください。特にDB_HOSTがdbになっているか注意。
MySQLコンテナが正しく起動しているかdocker compose psで確認してください。

npm installやcomposer installが遅い:

ネットワーク環境が原因の場合があります。
Dockerのキャッシュが効いていない可能性もあります。

開発環境の共有とバージョン管理

Docker Composeを使う最大のメリットの一つは、開発環境の共有が非常に簡単になる点です。

docker-compose.ymlと各Dockerfile、Nginx設定ファイルなど、Docker関連のファイルをGitで管理します。
新しい開発メンバーが参加した際は、リポジトリをクローンし、docker compose up -dを実行するだけで、すぐに開発環境を構築できます。
これにより、チーム全体の開発効率が飛躍的に向上します。

まとめ

この記事では、Dockerが苦手なLaravelエンジニアの皆さん向けに、Dockerを使ったVue.js開発環境の構築方法を解説しました。

DockerとVue.jsで開発環境を整えるメリット

環境構築の標準化と再現性: 開発環境の「動かない」問題を劇的に減らせます。
技術スタックの分離と連携: LaravelとVue.jsを独立させつつ、柔軟に連携させられます。
開発効率の向上: スピーディーな環境立ち上げ、ホットリロード、VS CodeのRemote Development機能などで開発が快適になります。
もちろん、Dockerは奥が深く、これだけで全てを網羅できるわけではありません。しかし、この記事を通して、皆さんがDockerとVue.jsに苦手意識を持つことなく、新しい技術にチャレンジするきっかけになれば幸いです。

今後のステップアップに向けて

本番環境へのデプロイ: Docker SwarmやKubernetesを使ったコンテナオーケストレーションについて学ぶ。
CI/CDの導入: GitHub ActionsやGitLab CI/CDと連携させて、自動テストやデプロイを構築する。
Inertia.jsの導入: LaravelとVue.jsの連携をよりスムーズにするInertia.jsを試す。
TypeScriptの導入: Vue.js開発で型安全性を高めるTypeScriptを学ぶ。
これらの技術は、あなたのエンジニアとしての市場価値を間違いなく高めてくれるでしょう。
この記事が、あなたのモダンな開発環境構築の一助となれば幸いです。

安心安全のホワイト高還元SESに転職を考えている方へ

新しい挑戦に踏み出すことは、人生において重要な一歩です。転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つになるかと思います。どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！グラディートと一緒に誇れるエンジニアを目指しましょう！

■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）

株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/

株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/

株式会社グラディート's job postings

Dockerが苦手なLaravelエンジニアのためのVue.js開発環境 on Dockerことはじめ

gradito広報ににみ

株式会社グラディート / Marketer

開発エンジニアココロオドル瞬間技術ブログ環境構築

2 Likes

株式会社グラディート

Dockerが苦手なLaravelエンジニアのためのVue.js開発環境 on Dockerことはじめ

はじめに

目次

なぜ今DockerでVue.js開発環境を構築するのか？

この記事でできるようになること

前提知識の確認とゴール設定

Dockerの基本（イメージ、コンテナ、Docker Composeなど）をサクッと理解する

Laravel開発でDockerを使ったことはありますか？

Vue.js開発で目指すゴールとメリット

必要なツールのインストール（Docker Desktop, VS Codeなど）

プロジェクト作成前の準備（ディレクトリ構成の検討）

Docker Composeで環境を構築してみよう

docker-compose.ymlを書いてみよう

各種設定ファイルの解説

PHPのDockerfile (docker/php/Dockerfile)

必要に応じてLaravelの依存関係をインストールするためのコマンドを追加

Node.jsのDockerfile (docker/node/Dockerfile)

環境変数ファイル (.env.docker)

Vue CLIを使ってプロジェクトを生成する

Dockerコンテナ内でVue.jsの開発サーバーを起動する

開発を効率化するTIPS

ホットリロードの設定

よくあるトラブルシューティングと解決策

まとめ

DockerとVue.jsで開発環境を整えるメリット

今後のステップアップに向けて

安心安全のホワイト高還元SESに転職を考えている方へ

株式会社グラディート

ココロオドル瞬間

Weekly ranking