LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@t_sato_graditoin株式会社グラディート

ワンコマンドで開発開始！SPA環境構築をシェルで完全自動化する

Last updated at Posted at 2025-08-06

Qiita技術ブログ (3).png

はじめに

Docker、Laravel、Vue.jsを使ったSPA開発の魅力

Dockerによる環境の再現性、Laravelの堅牢なバックエンド機能、そしてVue.jsによるモダンなフロントエンド開発。この3つの技術を組み合わせることで、効率的かつ高品質なSPA開発が可能になります。しかし、それぞれの環境を個別に構築し、連携させるには一定の手間がかかります。

なぜ環境構築を自動化する必要があるのか？

環境構築は、開発の初期段階で必ず行う必要がありますが、手作業で行う場合、時間と労力がかかり、人的ミスも発生しやすくなります。自動化によってこれらの課題を解決し、以下のメリットを享受できます。

  • 時間短縮: 数時間かかる作業を数分で完了できます。
  • 一貫性: チームメンバー全員が同じ環境で開発できます。
  • 生産性向上: 開発者は本来の業務であるコーディングに集中できます。
  • リスク軽減: 設定ミスによる不具合を減らすことができます。

本記事で目指す「ワンコマンド」環境構築の完成形

本記事では、シェルスクリプトを実行するだけで、以下の要素が自動的に構築される環境を目指します。

  • Dockerコンテナ（PHP、Nginx、MySQL、Node.js）の起動
  • Laravelプロジェクトの新規作成と基本設定
  • Vue.jsプロジェクトの新規作成と基本設定
  • 必要なComposerパッケージとnpmパッケージのインストール
  • 環境変数の設定
  • 開発サーバーの起動

これにより、開発者はコマンド一つを実行するだけで、すぐにコーディングを開始できる状態になります。

構成の概要とディレクトリ構造

開発環境の全体像：コンテナとコンポーネントの関係
本稿で構築する開発環境は、主に以下のDockerコンテナで構成されます。

  • PHP/Nginxコンテナ: Laravelアプリケーションを実行し、外部からのHTTPリクエストを受け付けます。Laravel * Sailをベースに構築します。
  • MySQLコンテナ: Laravelアプリケーションが利用するデータベースです。
  • Node.jsコンテナ: Vue.jsのフロントエンド開発に必要な環境を提供します。webpackなどのビルドツールもこのコンテナ内で実行します。
  • これらのコンテナはDocker Composeによって連携し、一つの開発環境として機能します。

必要なツールと技術スタックの整理

環境構築に必要な主なツールと技術スタックは以下の通りです。

  • Docker: コンテナ化プラットフォーム
  • Docker Compose: 複数のDockerコンテナを定義し、管理するツール
  • シェルスクリプト: 複数のコマンドをまとめて実行するスクリプト言語（Bashを想定）
  • Laravel: PHPフレームワーク
  • Composer: PHPの依存性管理ツール
  • Vue.js: JavaScriptフレームワーク
  • npm: Node.jsのパッケージ管理ツール

これらのツールがローカルマシンにインストールされていることを前提とします。

プロジェクトのディレクトリ構造を設計する
自動構築されるプロジェクトの基本的なディレクトリ構造は以下のようになります。

/my-project
├── api (Laravelプロジェクト)
├── frontend (Vue.jsプロジェクト)
└── docker-compose.yml
└── init.sh (自動構築シェルスクリプト)

apiディレクトリにはLaravelのプロジェクト、frontendディレクトリにはVue.jsのプロジェクトがそれぞれ作成されます。docker-compose.ymlと自動構築用のシェルスクリプトinit.shはプロジェクトのルートに配置します。

docker-compose.ymlでコンテナ環境を定義する

プロジェクトルートに作成するdocker-compose.ymlの基本的な記述例です。

YAML

version: '3.7'
services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    image: my-laravel-app
    ports:
      - "8000:80"
    environment:
      APP_NAME: Laravel
      APP_ENV: local
      APP_KEY: your-secret-key # 後で自動生成
      DB_CONNECTION: mysql
      DB_HOST: mysql
      DB_PORT: 3306
      DB_DATABASE: laravel
      DB_USERNAME: sail
      DB_PASSWORD: password
    volumes:
      - ./api:/var/www/html
    networks:
      - app-network
    depends_on:
      - mysql

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    image: my-vue-app
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
    working_dir: /app
    command: npm run serve
    networks:
      - app-network

  mysql:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel
      MYSQL_USER: sail
      MYSQL_PASSWORD: password
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  mysql_data:
    driver: local

