ポートフォリオサイトをVue2からVue3へ移行する

はじめに

昔作成したポートフォリオサイトを Vue2 -> Vue3 に移行する。

きっかけ

Windows で node の環境を作り、firebaseにデプロイしていたのだが、firebase CLIのアップデートで、古い nodeのライブラリと依存関係が解決できなくなっているようで、ビルドができなくなった。
解決するのも面倒なので、 vue3+viteの環境に移行するかーと思ったので、これをやってみる。
ちなみに、 portfolio のプロジェクトは privateリポジトリなので、雰囲気だけ伝わってくれれば…！
どちらかというと、ほぼ作業記録になる。

環境

Windows 10 Professional
WSL2 (Ubuntu22.04 LTS)
VSCode

Docker Desktop 4.20.1 (110738)
Docker version 24.0.2
Docker Compose version v2.18.1

{
  "name": "portfolio",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "^7.2.96",
    "animejs": "^3.2.1",
    "core-js": "^3.29.0",
    "roboto-fontface": "*",
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuetify": "^3.0.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "eslint": "^8.37.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.60.0",
    "vite": "^4.2.0",
    "vite-plugin-vuetify": "^1.0.0"
  }
}

手順

今回からは node を Docker で管理したいため、全てDocker 内で完結するようにする。

Dockerfileの作成

FROM node:18

ARG APP_USER node

RUN apt-get update \
&& apt-get install -y gcc g++ make python3 \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*

RUN mkdir -p /usr/src/app /var/www
RUN chown -R $APP_USER: /usr/src/app /var/www

USER $APP_USER
WORKDIR /usr/src/app

EXPOSE 3000
ENTRYPOINT [ "tail", "-f", "/dev/null" ]

compose.ymlの作成

services:
  app:
    build: .
    volumes:
      - .:/usr/src/app
    ports:
      - 3000:3000

ここまでで、必要なものは揃った。

ビルド

docker compose up -d --build

ビルドを行い、node が使えるコンテナを用意する。

app-bash:
	docker compose exec --user=node app bash

面倒なので、Makefileを用意して置き、コマンドのエイリアスを定義しておく。

プロジェクトの作成

make app-bash

でコンテナに入り、

yarn create vuetify

で vue3+vite+vuetify-vue-routerの環境を作る。
参考: https://zenn.dev/beeeegle/articles/00311e90cf91be

node@b16088d8a2a5:/usr/src/app$ yarn create vuetify
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vuetify@1.0.8" with binaries:
      - create-vuetify
[############] 12/12
Vuetify.js - Material Component Framework for Vue

✔ Project name: … portfolio
✔ Which preset would you like to install? › Base (Vuetify, VueRouter)
✔ Use TypeScript? … No / Yes
✔ Would you like to install dependencies with yarn, npm, or pnpm? › yarn

◌ Generating scaffold...
◌ Installing dependencies with yarn...

yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 30.28s.

portfolio has been generated at /usr/src/app/portfolio

プロジェクトを1段上にあげる。

mv portfolio/* .
残ったファイルは手動であげとく。

make app-bash
yarn dev

で vite のデフォルトのページが表示されることを確認する。

※ここで、 vite.config.js に、下記の部分を追記しておくこと。

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

移行

animejsのインストール

make app-bash
yarn add animejs

mdi/fontのインストール

make app-bash
yarn add @mdi/font

※残りはGitHubのコミット履歴を参照

vuetify のレイアウト修正
router.js, vuetify.jsの修正
vuetify2 -> vuetify3 で使用できなくなったコンポーネントの修正

残った課題

OptionsAPI -> CompositionAPI に変える。
レイアウトをもう少しいい感じにしたい…。