macOSでServBayを使ってVue.jsプロジェクトを作成・実行する
Vue.jsは、ユーザーインターフェース構築のための人気の漸進的JavaScriptフレームワークです。初心者にも扱いやすく、柔軟かつ高性能で、特にシングルページアプリケーション(SPA)の開発に適しています。ServBayは強力なローカルWeb開発環境として、開発者に便利なNode.jsサポートを提供し、macOSでのVue.js開発に最適なプラットフォームとなっています。
本ガイドでは、ServBayの統合環境を活用して、ゼロからVue.jsプロジェクトを作成し、開発モード・本番モードの両方でServBay経由でアクセスする方法を詳しく解説します。
Vue.jsとは？
Vue.jsはユーザーインターフェース構築のための漸進的JavaScriptフレームワークです。他の大型フレームワークとは異なり、Vueはボトムアップによる徐々に拡張可能な設計思想を持っています。コアライブラリはビュー層のみに集中しており、手軽に始められ、サードパーティライブラリや既存プロジェクトとの連携も簡単です。Vue 3は、最新バージョンとして数多くの新機能や改善をもたらし、より高速なパフォーマンス、軽量なパッケージ、TypeScriptの優れたサポートが特徴です。
Vue 3の主な特徴とメリット
- Composition API (コンポジションAPI)： 関数型のコード分割でロジック管理がしやすくなり、大規模コンポーネントの保守性と再利用性が大きく向上します。
- パフォーマンス向上： Vue 3はProxyオブジェクトを利用したリアクティブシステムと仮想DOMアルゴリズムの最適化により、処理速度が大きくアップしています。
- 小型パッケージサイズ： Tree-shaking技術によってコアライブラリがこれまで以上に軽量化され、ロードも高速です。
- TypeScript対応強化： 型定義の充実により、TypeScriptでのVue開発体験がさらに良くなっています。
- 進化したコンポーネントライフサイクル： 新しいライフサイクルフックやSetup関数で、コンポーネントロジックがより明確かつ管理しやすくなりました。
Vue 3を用いることで、現代的でレスポンスの良いWebアプリケーションを効率的に開発できます。
ServBay統合環境でVue.jsプロジェクトを作成・運用する
本記事では、ServBayが提供するNode.js環境を使ってVue.jsプロジェクトを作成・実行します。ServBayのウェブサイト機能でWebサーバーを構成し、リバースプロキシと静的ファイル配信によりプロジェクトへローカルアクセスを実現します。
前提条件
作業を始める前に、以下の準備が整っていることをご確認ください。
- ServBayのインストール: macOSにServBayローカル開発環境が正しくインストールされている。
- Node.jsパッケージのインストール: ServBayのパッケージ管理機能でNode.jsを導入済み。詳しい手順はServBayでのNode.jsのインストールと利用方法をご覧ください。
Vue.jsプロジェクトの作成
プロジェクトの初期化
まずターミナルアプリを開きます。ServBayではウェブサイトプロジェクトを
/Applications/ServBay/wwwディレクトリに配置することを推奨しています。そこへ移動し、npm create vue@latestコマンドで新たなVue.jsプロジェクトを初期化しましょう。@latestを付けることで、最新のVue CLIまたはcreate-vueツール（通常はVue 3）が使われます。bashcd /Applications/ServBay/www npm create vue@latest1
2ターミナルの指示に従い、プロジェクト名（例：
servbay-vue-app）と各種オプション(TypeScript, Vue Router, Pinia…など)の要否を選択します。設定例は以下の通りです。bash✔ Project name: … servbay-vue-app ✔ Add TypeScript? … No # 必要に応じてYesまたはNoを選択 ✔ Add JSX Support? … No # 必要に応じてYesまたはNoを選択 ✔ Add Vue Router for Single Page Application development? … Yes # 推奨：Yes ✔ Add Pinia for state management? … No # 必要に応じてYesまたはNoを選択 ✔ Add Vitest for Unit testing? … No # 必要に応じてYesまたはNoを選択 ✔ Add an End-to-End Testing Solution? … No # 必要に応じてYesまたはNoを選択 ✔ Add ESLint for code quality? … Yes # 推奨：Yes ✔ Add Prettier for code formatting? … Yes # 推奨：Yes ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # 必要に応じてYesまたはNoを選択1
2
3
4
5
6
7
8
9
10依存モジュールのインストール
プロジェクトの初期化が完了したら、新しく作成された
servbay-vue-appディレクトリへ移動し、npm installコマンドで必要な依存モジュールをインストールします。bashcd servbay-vue-app npm install1
2
プロジェクトのサンプル内容を編集（任意）
プロジェクトが正しく動作しているか確認するために、src/App.vueファイルを編集し、デフォルト内容を「Hello ServBay!」のシンプルな出力に変更してみましょう。
プロジェクトディレクトリ内のsrc/App.vueファイルを開き、以下のように書き換えます。
<template>
<div id="app">
<h1>Hello ServBay!</h1>
<p>This is a Vue.js app running via ServBay.</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
開発環境のセットアップ（リバースプロキシ利用）
Vueプロジェクトは開発モード時、ViteやWebpackベースのローカル開発サーバーを立て、ホットモジュールリロード（HMR）などの機能を提供します。ServBayはリバースプロキシ機能で、ローカルドメインを開発サーバーのアドレス・ポートへマッピングできます。
開発サーバーの起動
プロジェクトのルートディレクトリで、以下コマンドにより開発サーバーを起動します。
--portオプションで任意の未使用ポート（例：8585）を指定してください。bashnpm run dev -- --port 85851ターミナルには、開発サーバーが指定ポート（例：
http://localhost:8585）で立ち上がった旨が表示されます。ServBayでのリバースプロキシ設定
ServBayアプリの画面で、ウェブサイト設定へ進みます。新規ウェブサイト設定を追加し、タイプをリバースプロキシで登録します。
- 名前：
My first Vue dev site（または分かりやすい任意の名称） - ドメイン名：
servbay-vue-dev.servbay.demo（またはお好きな.servbay.demoドメイン） - サイトタイプ：
リバースプロキシ - リバースプロキシ先IP：
127.0.0.1 - リバースプロキシ先ポート：
8585（開発サーバーの起動時に指定したポートと同じ）
設定を保存すると、ServBayはCaddyまたはNginxのWebサーバー設定を自動更新し、
servbay-vue-dev.servbay.demoへのアクセスをhttp://127.0.0.1:8585へプロキシします。Node.js開発サイトの詳細な設定ガイドはServBayでNode.js開発サイトを追加するをご覧ください。
- 名前：
開発モードへのアクセス
ServBayのWebサーバーが起動していることを確認し、ブラウザで先ほど登録したドメイン
https://servbay-vue-dev.servbay.demoを開きます。ServBayは独自CA（ServBay User CAまたはServBay Public CA）によるローカルドメインへのSSL証明書発行をサポートしているため、本番環境同様にHTTPS経由でローカルの開発サイトへ安全にアクセス可能です。SSL設定についての詳しい情報はServBayでウェブサイトにSSL証明書を設定するを参考にしてください。
これで、開発モードで動作するVueアプリがブラウザ表示され、コード修正時にもホットリロードの利便性を体感できます。
本番ビルドの作成とデプロイ（静的サイト配信）
Vue.jsプロジェクト開発が完了し、本番用にデプロイしたい場合、最適化された静的ファイル群（HTML、CSS、JavaScript等）のビルドが必要です。ServBayの静的サイト機能を使えば、これら静的ファイルを簡単に配信できます。
本番ビルドの生成
プロジェクトのルートディレクトリで下記コマンドを実行し、本番ビルドを生成します。
bashnpm run build1ビルドの結果、高度に最適化・パッケージ化された静的ファイル群が
distフォルダ内に生成されます。静的ファイル配信の設定
ServBayアプリ画面でウェブサイト設定へ進み、新規ウェブサイト設定でタイプを静的に指定します。
- 名前：
My first Vue production site（もしくは別の分かりやすい名称） - ドメイン名：
servbay-vue-prod.servbay.demo（お好きな.servbay.demoドメイン） - サイトタイプ：
静的 - ドキュメントルート：
/Applications/ServBay/www/servbay-vue-app/dist（ビルド後のdistディレクトリ絶対パス）
設定を保存すれば、ServBayのWebサーバーは
distディレクトリ配下の静的ファイルを直接配信するようになります。- 名前：
本番モードでのアクセス
ServBayのWebサーバーが起動中であることを確認し、本番版に登録したドメイン
https://servbay-vue-prod.servbay.demoをブラウザで開きます。これにより、最適化されたVueアプリの本番ビルド表示が可能です。ServBayのカスタムドメインや自動SSL機能を活用し、ローカルで本番環境のプレビューも安全に行えます。
注意点
- ポート競合:
npm run devで指定する8585（や他の任意ポート）が他のアプリに占有されている場合はエラーとなります。空いているポートに変更し、ServBayのリバースプロキシ側のポートも合わせて更新しましょう。 - ServBay Webサーバーの稼働: ServBayのWebサーバー（CaddyまたはNginx。設定により異なる）が停止していると、設定したドメインでWebサイトにアクセスできません。必ず稼働中であることを確認してください。
- ドメイン解決: ServBayはウェブサイト設定で追加された
.servbay.demoドメインを自動で127.0.0.1へ割り当てます。それ以外のドメインを使う場合は、システムのhostsファイルを手動で編集するか、ServBayのHosts Manager機能でローカル解決の正当性を確保しましょう。
まとめ
ServBayを使えば、macOS上でNode.js環境を備えたローカル開発環境を簡単に構築でき、Vue.jsプロジェクトの開発および本番デプロイを効率よく管理できます。ウェブサイト機能を活用すれば、開発サーバーへのリバースプロキシや、本番ビルド静的ファイルの直接配信もすぐに設定でき、カスタムドメイン・自動SSL証明書による利便性と安全性も享受可能です。これにより、ローカルでのVue.jsプロジェクトのセットアップとワークフローが大きく簡略化されます。