各サービスについて解説します。

  • api: Laravelアプリケーションのコンテナ定義です。./api/Dockerfileを元にビルドされ、ポート8000をホストマシンの80番ポートにマッピングします。volumesで./apiディレクトリをコンテナ内の/var/www/htmlにマウントし、コードの変更が即座に反映されるようにします。depends_onでmysqlコンテナが起動後に起動するように設定します。
  • frontend: Vue.jsアプリケーションのコンテナ定義です。./frontend/Dockerfileを元にビルドされ、ポート3000をホストマシンの3000番ポートにマッピングします。volumesで./frontendディレクトリをコンテナ内の/appにマウントします。working_dirで作業ディレクトリを指定し、commandで開発サーバーを起動します。
  • mysql: MySQLデータベースのコンテナ定義です。mysql:8.0イメージを使用し、必要な環境変数を設定します。volumesでmysql_dataという名前付きボリュームを作成し、データベースのデータを永続化します。
  • networks: app-networkというブリッジネットワークを作成し、各コンテナがこのネットワークを通じて通信できるようにします。
  • volumes: mysql_dataという名前付きボリュームを定義します。

./api/Dockerfileの内容例：

Dockerfile

FROM php:8.2-fpm-alpine

RUN apk add --no-cache --update linux-headers
RUN docker-php-ext-install pdo pdo_mysql

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

WORKDIR /var/www/html

COPY . /var/www/html

RUN chown -R www-data:www-data /var/www/html
./frontend/Dockerfileの内容例：

Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY . /app/

シェルスクリプトの作成

プロジェクトルートにinit.shという名前でシェルスクリプトを作成し、実行権限を付与します (chmod +x init.sh).

Bash

#!/bin/bash

# プロジェクト名を設定
PROJECT_NAME="my-project"

# APIとFrontendのディレクトリが存在しない場合は作成
if [ ! -d "$PROJECT_NAME/api" ]; then
  mkdir -p "$PROJECT_NAME/api"
fi
if [ ! -d "$PROJECT_NAME/frontend" ]; then
  mkdir -p "$PROJECT_NAME/frontend"
fi

# docker-compose.ymlが存在しない場合は作成
if [ ! -f "$PROJECT_NAME/docker-compose.yml" ]; then
  cat <<EOT > "$PROJECT_NAME/docker-compose.yml"
version: '3.7'
services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    image: my-laravel-app
    ports:
      - "8000:80"
    environment:
      APP_NAME: Laravel
      APP_ENV: local
      APP_KEY: your-secret-key
      DB_CONNECTION: mysql
      DB_HOST: mysql
      DB_PORT: 3306
      DB_DATABASE: laravel
      DB_USERNAME: sail
      DB_PASSWORD: password
    volumes:
      - ./api:/var/www/html
    networks:
      - app-network
    depends_on:
      - mysql

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    image: my-vue-app
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
    working_dir: /app
    command: npm run serve
    networks:
      - app-network

  mysql:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel
      MYSQL_USER: sail
      MYSQL_PASSWORD: password
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  mysql_data:
    driver: local
EOT
fi

APIのDockerfileが存在しない場合は作成

if [ ! -f "$PROJECT_NAME/api/Dockerfile" ]; then
  cat <<EOT > "$PROJECT_NAME/api/Dockerfile"
FROM php:8.2-fpm-alpine

RUN apk add --no-cache --update linux-headers
RUN docker-php-ext-install pdo pdo_mysql

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

WORKDIR /var/www/html

COPY . /var/www/html

RUN chown -R www-data:www-data /var/www/html
EOT
fi

# FrontendのDockerfileが存在しない場合は作成
if [ ! -f "$PROJECT_NAME/frontend/Dockerfile" ]; then
  cat <<EOT > "$PROJECT_NAME/frontend/Dockerfile"
FROM node:18-alpine

WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY . /app/
EOT
fi

cd "$PROJECT_NAME"

Laravelプロジェクトの作成 (既に存在しない場合)

if [ ! -d "api/vendor" ]; then
  docker-compose run --rm api composer create-project laravel/laravel . --prefer-dist
  docker-compose run --rm api php artisan key:generate
  API_KEY=$(docker-compose run --rm api php artisan --no-interaction key:show)
  sed -i "s/APP_KEY=your-secret-key/APP_KEY=$API_KEY/" api/.env
fi

Vue.jsプロジェクトの作成 (既に存在しない場合)

if [ ! -d "frontend/node_modules" ]; then
  docker-compose run --rm frontend npm install -g @vue/cli
  docker-compose run --rm frontend vue create . --default
fi

.envファイルの連携設定 (例: APIのURLをVue.jsに設定)

API_URL="http://localhost:8000"
if grep -q "VUE_APP_API_URL=" frontend/.env; then
  sed -i "s/VUE_APP_API_URL=.*/VUE_APP_API_URL=$API_URL/" frontend/.env
