背景

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

手順

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

プロジェクト用に新規ディレクトリを作成(本記事では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の画面が表示されない時の対処法