はじめに

DockerでViteとVue3の開発環境を立ち上げる作業を行った。映し出すまでに少し手間どってしまったので、理解を深めるためにもメモを残す。

ゴール

オンプレサーバー内の仮想OSでDockerを導入していてdocker compose v2なども導入済みです。
今回のゴールはAmazonLinux2023のイメージを利用してVite+Vue3の開発環境をhttp://xxx.xxx.xxx.xxx:5173でアクセスできる状態にすることです。

参考：

https://zenn.dev/iloveomelette/scraps/da45d505ffaefc
https://qiita.com/generonishimura/items/88742085294bd0b234a6

作業手順

開発用ディレクトリを作成
Dockerfileとcompose.ymlを作成

FROM amazonlinux:2023

# dnfのアップデート
RUN dnf update -y

# Node.jsのインストール
RUN curl -sL https://rpm.nodesource.com/setup_20.x | bash - && \
    dnf install -y nodejs

# Viteのインストール
RUN npm install -g vite

# コンテナ内の作業ディレクトリを作成
WORKDIR /app

# ポート番号5173でコンテナを公開
EXPOSE 5173

compose.yml

services:
  frontend:  # サービス名
    build:  # Dockerfileの設定
      context: .  # Dockerfileを置いているディレクトリ
      dockerfile: Dockerfile  # Dockerfileのファイル名
    working_dir: /app  # 作業ディレクトリを指定
    volumes:
      - ./:/app:cached
    tty: true  # コンテナを正常終了するのを防ぐ
    ports:
      - '5173:5173'  # 公開用のポート指定。ホスト側:コンテナ側
    command: npm run dev  # viteの実行コマンド
volumes:  # 名前付きボリュームの設定
  node_modules:

3.ホストマシン（仮想OS）でビルド

docker compose build

4.Dockerコンテナ内でViteを利用してVueアプリを作成（Vueを指定し、プロジェクト名は今回は「vue-vite-sample」とした）

docker-compose run frontend npm run vite

5.Dockerfileとcompose.ymlに追記する

FROM amazonlinux:2023

# dnfのアップデート
RUN dnf update -y

# Node.jsのインストール
RUN curl -sL https://rpm.nodesource.com/setup_20.x | bash - && \
    dnf install -y nodejs

# Viteのインストール
RUN npm install -g vite

# コンテナ内の作業ディレクトリを作成
WORKDIR /app

# 追記
# プロジェクトのコピー
COPY vue-vite-sample/ ./

# ポート番号5173でコンテナを公開
EXPOSE 5173

compose.yml

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    working_dir: /app
    volumes:
      - ./vue-vite-sample:/app:cached
      - node_modules:/app/node_modules
    tty: true
    ports:
      - '5173:5173'
    command: npm run dev
volumes:
  node_modules:

6.vite.config.tsを書き換え（ホストではなく外部公開するため）

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 外部公開
    host: '0.0.0.0',
    // 立ち上げる際のポートを変更できます。
    port: 5173
  }
})

7.再度ビルドする

docker compose build --no-cache

8.コンテナの立ち上げ

docker compose up

9.IPとポートを指定してアクセス

http://xxx.xxx.xxx.xxx:5173/