else
  echo "VUE_APP_API_URL=$API_URL" >> frontend/.env
fi

Dockerコンテナを起動

docker-compose up -d

echo "開発環境の構築が完了しました！"
echo "Laravel API: http://localhost:8000"
echo "Vue.js Frontend: http://localhost:3000"

このスクリプトは以下の処理を自動で行います。

  • プロジェクトのルートディレクトリを作成します。
  • 必要なdocker-compose.ymlとDockerfileが存在しない場合は作成します。
  • docker-compose up -dを実行してDockerコンテナを起動します。
  • Laravelプロジェクトが存在しない場合は、コンテナ内でcomposer create-projectを実行し、php artisan key:generateでAPP_KEYを生成し、.envファイルに設定します。
  • Vue.jsプロジェクトが存在しない場合は、コンテナ内でvue createを実行します。
  • .envファイルに必要な環境変数を設定します（例：APIのURLをVue.jsに設定）。
  • 完了メッセージとアクセスURLを表示します。

実行と動作確認

作成したシェルスクリプトを実行する
ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

Bash

./init.sh

スクリプトが実行されると、Dockerイメージのダウンロード、コンテナの作成と起動、LaravelとVue.jsのプロジェクト作成、依存関係のインストールなどが自動的に行われます。完了までしばらく時間がかかる場合があります。

LaravelのAPIが正しく動作することを確認する
ブラウザで http://localhost:8000 にアクセスし、Laravelのデフォルトウェルカムページが表示されるか確認します。また、APIのエンドポイントを作成している場合は、それらにアクセスして正常にレスポンスが返ってくるか確認します。

Vue.jsのフロントエンドが正しく動作することを確認する
ブラウザで http://localhost:3000 にアクセスし、Vue.jsのデフォルトページが表示されるか確認します。フロントエンドからAPIにリクエストを送る処理を実装している場合は、それらが正常に動作することを確認します。

開発を始めるための準備
環境構築が完了したら、以下のコマンドで各コンテナに入り、開発作業を開始できます。

  • Laravelコンテナに入る: docker-compose exec api bash
  • Vue.jsコンテナに入る: docker-compose exec frontend bash

それぞれのコンテナ内で、通常のLaravelやVue.jsの開発ワークフローに従って作業を進めることができます。

まとめと応用

シェルスクリプト自動化のメリットとデメリット

メリット:

大幅な時間短縮: 環境構築にかかる時間を劇的に削減できます。
環境の一貫性: チーム全体で同じ開発環境を簡単に構築できます。
導入の容易さ: 新しいメンバーがプロジェクトにスムーズに参加できます。
人的ミスの削減: 手作業による設定ミスを防ぎます。

デメリット:

  • 初期設定の複雑さ: 自動化スクリプトの作成にはある程度の知識が必要です。
  • 柔軟性の低下: 特定のカスタマイズが必要な場合に、スクリプトの修正が必要になることがあります。
  • 依存関係: DockerとDocker Composeが事前にインストールされている必要があります。

さらなる自動化（Git初期設定、テスト環境の構築など）
本稿で紹介したシェルスクリプトをさらに拡張することで、以下のような自動化も可能です。

  • Gitリポジトリの初期化とリモートリポジトリの設定: プロジェクト作成後に自動でGitリポジトリを初期化し、リモートリポジトリを設定する。
  • テスト環境の構築: PHPUnitやJestなどのテストフレームワークの設定や初期テストコードの作成を自動化する。
  • データベースのマイグレーションとシーディング: Laravelのマイグレーションとシーディングを自動で実行する。
  • 静的解析ツールの導入: ESLintやPHPStanなどの静的解析ツールの設定と実行を自動化する。

本番環境へのデプロイを見据えた構成のヒント
今回構築した開発環境は、あくまで開発用です。本番環境へのデプロイを考慮する際には、以下のような点に注意すると良いでしょう。

  • 環境変数の分離: 開発環境と本番環境で異なる環境変数を管理する方法を検討する。
  • セキュリティ対策: 本番環境では、より厳格なセキュリティ設定が必要になります。
  • 永続化ストレージ: 本番環境では、信頼性の高い永続化ストレージの利用を検討する。
  • CI/CDパイプラインの構築: 自動ビルド、テスト、デプロイのパイプラインを構築し、デプロイ作業を自動化する。

本記事では、Docker、Laravel、Vue.jsを使ったSPA開発環境の構築をシェルスクリプトで完全自動化する方法について解説しました。この自動化スクリプトを活用することで、開発者は環境構築の手間から解放され、よりクリエイティブな作業に集中できるようになります。ぜひ、あなたの開発ワークフローに取り入れてみてください。

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

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

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

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?