docker+vite+vue3環境を構築

編注

この記事には更新版があります。

想定

フロントエンドでvueを使用。後ほどバックエンドやデプロイするためのWEBサーバを追加することを想定。
そのため、projectの中であらかじめfrontendを分けておく。
（バックエンドを追加しない場合でもこの手順でOK）

プロジェクトフォルダとcompose.yaml作成

mkdir project && cd project
mkdir frontend && touch compose.yaml

Dockerfile作成

mkdir frontend/vue && touch frontend/Dockerfile

この時点でのディレクトリ＆ファイル構成

tree

./project
    ├── compose.yaml
    └── ./frontend
        ├── Dockerfile
        └── ./vue

Dockerfile

Dockefile

FROM node:lts-alpine
WORKDIR /
RUN apk update

compose.yaml

compose.yaml

services:
  vue:
    build: ./frontend/
    volumes:
      - type: bind
        source: ./frontend/vue
        target: /vue
    ports:
      - "8082:5173"

一旦build

docker compose build

create-vueでプロジェクトの作成

docker compose run vue npm init vue@latest

create-vue@3.10.4
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue
✔ Add TypeScript? … No / Yes #=>No まだTypeScriptに手を出していない
✔ Add JSX Support? … No / Yes #=>No
✔ Add Vue Router for Single Page Application development? … No / Yes #=>Yes
✔ Add Pinia for state management? … No / Yes #=>Yes
✔ Add Vitest for Unit Testing? … No / Yes #=>No
✔ Add an End-to-End Testing Solution? › No #=>No
✔ Add ESLint for code quality? … No / Yes #=>Yes
✔ Add Prettier for code formatting? … No / Yes #=>Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes #=>No

Scaffolding project in /vue...

Done. Now run:

  cd vue
  npm install
  npm run format
  npm run dev

npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g npm@10.8.1
npm notice

完了するとfrontend/vue配下にファイルが作成される。

Dockerfileを変更

WORKDIRを’/’から'/vue'へ変更
COPYコマンドを追加

Dockerfile

FROM node:21.6.2-alpine
+ #変更
- WORKDIR /
+ WORKDIR /vue
+ #追加
+ COPY ./vue ./
RUN apk update
+ # 起動コマンドを追加
+ CMD ["yarn", "dev", "--host"]

再度build

Dockerfileの変更を反映させるため、再度build

docker compose build

確認

コンテナに入り、プロンプト(カレントディレクトリ：WORKDIR)が/vueだったらOK。
カレントが/vueにならないと次項のyarnが/vue配下にインストールされない。
確認後exitで抜ける

docker compose run --rm vue sh
/vue #　exit

yarnのインストール

docker compose run --rm vue yarn install

インストール完了後vue配下にyarn.lockファイルとnode_modulesフォルダができる。

起動

docker compose up -d

http://localhost:8082
にアクセスし、You dit it！を確認

参考