DockerでVueの開発環境を構築する

背景

背景はこちらの記事と同じです。

手順

こちらの記事と重複する部分もありますが、改めて最初から書きます。

• プロジェクト用に新規ディレクトリを作成(本記事ではdemoという名で作成)
• 作成したディレクトリ直下にdocker-compose.ymlを作成
  • 本記事ではNode.jsの部分のみ記述

docker-compose.yml

version: '3'

services:  
  node:
    build: ./docker/node
    ports:
      - '5173:5173'
    tty: true
    volumes:
      - ./frontend:/var/www/html/frontend
    working_dir: /var/www/html/frontend

• 同ディレクトリにdockerディレクトリを作成
• dockerディレクトリ内にnodeディレクトリを作成し、その直下にDockerfileを作成

Dockerfile

FROM node:18

ENV TZ Asia/Tokyo

RUN apt-get update \
    && apt-get install -y \
    bash \
    git

• プロジェクトディレクトリで以下のコマンドを実行しVueプロジェクトを作成

npm create vite@latest frontend -- --template vue-ts

• vite.config.tsに以下を追加
  • これを追加しないと、Docker内で起動したlocalhostをブラウザで確認できない

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: true // 追加
  },
  plugins: [vue()],
})

• 以下のコマンドを実行しDockerのコンテナを立ち上げる

docker compose up -d

• 以下のコマンドを実行してlocalhostを起動し、ブラウザで開けることを確認する

docker compose exec node npm run dev

参考

• SpringBoot × Vue3 × Vite × TypeScript の環境を構築した
• DockerでVue(Vite使用)の環境構築をしたが、docker-compose upをしてもVueの画面が表示されない時の対処法