[簡単！] Vue-CliからViteに移行 （備忘録/CVE-2024-27980）

こんにちは！Happy hackingしてますか？！
ここしばらく、nodeバージョン問題で困らせられた後、node脆弱性のニュースがあり、しぶしぶ？viteへの移行をしたので覚書として書いておこうと思います。

「Node.js」にコマンドインジェクションの脆弱性でバージョンアップ

今回のアップデートは、脆弱性1件を修正するアップデート。当初同月9日のリリースを予定していたが、翌10日にずれ込んだ。前週4月3日にもアップデートをリリースしているが、異なる脆弱性を修正しており注意が必要。

今回修正された「CVE-2024-27980」は、Windows環境が影響を受けるコマンドインジェクションの脆弱性。シェルオプションを有効化していない場合でも、コマンドラインの引数を細工することで任意のコマンドを挿入し、実行することが可能だという。

security-next.com

【セキュリティ ニュース】「Node.js」にコマンドインジェクションの脆弱性 - Windows環境に影響（1ページ目 / 全1ページ）：Security NEXT

なのですが、現在つかっている node はv16  + vue-cli で node-ipcのせいでupdated出来ない状態になっています。

@achrinza/node-ipc　問題の解決

nodeを使っていると、たまに複数のモジュールのバージョンが干渉しあって、バージョンアップができなくなることがあります。
今回遭遇したのは↓と似た状態で、エラーが出るためnodeのバージョンの変更が出来ない状況になっていました。

色々調べると、vue-cliを使っていることが原因とわかり、vite に載せ替えを決意。

まずは、node のバージョン変更

nodeのバージョン変更はnvmを使えば簡単です。

nvm install <version>
nvm use <version>

で解決

現在インストールされているバージョンはlistコマンドで表示されます。
先程の記事のパッチのあたった20.12.2にすることにします。

nvm list
       v16.19.0
       v18.16.0
       v18.18.2
       v18.20.2
        v19.7.0
->     v20.12.2
        v21.7.3
         system

Viteで新規プロジェクトを作成して試す！

実験として、

1 )新規ｖueプロジェクトを作成

vue-cli で作成

vue create hello-world
yarn add -D vite @vitejs/plugin-vue
yarn remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service
yarn serve

ブラウザの表示。オーライっ！

2 ) Viteのインストール

yarn add -D vite @vitejs/plugin-vue
yarn remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service

3) index.htmlの修正

index.html は　viteではパスが ./public から ./ に移動していますので mv コマンドで移動してテキスト編集。。。とかやると面倒なので、別途vite のプロジェクトを新規作成し、index.html をコピーしてきます。

以下は各ツールでの新規作成方法

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun

同じく、src/main.js,  src/style.css もこの新規プロジェクトから vueのプロジェクトへコピーしてしまいます。

無事動きました。

ここまでは１０分もかかりません、快調快調！

vite で作成したプロジェクトはこんな表示になります。

count is 0

の場所をクリックするとカウントアップされるデモになっています。

vite 動くことが確認できたので、自分のプロジェクトのvite移動を実践してい見ます。

Vite移植　package.json 作成

手順

1. Vite で新規プロジェクト作成

2. 旧プロジェクトの package.json の　dependencies, devDependencies , eslintConfig をコピペ。　ただし、vue-cli のものは除外します

3. yarn コマンドでモジュールインストール

4. 実行確認

5. ソースコードなどを移植

6. 実行確認

↓は４まで終わったところ。モジュールは無事インストールできました。

$ yarn dev
yarn run v1.22.18
warning package.json: "dependencies" has dependency "sass" with range "^1.55.0" that collides with a dependency in "devDependencies" of the same name with version "^1.32.12"
$ vite
Re-optimizing dependencies because lockfile has changed

  VITE v5.2.8  ready in 419 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ブラウザにもサンプルの表示がされました

ソース移動の注意点

• .file を忘れない

• vue.config.js  => vite.config.js に移植

• @/mylib/… で　./src 以下にあるソースのインポートの修正

import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
      { find: '@assets', replacement: fileURLToPath(new URL('./src/shared/assets', import.meta.url)) },
      { find: '@cmp', replacement: fileURLToPath(new URL('./src/shared/cmp', import.meta.url)) },
      { find: '@stores', replacement: fileURLToPath(new URL('./src/shared/stores', import.meta.url)) },
      { find: '@use', replacement: fileURLToPath(new URL('./src/shared/use', import.meta.url)) },
    ],
  },
});

• envの解決

  • process　を使って処理しているところはviteの自動読み込みに任せるように変更 (processは存在しないので , import.meta.env.VITE_… に置き換え）

  • .evnファイルの環境変数は VITE_ で始まる必要。 (vue-cli  ではVUE_で始まるのと同じ）

.env の作業例

Viteでは、--modeオプションを使って環境を切り替えることができます。.envファイルに環境名を付けて、複数の環境ファイルを作成することができます。

package.json

--modeオプションで環境を切り替えるには、package.jsonのscriptsに以下のように記述します。

    "dev": "vite --mode development",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",

.env.development

VITE_APP_API_URL='http://127.0.0.1:5000/'
VITE_APP_SENDGRID_API_KEY=''

同様に、.env.production ファイルも作成して、本番環境に合わせた設定を記述します。

code の例

console.log("------ env for vite ---------")
console.log(import.meta.env)
API_URL = import.meta.env.VITE_APP_API_URL

 動かしてみる

$ yarn dev
 
 VITE v5.2.8  ready in 145 ms

  ➜  Local:   http://localhost:8081/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

145ms !! 一瞬で表示されます。 vue-cli では2211ms だったので１０倍以上速いです。 

割と簡単だったので反省

vue-cliのモジュールの問題も解決できるし、viteにもっと早く移行していれば。。。と反省しました。

これ系の作業は、開発事態が進むわけではないので「ウゼー」っとなりがちですが、終わってしまえば「うぉぉ！」っと１８０度反転する,自分の感情任せな実在を見た思いです(=_=;)

付録：

node-ipc、こんなのもありました。

警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害 - Qiita