Vite（ヴィート）とはフロントエンドのビルドツール（ローカルの開発用サーバ）で、Vue.jsの作者によって開発されました。Viteの言葉自体はフランス語の「素早い」を表す単語に由来しています。開発環境ではnative ESMを使用してバンドルのプロセス無しでアプリを動作させることができます。かつ、.scssファイルも自動でコンパイルしてくれます。また、バックエンドサーバとの連係も可能なので、フロントエンドのViteサーバとバックエンドのWebサーバを起動してWebアプリ全体を動かしながら開発を進めることができます。本番環境ではバンドルファイルを作成することが想定されています。また、ViteはSPA（Single Page Application）を前提としていますが、MPA（Multi Page Application）もサポートしています。
編集中のファイルを監視し、ファイルの保存時に、WebブラウザはHot Module Replacement (HMR) というプロセスを通じて編集中のコードをリロードする。このプロセスは、アプリケーション全体を再コンパイルする代わりにES6モジュール (ESM) を使用して変更されている特定のファイルをリロードするだけで機能する。
Vite 本家URLは以下の通り。
本記事ではEC2インスタンスが立ち上がっていて、SSH接続できている前提で解説していきます。EC2インスタンスの作成については以下の記事を参考にししてください。
Node.jsのインストール
ViteサーバはNode.jsのインストールが前提となりますので、以下の記事を参考にEC2インスタンス上でNode.jsをインストールしましょう。
バックエンドWebサーバとの連携
今回はフロントエンドの開発にViteサーバを使用し、バックエンドにNode.jsサーバを使用します。同じEC2インスタンス上でこれら２つのサーバを稼働させることを想定します。
Vite-Express プロジェクトの作成
まずは、プロジェクトディレクトリを作成しましょう。
【EC2ユーザのホームディレクトリに移動】
cd /home/ec2-user
【プロジェクトディレクトリの作成と移動】
mkdir vite-express-app && cd vite-express-appプロジェクトディレクトリ構成
ディレクトリ構成は以下を想定します。
vite-express-app/
├── client/・・・Viteプロジェクト
│ ├── package.json
│ ├── index.html・・・エントリーポイントのファイル
│ ├── vite.config.js・・・Viteサーバー設定ファイル
│ └── src/
│ ├── main.js
│ ├── index.scss
│ └── hello.js
└── server/・・・Node.jsプロジェクト
├── package.json
└── server.js・・・Nodeサーバー
Node.jsサーバの設定
セキュリティーグループの作成
EC2インスタンスには以下の２つのセキュリティーグループの設定が必要になります。
- Node.jsサーバ用に80番ポート
- Viteサーバ用に5173番ポート
- Viteプレビューサーバ用に4173番ポート
セキュリティーグループの作成については以下の記事を参考に設定してください。
Node.jsプロジェクトの作成
【Nodeサーバー用のプロジェクトディレクトリの作成】
mkdir server
【ディレクトリの移動】
cd server
【Nodeの設定ファイルの作成】
npm init -y
【Expressパッケージのインストール】
npm install express -l --saveNode.jsサーバの作成
/home/ec2-user/vite-express-app/server/server.js
const express = require('express');
const app = express();
const PORT = 80;
app.use(express.json());
app.get('/api/hello-world', (req, res) => {
res.json({ message: 'Hello from Express!' });
});
app.listen(PORT, () => {
console.log(`Node server is running on port:${PORT}`);
}).on('error', (err) => {
console.error('Error starting server:', err.message);
});
process.on("SIGINT", function () {
console.log("\nGracefully shutting down from SIGINT (Ctrl-C)");
process.exit(0);
});Node.jsサーバの実行
ここではec2-userで node index.js コマンドを実行すると権限なしのエラーが表示されます。80番ポートは特権ポートなのでec2-userでは80番ポートのListenができません。従って、rootユーザとしてsudoコマンドを使用する必要があります。ただし、上記の記事に従ってec2-userでNode.jsをインストールした場合、ec2-userのコマンドとしてインストールさるので、rootユーザが使用できるnodeコマンドはインストールされていないことになります。sudoコマンドでnode/npmコマンドを実行する場合は以下の記事を参考に設定をしてください。
【Nodeサーバを起動】
sudo node server.js
> Nodeサーバが起動して８０番ポートをListenします。
【ブラウザでの表示確認】
http://サーバのドメイン又はIP/api/hello-worldViteサーバの設定
【プロジェクトディレクトリに移動】
cd /home/ec2-user/vite-express-app
【Viteサーバー用のプロジェクトディレクトリとソースディレクトリの作成】
mkdir -p client/src
【ディレクトリの移動】
cd client
【Viteの設定ファイルの作成】
npm init -y
【Viteパッケージのインストール】
npm install vite -l --saveViteプロジェクト用のファイル作成
.scssファイルを作成
./src/index.scss
body {
background-color: #f0f0f0;
font-family: sans-serif;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 2px;
text-decoration: none;
}
}JSモジュール（ESM）を作成
./src/hello.js
export function sayHello() {
console.log("Hello From Vite");
}./src/main.js
import { sayHello } from './hello.js';
import './index.scss'
//helloモジュールからの出力
sayHello();
//Node.jsからの出力
fetch('/api/hello-world')
.then(res => res.json())
.then(data => console.log('From API:', data.message));エントリーポイントファイルを作成
./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vite + Express</title>
</head>
<body>
<h1>Check the console</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script type="module" src="/src/main.js"></script>
</body>
</html>Viteの設定ファイルの作成
./vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: '0.0.0.0',
port: 5173,
proxy: {
'/api': {
target: 'http://サーバのドメイン又はIP:80',
changeOrigin: true,
secure: false
}
}
}
})Viteサーバの起動
package.jsonファイルの編集
“dev”: “vite”, の部分を追記します。
package.json
-
"scripts": {
"dev": "vite",
"test": "echo \"Error: no test specified\" && exit 1"
},
-Viteサーバの起動コマンド
【以下の場所にいることを確認します】
cd /home/ec2-user/vite-express-app/client/
【Viteサーバの起動】
npm run dev【エラーの確認】
npm run devを実行すると以下のエラーが表示されるはずです。
--
4:22:23 AM [vite] (client) Pre-transform error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.
Plugin: vite:css
File: /home/ec2-user/vite-express-app/client/src/index.scss
4:22:24 AM [vite] Internal server error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.
--
.scssのコンパイル用のパッケージをインストールする必要があります。
インストール方法の選択肢
１）エラーメッセージの通り以下のコマンドを実行すする。
> Dart Sassを別言語で動かして複数スレッドで高速にビルドする方法で大規模プロジェクト用。
npm install --save-dev sass-embedded
２）Dart言語で書かれた公式の Sass 実装を使用する。
npm install --save-dev sass
> 小〜中規模プロジェクト用表示確認
【ブラウザで表示確認】
http://サーバのドメイン又はIP:5173/index.html
【ブラウザの開発ツールパネルのコンソールを確認】
以下のようにViteサーバ側のモジュールの出力とNode.js側の出力が確認できればViteとNode.jsの連係は成功です。
-
Hello From Vite
From API: Hello from Express!
-
ナビゲーション部分の表示も.scssで記述した通りのなっていることを確認します。Viteプロジェクト内のファイルの変更とブラウザの自動リロード
Viteはプロジェクトファイル内のファイルの更新を監視しています。ファイルを編集するとブラウザ内の表示が自動的に更新されます。
試しに、index.htmlやhello.jsの表示部分の一部を変更してみましょう。変更が即座にブラウザ内に反映されるのが確認できると思います。
Viteプロジェクトのビルド
package.jsonの変更
“build”: “vite build”, の部分を追記します。
./package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "echo \"Error: no test specified\" && exit 1"
},Viteプロジェクトのビルドコマンド
【バンドル処理のの実行】
npm run build
> ./dist/ディレクトリが作成されます。
【出力内容の確認】
tree dist
--
dist/
├── assets
│ ├── index-BqdaNvZ7.css
│ └── index-ffJZiBwz.js
└── index.html
1 directory, 3 files
--treeコマンドがインストールされていない場合は以下のコマンドでインストールしてください。
sudo dnf install tree -y
プレビュー用サーバの起動
バンドルした./dist/ディレクトリを元にプレビュー用サーバを起動してみましょう。
package.jsonの変更
【package.jsonにpreviewの行を追加】
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "echo \"Error: no test specified\" && exit 1"
},プレビューサーバの起動コマンド
【デフォルトの4173番ポートを使う場合】
npm run preview
【ポート番号を指定する場合】
> EC2インスタンスに別途8080番ポートを指定したセキュリティーグループを追加する必要があります。
npm run preview -- --port 8080表示確認
ビルド前同様にブラウザにアクセスして開発者ツールのコンソールを確認しましょう。同じ出力がされているのが確認できます。
http://サーバのドメインまたはIP:4173/index.htmlデプロイ
ビルドされたバンドルファイルは静的ファイルなので、そのままNode.jsプロジェクトへの公開ディレクトリにコピーして使用することができます。
ビルドファイルのコピー
【Node.js側の公開ディレクトリを削除】
rm -rf /home/ec2-user/vite-express-app/server/public
【ビルドディレクトリをNode.js側の公開ディレクトリとしてコピー】
cp -ipR /home/ec2-user/vite-express-app/client/dist /home/ec2-user/vite-express-app/server/publicserver.js側の変更
太文字箇所の追記をしてください。
server.js
const express = require('express');
const app = express();
const PORT = 80;
const path = require('path');
app.use(express.json());
app.use(express.static(path.join(__dirname, "public")));
app.get('/api/hello-world', (req, res) => {
res.json({ message: 'Hello from Express!' });
});
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname + 'public/index.html'));
});
app.listen(PORT, () => {
console.log(`Node server is running on port:${PORT}`);
}).on('error', (err) => {
console.error('Error starting server:', err.message);
});
process.on("SIGINT", function () {
console.log("\nGracefully shutting down from SIGINT (Ctrl-C)");
// some other closing procedures go here
process.exit(0);
});
process.on("SIGINT", function () {
console.log("\nGracefully shutting down from SIGINT (Ctrl-C)");
process.exit(0);
});表示確認
Node.js側の80番ポートを使用したアドレスにアクセスしてコンソールの出力を確認しましょう。
http://サーバのドメイン又はIP/index.htmlまとめ
今日はフロントエンドのビルドツールであるViteの使い方を学習しました。ViteとNode.jsを連携する手順を
確認してきました。Node側とVite側で別々のNodeプロジェクトを作成しましたね。Nodeサーバをインストール・起動後は、Viteサーバのインストールと設定を行いました。Viteを使えばフロントエンド側ではファイルを変更すると自動的にビルドされかつブラウザ内にその変更が自動的に反映されました。Viteの開発用サーバで開発した後はビルドコマンドでバンドルファイルの作成を行いました。それを元にプレビューサーバも起動して表示確認をしましたね。最後はバンドルファイルをNodeプロジェクト側にコピーデプロイして動作確認をしました。フロントエンド側ではESM形式でJavascriptを書くことができ、.scssフォーマットででCSSを書くことができるので開発に集中することができます。Viteを使ってより効率的に開発を進めていきましょう。