Vue.jsの2.xと3.xをVue CLIを使って動かしてみる（ビルドも行う）

「ハッキング・ラボのつくりかた 完全版 仮想環境におけるハッカー体験学習」と「体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践」（通称：徳丸本）を参考に、セキュリティの勉強を進めています。

その上で必要な知識として、今回は、Webアプリケーションを簡単に構築できる Vue.js を理解しようと思います。

少し前に、Pythonベースの Flask（WSGI＋Werkzeug＋Jinja2）をやりましたが、今回の Vue.js は JavaScriptベースです。たくさんの言語が出てきて、フロントエンド開発は大変です。そのセキュリティを学ぶには、それらについて、少しずつでも知っておく必要があるので、もっと大変な気がしています。

また、JavaScript と言えば、Node.js（JavaScript の実行環境）が出てきます。こちらも、以前 に、xpm を使ったときに、VirtualBox＋Ubuntu22.04 に環境構築しました。今回はこの環境を使います。

それでは、やっていきます。

はじめに

「セキュリティ」の記事一覧です。良かったら参考にしてください。

セキュリティの記事一覧

・第1回：Ghidraで始めるリバースエンジニアリング（環境構築編）
・第2回：Ghidraで始めるリバースエンジニアリング（使い方編）
・第3回：VirtualBoxにParrotOS（OVA）をインストールする
・第4回：tcpdumpを理解して出力を正しく見れるようにする
・第5回：nginx（エンジンエックス）を理解する
・第6回：Python＋Flask（WSGI＋Werkzeug＋Jinja2）を動かしてみる
・第7回：Python＋FlaskのファイルをCython化してみる
・第8回：shadowファイルを理解してパスワードを解読してみる
・第9回：安全なWebアプリケーションの作り方（徳丸本）の環境構築
・第10回：Vue.jsの2.xと3.xをVue CLIを使って動かしてみる（ビルドも行う） ← 今回

Vue.js とは、Webアプリケーションを構築するときに、特に UI（ユーザインタフェース）を得意としたフレームワークのようです。かっこいいインタフェースを作るところまで出来るか分かりませんが、とにかく今回もやっていきます。

Vue.js の公式サイトは以下です。日本語が充実しているということで、とても気が楽です。

ja.vuejs.org

ただ、Vue.js（ビュージェイエス）だけの場合、基礎的なことは学べますが、実際の Webアプリケーションを構築しようとすると、開発ツール（ビルドツール？）が必要なようです。そのツールとは、Vue CLI、Vite（ビート） が代表的で、Vue CLI から新しい Vite に移行する記事がたくさんありました。

ひとまず、今回は、Vue CLI でやってみます。

Vue CLI の場合でもいろいろなパッケージ？コンポーネント？の用語（WebPack、vue-loader）が出てきて、分からないものが多かったですが、Vite（React、Preact）の方は新しいだけあって、もっとさっぱりでした。

Vue CLI の公式サイトです（英語やん。。。）。

cli.vuejs.org

使用する環境は、VirtualBox＋Ubuntu 22.04 です。

Vue CLIの環境構築

CDN を使う形（HTML にリンクを書いておけば、どこかからダウンロードしてくれる形）ならVue.js の環境構築はいらないようですが、今回はデプロイするところまでやりたいので、Vue CLI をインストールします。

まず、Node.js が必要です。以前、QEMU をビルドするときに、xpm が必要になり、xpm には Node.js が必要ということでインストールしました。

以下の記事になりますが、Node.js（node）、npm（パッケージ管理）、xpm（npm を補うもの）をセットでインストールしたので、参考にならないかもしれません。Node.js のインストールについては、Web検索すれば、たくさん出てくると思います。

daisuke20240310.hatenablog.com

では、ちゃんと動くかだけ確認しておきます。

$ node -v
v20.13.1
$ npm -v
10.8.0

大丈夫のようです。

