ServBayでVue.jsプロジェクトを作成・実行する

Vue.jsは、ユーザーインターフェース構築に特化した人気の高い漸進的JavaScriptフレームワークです。初心者にも扱いやすく、柔軟かつ高性能で、特にシングルページアプリケーション（SPA）の開発に適しています。ServBayは、強力なローカルWeb開発環境として、Node.jsサポートを簡単に提供し、macOSおよびWindowsに対応しているため、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対応により、Vue 3のコアライブラリはさらに軽量化され、高速に読み込めます。
• TypeScriptサポート強化: TypeScriptでの開発時に、型定義や補完機能が充実し、信頼性が高まります。
• ライフサイクル管理の改善: 新しいライフサイクルフックやSetup関数で、コンポーネントのロジックがより明確かつ管理しやすくなりました。

Vue 3を活用することで、開発者は近代的かつ高速なWebアプリケーションを効率的に構築できます。

ServBay統合環境でVue.jsプロジェクトを作成・実行する

この記事では、ServBayのNode.js環境を利用し、Vue.jsプロジェクトの作成と実行手順を紹介します。ServBayのWebサイト機能を使い、Webサーバーの設定、リバースプロキシや静的ファイル配信によるローカルアクセスを行います。

事前準備

作業を始める前に、以下の準備が完了していることを確認してください。

1. ServBayのインストール: ServBayローカル開発環境をインストール済みであること。
2. Node.jsパッケージのインストール: ServBayのパッケージ管理機能よりNode.jsパッケージをインストール済みであること。詳しくはServBayでのNode.jsのインストールと利用方法を参照してください。

Vue.jsプロジェクトの作成

1. プロジェクトの初期化

   まずはターミナルを起動し、ServBay推奨のWebサイトディレクトリへ移動します。そこからnpm create vue@latestコマンドで新しいVue.jsプロジェクトを初期化します。@latestを付けることで、常に最新のVue CLIまたはcreate-vueツールが使用され、通常はVue 3プロジェクトが作成されます。

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   画面の指示に従いプロジェクト名（例: servbay-vue-app）を入力し、TypeScriptやVue Router、Piniaなど必要な機能の有無を選択してください。例として以下の構成を推奨します。

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # 必要ならYesを選択
   ✔ Add JSX Support? … No # 必要ならYesを選択
   ✔ Add Vue Router for Single Page Application development? … Yes # Yes推奨
   ✔ Add Pinia for state management? … No # 必要ならYesを選択
   ✔ Add Vitest for Unit testing? … No # 必要ならYesを選択
   ✔ Add an End-to-End Testing Solution? … No # 必要ならYesを選択
   ✔ Add ESLint for code quality? … Yes # Yes推奨
   ✔ Add Prettier for code formatting? … Yes # Yes推奨
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # 必要に応じて

2. 依存パッケージのインストール

   プロジェクト初期化後、新しいディレクトリservbay-vue-appに移動し、npm installコマンドで全依存パッケージをインストールします。

   cd servbay-vue-app
   npm install

サンプルコンテンツの編集（任意）

プロジェクトが正しく動作しているか確認するために、src/App.vueファイルを編集し、デフォルト内容を"Hello ServBay!"に変更できます。

プロジェクトのsrc/App.vueに次のように記述してください：

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>これはServBayで動作するVue.jsアプリです。</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>

開発環境のセットアップ（リバースプロキシ使用）

Vueプロジェクト開発時は、ViteやWebpackによるローカル開発サーバーが起動し、ホットモジュールリロード（HMR）などの開発支援機能を利用できます。ServBayは、ローカルの独自ドメインからこの開発サーバーへリバースプロキシを設定できます。

1. 開発サーバーの起動

   プロジェクトルートで下記コマンドを実行し開発サーバーを起動します。--portオプションでポート（例: 8585）が指定でき、他アプリと重複しないことを確認してください。

   npm run dev -- --port 8585

   ターミナル上に、開発サーバーが指定ポート（例: http://localhost:8585）で起動した旨が表示されます。

