み

 これはなに？Dockerコンテナ上でVite + Vue3の環境を作り、SPAを開発していく。
https://ja.vite.dev/guide/

 ゴールDockerコンテナ上でViteが使える状態
ViteでVueプロジェクトを管理できている状態
良さげに開発が進められている状態

 開発環境MacBook Pro
チップ: Apple M1 Pro
メモリ: 16 GB
macOS: Sonoma

VSCode
Chrome

み

Docker環境の整備

Node.jsは、2024-12-01時点でLTSとなっている v22 を入れる

Dockerfile
FROM node:22-alpine

WORKDIR /app

# TODO: vite project作成後、コメントアウトを外す
# COPY ./vite-project/package*.json /app/vite-project/
# WORKDIR /app/vite-project
# RUN npm install

COPY . /app

compose.yaml
services:
  vue-app:
    container_name: sample-app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 5173:5173
    volumes:
      - .:/app
    # TODO: 下記の起動確認完了後、コメントアウトを外す
    # command: >
    #   sh -c "npm install && npm run dev -- --host 0.0.0.0"
    tty: true

$ docker compose build
$ docker compose up -d
docker exec -it sample-app ash

viteプロジェクトの作成

viteの公式Docsに従う。

https://ja.vite.dev/guide/

# コンテナ内での作業
$ npm create vite@latest
# create-vite@6.0.1 時点の雪面
# 設問その1. プロジェクト作成を進めて良いか？
# 設問その2. プロジェクト名の入力: 今回は `vite-project`
# 設問その3. フレームワークの選択: 今回は `vue` を選択
# 設問その4. variant (js, ts, nuxt)の選択: 今回は `JavaScript` を選択

# 起動してみる
$ cd vite-project
$ npm install
$ npm run dev -- --host 0.0.0.0

み

Vue3 memo

Vue3からは <template> 内に複数要素が存在してもOKな方針になったが、下記エラーが App.vue などで発生していた。

[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue

.eslint.js や package.json や settings.json などに 'vue/no-multiple-template-root': 'off' の設定を追加して回避する案が散見されたが、vue officialのVSCode拡張を入れる→VSCode再起動、で解決できた。

み

GitHub Pagesでの公開は↓を参考にして進めた

注意点としては、Repositoryに紐づくPagesとするためには下記設定が必要なこと。

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/<RepositoryName>/',  // これを追記
})

あとは、GitHubの無料プランユーザであれば、Respotioryの可視性をpublicにしないとGitHub Pages使えないので注意。
GitHub Actionsのworkflowは上記viteのドキュメントにyamlがあるため、とりあえずコピペで動作する。

このスクラップは4ヶ月前にクローズされました

作成者以外のコメントは許可されていません