では、Vue CLI をインストールします。Vue CLI は少し前まで Ver 2.x がよく使われていたようですが、現在は Ver 2.x は非推奨で、Ver 3.x が主流のようです。npm でインストールするときは、Ver 2.x のときは、vue-cli という名前だったようですが、Ver 3.x では @vue/cli という名前のようです。

-g は、グローバルにインストールするという意味（と言ってもユーザのホームディレクトリ以下にインストール）で、これを付けないと、ローカル（カレントディレクトリ）にインストールすることになるようです。

今回は、いくつかプロジェクトを作りそうなので、グローバルにインストールします。

$ npm install -g @vue/cli

$ vue -V
@vue/cli 5.0.8

無事にインストールできたようです。

プロジェクトを作成する

簡単なプロジェクトを作成して、とりあえず動かしていきます。

任意のフォルダで、プロジェクトを作成します。プロジェクトを作成するとディレクトリが作られるので、複数のプロジェクトを格納するための vue フォルダを作り、そこでプロジェクトを作成することにします。

$ mkdir vue
$ cd vue/

Vue 2.xのプロジェクトで動かす

まず、Vue 2.x でプロジェクトを作っていきます。

メニューのようなものが出るので、矢印キーで Vue 3、Vue 2、Manually select features が選択できます。今回は、Vue 2 を選択します。機能追加をしたい場合は、最後の Manually select features を選択するんだと思います。

$ vue create hello

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
? Default ([Vue 2] babel, eslint)
  Manually select features

Vue CLI v5.0.8
?  Creating project in /home/daisuke/svn_/qemu/vue/hello.
?  Initializing git repository...
??  Installing CLI plugins. This might take a while...

added 871 packages, and audited 872 packages in 3m

100 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
?  Invoking generators...
?  Installing additional dependencies...

added 88 packages, and audited 960 packages in 21s

112 packages are looking for funding
  run `npm fund` for details

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
?  Running completion hooks...

?  Generating README.md...

?  Successfully created project hello.
?  Get started with the following commands:

 $ cd hello
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

何やら、たくさんメッセージが出ましたが、無事にプロジェクトが作られたようです。GUI の端末で動かすと、以下のように、絵文字のようなものが出ますが、SSH でログインしてると ? になります。

プロジェクト作成中のキャプチャ

長い時間かかってましたが、どんなファイルが作成されたかを見てみます。node_modules 以下は、3000ファイル以上あったので省略しています。

