「ハッキング・ラボのつくりかた 完全版 仮想環境におけるハッカー体験学習」と「体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践」（通称：徳丸本）を参考に、セキュリティの勉強を進めています。
その上で必要な知識として、今回は、Webアプリケーションを簡単に構築できる Vue.js を理解しようと思います。
少し前に、Pythonベースの Flask（WSGI＋Werkzeug＋Jinja2）をやりましたが、今回の Vue.js は JavaScriptベースです。たくさんの言語が出てきて、フロントエンド開発は大変です。そのセキュリティを学ぶには、それらについて、少しずつでも知っておく必要があるので、もっと大変な気がしています。
また、JavaScript と言えば、Node.js（JavaScript の実行環境）が出てきます。こちらも、以前 に、xpm を使ったときに、VirtualBox＋Ubuntu22.04 に環境構築しました。今回はこの環境を使います。
それでは、やっていきます。
はじめに
「セキュリティ」の記事一覧です。良かったら参考にしてください。
セキュリティの記事一覧
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 で作られる部分らしいです。
<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>
</body>
</html>
とにかく、メッセージ通りに、動かしてみます。
$ npm run serve
> hello@0.1.0 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ページが出来るという印象を受けました。
次回は、どのファイルを編集すればいいのか、ビルドすると、どのファイルがどのように作られるのか、を理解したいと思います。
最後になりましたが、エンジニアグループのランキングに参加中です。
気楽にポチッとよろしくお願いいたします🙇
今回は以上です！
最後までお読みいただき、ありがとうございました。
