最近のSES案件では、Javaエンジニアでもフロントの対応を求められるケースが増えています。特に、Vue.jsをDockerで動かすケースは、モダンな開発環境ではよくあるパターンです。
本記事では、Vue.jsのプロジェクトをDockerコンテナ上で立ち上げる手順をまとめました。
SESエンジニアとして現場ですぐ対応できるように、最短ルートで構築する方法を紹介します。
必要環境と導入手順
■ Dockerの導入
-
公式サイトからインストーラーをダウンロード
https://www.docker.com/products/docker-desktop -
OSに合わせてインストール（WindowsならWSL2推奨）
-
Docker Desktopを起動して、以下コマンドで確認
docker version■ Node.jsの導入
-
公式サイトからLTS版をダウンロード
👉 https://nodejs.org/ja -
インストール後、バージョン確認
node -v
npm -v2. Vueプロジェクト作成
まず、プロジェクトを作成するルートフォルダで以下を実行します。
npm create vue@latest主な選択肢
-
Add TypeScript? → No（必要に応じてYes）
-
Add Pinia? → Yes（状態管理あり）
-
Add E2E Testing? → No
3. Dockerfile作成（コマンド実行場所：作成したVueプロジェクトの直下）
作成したプロジェクトフォルダに移動してからDockerfileを作成します。
cd プロジェクト名Dockerfile（プロジェクト直下に作成）
# ベースイメージ
FROM node:18
# 作業ディレクトリ
WORKDIR /app
# 必要ファイルコピー
COPY package*.json ./
RUN npm install
# 全ファイルコピー
COPY . .
# 開発サーバ起動
CMD ["npm", "run", "dev"]4. docker-compose.yml作成
同じくプロジェクト直下にdocker-compose.ymlを作成します。
version: '3'
services:
vueapp:
build: .
ports:
- "5173:5173"
volumes:
- .:/app
- /app/node_modules
stdin_open: true
tty: true5. 必要パッケージのインストール（コマンド実行場所：プロジェクト直下）
作成後のプロジェクト直下で、まずはパッケージをインストール。
npm install6. Dockerコンテナ起動（コマンド実行場所：プロジェクト直下）
続いて、Dockerで起動。
docker-compose up --build7. 完成後のフォルダ構成
プロジェクト完成後は、以下のような構成になります。
プロジェクト名/
├── src/ # ソースコード
│ ├── assets/ # 画像やCSSなど
│ ├── components/ # コンポーネント
│ ├── App.vue # ルートコンポーネント
│ └── main.js # エントリーポイント
├── public/ # 公開用ファイル
├── node_modules/ # 依存パッケージ
├── Dockerfile # Docker設定
├── docker-compose.yml # Docker Compose設定
├── package.json # npm設定
└── README.md # 説明書まとめと次へのステップ
今回は、Vue.jsプロジェクトをDockerで構築し、コンテナ上で動かす手順を解説しました。
SES現場では、「Docker環境でフロント対応もお願いします」と言われることも多くなっています。
この基本構築パターンを押さえておけば、どの現場でも柔軟に対応できるので、ぜひマスターしておきましょう。