$ cd hello/
$ tree -L 3
.
|-- README.md
|-- babel.config.js
|-- jsconfig.json
|-- node_modules
|   |-- (省略)
|-- package-lock.json
|-- package.json
|-- public
|   |-- favicon.ico
|   `-- index.html
|-- src
|   |-- App.vue
|   |-- assets
|   |   `-- logo.png
|   |-- components
|   |   `-- HelloWorld.vue
|   `-- main.js
`-- vue.config.js

1325 directories, 3498 files

index.html の内容です。<div id="app"></div> の部分が Vue.js で作られる部分らしいです。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

とにかく、メッセージ通りに、動かしてみます。

$ npm run serve
> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 16370ms                                                                                                                                                                            22:36:12

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.0.2.15:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

開発用のWebサーバが起動したようです。

helloアプリが動作した

続いて、ビルドしてみます。dist ディレクトリが作られて、その中にデプロイ用のファイルが作られたようです。

$ npm run build

> hello@0.1.0 build
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


?  Building for production...

 DONE  Compiled successfully in 23029ms                                                                                                                                                                            22:50:43

  File                                 Size                                                                                     Gzipped

  dist/js/chunk-vendors.27e771c3.js    91.34 KiB                                                                                32.10 KiB
  dist/js/app.35ff291d.js              13.08 KiB                                                                                8.42 KiB
  dist/css/app.2cf79ad6.css            0.33 KiB                                                                                 0.23 KiB

  Images and other types of assets omitted.
  Build at: 2024-08-05T13:50:43.960Z - Hash: 3f950b27730a28b9 - Time: 23029ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

一応、何が作られたかを見てみます。7ファイル増えています。dist 以下が 7ファイルなので、この 7ファイルだけが新規に追加されたようです。

tree -L 3
.
|-- README.md
|-- babel.config.js
|-- dist
|   |-- css
|   |   `-- app.2cf79ad6.css
|   |-- favicon.ico
|   |-- index.html
|   `-- js
|       |-- app.35ff291d.js
|       |-- app.35ff291d.js.map
|       |-- chunk-vendors.27e771c3.js
|       `-- chunk-vendors.27e771c3.js.map
|-- jsconfig.json
|-- node_modules
|   |-- (省略)
|-- package-lock.json
|-- package.json
|-- public
|   |-- favicon.ico
|   `-- index.html
|-- src
|   |-- App.vue
|   |-- assets
|   |   `-- logo.png
|   |-- components
|   |   `-- HelloWorld.vue
|   `-- main.js
`-- vue.config.js

1328 directories, 3505 files

$ du -sh *
190M    hello

約190MB もありました。

先ほどは、distディレクトリが無かったので、おそらく、publicディレクトリと srcディレクトリを対象として動いていたんだと思います。一応、ビルドの結果の distディレクトリを対象に動かしてみます。

Vue CLI の公式サイトのガイドのデプロイのところに、一番簡単な方法が紹介されていましたので、それに従ってやってみます。

serve というのをインストールして、-s を付けて動かすようです。-s は、ルーティング問題に対処するためシングルページアプリケーションモードで動かすことを意味するとのことです。さっぱりです（笑）。

cli.vuejs.org

$ npm install -g serve

added 90 packages in 15s

24 packages are looking for funding
  run `npm fund` for details

$ serve -s dist
 ERROR  Cannot copy server address to clipboard: Couldn't find the `xsel` binary and fallback didn't work. On Debian/Ubuntu you can install xsel with: sudo apt install xsel.

   lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk
   x                                       x
   x   Serving!                            x
   x                                       x
   x   - Local:    http://localhost:3000   x
   x   - Network:  http://10.0.2.15:3000   x
   x                                       x
   mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj

エラー出てますが、ブラウザを起動して、アクセスすると同じように表示されました。クリップボードにサーバのアドレスがコピー出来なかった、というようなエラーのようなので、SSH で接続した状態で起動したのが良くなかったのかもしれません。今度は GUI で起動してみます。

$ serve -s dist
   ┌────────────────────────────────────────┐
   │                                        │
   │   Serving!                             │
   │                                        │
   │   - Local:    http://localhost:3000    │
   │   - Network:  http://10.0.2.15:3000    │
   │                                        │
   │   Copied local address to clipboard!   │
   │                                        │
   └────────────────────────────────────────┘

エラーは出ずに起動することが出来ました。

Vue 3.xのプロジェクトで動かす

次に、Vue 3.x のプロジェクトを作って動かしてみたいと思います。

違いは、最初の選択肢で [Vue 3] を選びます。最初の選択肢以外、何も出ずに正常終了しました。

$ vue create hello3
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
? Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Vue CLI v5.0.8
?  Creating project in /home/daisuke/svn_/qemu/vue/hello3.
?  Initializing git repository...
??  Installing CLI plugins. This might take a while...


added 871 packages, and audited 872 packages in 2m

100 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
?  Invoking generators...
?  Installing additional dependencies...


added 89 packages, and audited 961 packages in 20s

112 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
?  Running completion hooks...

?  Generating README.md...

?  Successfully created project hello3.
?  Get started with the following commands:

 $ cd hello3
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

生成された内容を確認します。

$ cd hello3/
$ tree -L 3
.
|-- README.md
|-- babel.config.js
|-- jsconfig.json
|-- node_modules
|   |-- (省略)
|-- package-lock.json
|-- package.json
|-- public
|   |-- favicon.ico
|   `-- index.html
|-- src
|   |-- App.vue
|   |-- assets
|   |   `-- logo.png
|   |-- components
|   |   `-- HelloWorld.vue
|   `-- main.js
`-- vue.config.js