2. ServBayのリバースプロキシサイト設定

   ServBayアプリ画面を開き、Webサイトセクションへ進みます。新しいWebサイトを追加し、タイプはリバースプロキシを選択します：

   • 名前: My first Vue dev site（分かりやすい名前を推奨）
   • ドメイン: servbay-vue-dev.servbay.demo（または好みの.servbay.demoドメイン）
   • サイトタイプ: リバースプロキシ
   • ターゲットIP: 127.0.0.1
   • ターゲットポート: 8585（開発サーバー起動時のポートと同じ）

   設定を保存すると、ServBayは自動でWebサーバー（CaddyまたはNginx）の設定を更新し、servbay-vue-dev.servbay.demoへのリクエストをhttp://127.0.0.1:8585へ転送します。

   ServBayでNode.js開発サイトを設定する方法の詳細は、ServBayでNode.js開発サイトを追加する方法をご覧ください。

3. 開発モードでのアクセス

   ServBay Webサーバーが稼働していることを確認し、ブラウザで設定したドメインhttps://servbay-vue-dev.servbay.demoへアクセスします。

   ServBayのSSL証明書自動発行（ServBay User CAまたはServBay Public CA経由）により、HTTPSでローカル開発サイトへ安全にアクセスでき、実運用環境に近いテストが可能です。SSL証明書の設定詳細はServBayでのSSL証明書の利用方法をご参照ください。

   以上でブラウザにて、Vue開発サーバーが動作し、コード修正も即時反映（ホットリロード）が体験できます。

本番ビルドとデプロイ（静的サイトサービス利用）

Vue.jsプロジェクトの開発が完了したら、本番用に最適化されたビルドを作成します。本番ビルドではHTML、CSS、JavaScriptなどの静的ファイルが生成され、ServBayの静的サイト機能を使って手軽にローカル公開できます。

1. 本番用ビルドの実行

   プロジェクトルートで下記コマンドを実行してください：

   npm run build

   ビルド後、最適化された静的ファイルがdistディレクトリに生成されます（プロジェクトルート直下）。

2. 静的ファイルサービスの設定

   ServBayアプリのWebサイト画面へ進み、新規Webサイトを追加しタイプは静的を選択します：

   • 名前: My first Vue production site（分かりやすい名前を推奨）
   • ドメイン: servbay-vue-prod.servbay.demo（または好みの.servbay.demoドメイン）
   • サイトタイプ: 静的
   • サイトルート: プロジェクトのdistディレクトリまでの絶対パスを指定
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   設定後、ServBay Webサーバーはこのdistディレクトリ内の静的ファイルを直接配信します。

3. 本番モードでのアクセス

   ServBay Webサーバーが起動中か確認し、ブラウザで本番サイトのドメインhttps://servbay-vue-prod.servbay.demoへアクセスします。

   最適化済みVueアプリの本番ビルド版が表示され、高速なレスポンスが得られます。カスタムドメイン・自動SSL機能で安全かつ本番環境同等のプレビューが可能です。

注意事項

• ポートの競合: npm run devで指定した8585（または任意のポート）が他アプリで使用中の場合、コマンドはエラーになります。その場合は未使用ポートへ変更し、ServBayのリバースプロキシも同じ値に修正してください。
• ServBay Webサーバー起動: ServBayのWebサーバー（CaddyまたはNginx）が起動していないと、設定したドメインからサイトへアクセスできません。サーバー状態を必ず確認しましょう。
• ドメイン解決: ServBayは設定した.servbay.demoドメインを自動で127.0.0.1に解決します。他の独自ドメインを使う場合は、システムのhostsファイル編集やServBayのHosts Manager機能で正しいローカル解決ができるようにしてください。

まとめ

ServBayを利用することで、macOSやWindowsでNode.jsを含むローカル開発環境を簡単に構築でき、Vue.jsプロジェクトの開発・本番デプロイ管理も柔軟かつ効率的に行えます。Webサイト機能を活用すれば、リバースプロキシで開発サーバーアクセスや、本番静的ファイルの配信も速やかに設定可能で、自動SSL・独自ドメインの安全性も享受できます。これにより、ローカルVue.jsプロジェクトのセットアップや作業フローが大幅に簡略化されます。