Docker Composeを用いた、ローカル環境下でのVite+Vue.js 3環境構築手順を紹介します。
ファイル構成
コマンド実行前の構成は以下の通りです。
├ app/
│ └ Dockerfile
└ compose.yml
ファイル作成
Dockerfile
FROM node:lts
WORKDIR /usr/src/appnode.jsイメージのバージョンはお好みのもので構いません。
（node.jsイメージのDocker Hubはこちら）
compose.yml
services:
frontend:
build: ./app
command: npm run dev
ports:
- '5173:5173'
volumes:
- ./app:/usr/src/app対象ディレクトリを./appから変更する場合は、続くコマンド実行手順を適宜読み替えてください。
コマンド実行手順
Viteを使用したプロジェクトの作成手順は、Vue RouterやPiniaといったパッケージを同時にインストールするか否かで異なってきます。
パッケージのインストールが不要な方は、「デフォルトインストールの場合」を、必要な方は「カスタムインストールの場合」をご参照ください。
なお、後に続く「コンテナ起動まで」は共通の手順となります。
Vite実行：デフォルトインストールの場合
projectディレクトリ内から、次のコマンドでViteプロジェクト生成を開始します。
docker-compose run --rm frontend npm create vite@latest .最初に、create-viteのインストール確認が出るので、yと入力し進めます。
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y) y既存ファイルをどうするか尋ねられるので、Ignore files and continueを選択します。
? Current directory is not empty. Please choose how to proceed: › - Use arrow-keys. Return to submit.
Remove existing files and continue
Cancel operation
❯ Ignore files and continueフレームワークはVueを選択します。
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Solid
Qwik
OthersScript部分で使用する言語として、TypeScript、JavaScriptのお好きなほうを選択します。
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
Customize with create-vue ↗
Nuxt ↗選択が完了し、appディレクトリ内にファイル群が作成されていることを確認します。
ページをスクロールし、手順「コンテナ起動まで」へ進んでください。
Vite実行：カスタムインストールの場合
ファイルを一通り作成したら、ターミナルから以下のコマンドを実行します。
docker-compose build次に、Dockerfileをappディレクトリの外へ一時的に退避させてください。
Viteプロジェクト生成の際、対象ディレクトリを空にする必要があるためです。
移動させたら、次のコマンドでViteプロジェクト生成を開始します。
docker-compose run --rm frontend npm create vite@latest .最初に、create-viteのインストール確認が出るので、yと入力し進めます。
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y) yフレームワークはVueを選択します。
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
❯ Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others次に、Customize with create-vueを選択して進みます。
? Select a variant: › - Use arrow-keys. Return to submit.
TypeScript
JavaScript
❯ Customize with create-vue ↗
Nuxt ↗create-vueのインストール確認が出るので、yと入力し進めます。
Need to install the following packages:
create-vue@3.9.1
Ok to proceed? (y) y続く各設定項目は以下を参考に選択してください。
Project name: …
→ プロジェクト名
✔ Add TypeScript? … No / Yes
→ TypeScriptで書くならYes, JavaScriptで書くならNo
✔ Add JSX Support? … No / Yes
→ JSX Support（Script内でHTMLを扱うためのパッケージ）の要否
✔ Add Vue Router for Single Page Application development? … No / Yes
→ Vue Router（SPAでルーティングを設定するためのパッケージ）の要否
✔ Add Pinia for state management? … No / Yes
→ Pinia（状態管理用パッケージ）の要否
✔ Add Vitest for Unit Testing? … No / Yes
→ Vitest（ユニットテスト用パッケージ）の要否
? Add an End-to-End Testing Solution? › - Use arrow-keys. Return to submit.
❯ No
Cypress
Nightwatch
Playwright
→ End-to-Endテスト用パッケージの選択
✔ Add ESLint for code quality? … No / Yes
→ ESLint（リンターツール）の要否
✔ Add Prettier for code formatting? … No / Yes
→ Prettier（フォーマッティングツール）の要否選択が完了し、appディレクトリ内にファイル群が作成されていることを確認したら、Dockerfileをappディレクトリ内に戻してください。
手順「コンテナ起動まで」へ進んでください。
コンテナ起動まで
次のコマンドでパッケージのインストールを行います。
docker-compose run --rm frontend npm install生成された各種ファイルは所有者がrootになっているので、権限を変更します。
sudo chown -R $USER:$USER .最後に、localhostで接続できるよう設定を変更します。
生成されたpackage.jsonに、以下のように–hostを書き加えます。
{
"name": "app",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite --host",次のコマンドでコンテナを起動し、ブラウザからhttp://localhost:5173/にアクセスして動作を確認したら完了となります。
docker-compose up-dオプションをつけることにより、バックグラウンドで実行することも可能です。
docker-compose up -dコンテナを停止する際は以下のコマンドを実行してください。
docker-compose down
以上となります。ご質問等ありましたら、コメント欄にてお願いします。
コメント