1324 directories, 3492 files

Vue 2.x に比べると、ディレクトリが1つ減って、6ファイル減ったようです。

Vue 2.x の public/index.html を比較しましたが、差異はありませんでした。

では、起動してみます。

$ npm run serve

> hello3@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 28127ms                                               20:39:27

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.0.2.15:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ブラウザでアクセスしてみましたが、Vue 2.x と見た目は同じでした。

続いて、ビルドします。出力されるメッセージはほとんど同じように見えます。

$ npm run build

> hello3@0.1.0 build
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.

?  Building for production...

 DONE  Compiled successfully in 38308ms                                               20:44:56

  File                                 Size                      Gzipped

  dist/js/chunk-vendors.a4b0ee02.js    83.06 KiB                 30.39 KiB
  dist/js/app.ef7cd802.js              13.07 KiB                 8.45 KiB
  dist/css/app.2cf79ad6.css            0.33 KiB                  0.23 KiB

  Images and other types of assets omitted.
  Build at: 2024-08-07T11:44:56.366Z - Hash: 25965f73057aa7cb - Time: 38308ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

構成を確認します。Vue 2.x と同様、7ファイルが新規に追加されています。

$ tree -L 3
.
|-- README.md
|-- babel.config.js
|-- dist
|   |-- css
|   |   `-- app.2cf79ad6.css
|   |-- favicon.ico
|   |-- index.html
|   `-- js
|       |-- app.ef7cd802.js
|       |-- app.ef7cd802.js.map
|       |-- chunk-vendors.a4b0ee02.js
|       `-- chunk-vendors.a4b0ee02.js.map
|-- jsconfig.json
|-- node_modules
|   |-- (省略)
|-- package-lock.json
|-- package.json
|-- public
|   |-- favicon.ico
|   `-- index.html
|-- src
|   |-- App.vue
|   |-- assets
|   |   `-- logo.png
|   |-- components
|   |   `-- HelloWorld.vue
|   `-- main.js
`-- vue.config.js

1327 directories, 3499 files

容量も確認しておきます。

$ du -sh *
190M    hello
190M    hello3

ほとんど同じということが分かりました。

Vue 2.x と同じように、serve で distディレクトリを対象に動かしてみます。ブラウザで確認もします。

$ serve -s dist/
   ┌────────────────────────────────────────┐
   │                                        │
   │   Serving!                             │
   │                                        │
   │   - Local:    http://localhost:3000    │
   │   - Network:  http://10.0.2.15:3000    │
   │                                        │
   │   Copied local address to clipboard!   │
   │                                        │
   └────────────────────────────────────────┘

 HTTP  2024/8/8 21:22:31 10.0.2.15 GET /
 HTTP  2024/8/8 21:22:31 10.0.2.15 Returned 200 in 179 ms
 HTTP  2024/8/8 21:22:32 10.0.2.15 GET /js/chunk-vendors.a4b0ee02.js
 HTTP  2024/8/8 21:22:32 10.0.2.15 GET /js/app.ef7cd802.js
 HTTP  2024/8/8 21:22:32 10.0.2.15 GET /css/app.2cf79ad6.css
 HTTP  2024/8/8 21:22:32 10.0.2.15 Returned 304 in 45 ms
 HTTP  2024/8/8 21:22:32 10.0.2.15 Returned 200 in 80 ms
 HTTP  2024/8/8 21:22:32 10.0.2.15 Returned 200 in 113 ms

同じように、動作したことが確認できました。

おわりに

今回は、Vue.js について、2.x と 3.x を対象に、一連の流れをやってみました。

コマンドを打つだけで、何も分かっていなくても、簡単に Webページが出来るという印象を受けました。

次回は、どのファイルを編集すればいいのか、ビルドすると、どのファイルがどのように作られるのか、を理解したいと思います。

最後になりましたが、エンジニアグループのランキングに参加中です。

気楽にポチッとよろしくお願いいたします🙇

今回は以上です！

最後までお読みいただき、ありがとうございました。