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

Nuxt.jsとは？

Nuxt.jsは、人気のVue.jsフレームワークを基盤としたオープンソースのフレームワークで、現代的で高性能なWebアプリケーションを構築するために特化しています。煩雑な設定を大幅に抽象化することで、開発者がビジネスロジックに集中しやすい設計となっています。Nuxt.jsは特にサーバーサイドレンダリング（SSR）に強みを持ちながら、強力な静的サイト生成（SSG）機能も用意されており、コンテンツリッチでSEOに強いWebサイト・アプリ構築に理想的な選択肢です。

Nuxt.jsの主な特長・メリット

• サーバーサイドレンダリング (SSR)：Vueページを事前にサーバーでレンダリングし、ファーストビューの表示速度を大幅に向上。ユーザー体験とSEO双方で効果を発揮します。
• 静的サイト生成 (SSG)：ビルド時に完全な静的HTMLファイルを生成。高速・高効率でデプロイも簡単。変化の少ないブログやドキュメントサイトに最適です。
• 自動コード分割：ルーティングごとにJavaScriptコードを自動分割し、ページアクセス時に必要なコードのみをロード。アプリ全体のパフォーマンスを劇的に向上させます。
• ファイルシステムベースのルーティング：pagesディレクトリの.vueファイルを元に自動的にルーティング設定を生成。ルーティング管理の手間を大幅に削減します。
• モジュール化：豊富なエコシステムが用意されており、さまざまな機能やサードパーティサービス（Axios、PWAサポート、CMS連携など）を簡単に組み込めます。
• 設定より規約遵守（Convention over Configuration）：ディレクトリ構造と命名規則に従うだけで煩雑な設定が不要です。
• 開発体験の最適化：ホットモジュールリプレースメント（HMR）やエラーレポートなど、開発効率を高める機能も充実しています。

これらの特徴により、Nuxt.jsは複雑で高性能な、SEOフレンドリーなWebアプリ開発を効率的にサポートします。

ServBayでNuxt.jsプロジェクトをセットアップ・実行する

このガイドでは、ServBayの強力なローカル開発環境（特にNode.jsパッケージとWebサイト管理機能）を活用し、Nuxt.jsプロジェクトを作成・設定・実行する方法を解説します。ServBay上での開発モード（リバースプロキシ）・本番モード（静的ファイル配信）の両設定について紹介します。

前提条件

作業を始める前に、以下の条件を満たしていることを確認してください。

1. ServBayアプリケーションが正常にインストール済みであること。
2. ServBay内でNode.jsパッケージをインストールし有効化していること。ServBayのコントロールパネル「パッケージ」タブから状態を確認・インストール可能です。
3. Node.js、npm（またはYarn/pnpm）、基本的なターミナルコマンド知識をお持ちであること。
4. （推奨）VS Codeなどのコードエディタがインストールされていること。

Nuxt.jsプロジェクトを作成する

ここでは create-nuxt-app 脚本を使い、Nuxt.jsプロジェクトを素早く初期化します。

1. ターミナルを開き、ServBayのWebサイトルートディレクトリへ移動する

   ServBayのデフォルトWebルートは /Applications/ServBay/www です。ローカル開発用プロジェクトを配置することが推奨されています。ターミナルアプリを開き、以下のコマンドでディレクトリに移動します。

   cd /Applications/ServBay/www

2. 新しいNuxt.jsプロジェクトを初期化

   npx create-nuxt-app コマンドで servbay-nuxt-app という名前のプロジェクトを作成します。npxはnpm 5.2以降に備わっており、グローバルインストール不要でnpmパッケージの実行ファイルを利用できます。

   npx create-nuxt-app servbay-nuxt-app

   プロンプトに従い、必要な設定を選んでください。下記は一例です。

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # パッケージマネージャー（NpmまたはYarn推奨）
   ? UI framework: None          # 必要に応じてUIフレームワーク選択
   ? Nuxt.js modules: Axios      # 必要に応じてNuxt.jsモジュール選択
   ? Linting tools: ESLint       # 必要に応じてLintingツール選択
   ? Testing framework: None     # 必要に応じてテストフレームワーク選択
   ? Rendering mode: Universal (SSR / SSG) # レンダリングモード。UniversalはSSRとSSG両対応
   ? Deployment target: Server (Node.js hosting) # 配置先。Serverはローカル開発やNode.jsサーバー運用向け
   ? Development tools: jsconfig.json (Recommended for VS Code) # お好みで開発ツール設定

3. プロジェクト依存パッケージのインストール

   作成したプロジェクトディレクトリへ移動し、選択したパッケージマネージャーで依存パッケージをインストールします。

   cd servbay-nuxt-app
   npm install
   # またはYarnの場合: yarn install
   # またはpnpmの場合: pnpm install

   インストールが完了するまで待ちます。

プロジェクトのトップページを修正する

動作確認を簡単にするため、トップページに簡単なテキストを表示させるよう編集します。

1. pages/index.vue ファイルを開く

   コードエディタで、プロジェクト内 pages/index.vue ファイルを開きます。

2. ファイル内容を編集

   下記のコードに置き換え、「Hello ServBay!」と表示されるようにします。

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   scoped属性をstyleタグに追加し、スタイルがこのコンポーネント内だけに効果を及ぼすようにしています。また、見た目も少し整えました。

ServBayで開発モードを実行する

Nuxt.jsの開発サーバーは通常ローカルの特定ポート上で起動します。ServBayのカスタムドメインやSSL証明書、80/443ポート統一アクセスを活用するため、ここではServBayのウェブサイト機能を用いてリバースプロキシ構成をします。

1. Nuxt.js開発サーバーを起動

   プロジェクトルートで下記コマンドを打ち、Nuxt.js開発サーバーを起動します。ここではポート 8585 を指定していますが、未使用の任意ポートも利用可能です。

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # またはYarnの場合: yarn dev --port 8585
   # またはpnpmの場合: pnpm run dev --port 8585

   サーバーが起動すると通常 http://localhost:8585 でアクセス可能となります。このターミナルのウィンドウはサーバー動作中は開いたままにしてください。

2. ServBayでウェブサイト構成（リバースプロキシ）をする

   ServBayコントロールパネルを開き、「ウェブサイト」タブへ移動。左下の「+」ボタンから新規ウェブサイト設定を追加します。

   • 名前：わかりやすい例として Nuxt.js Dev Site (Proxy) など
   • ドメイン：ブラウザからアクセスする予定のカスタムドメイン。例：nuxt-dev.servbay.demo （.servbay.demo はServBay推奨のサフィックスです）
   • ウェブサイトタイプ：リバースプロキシ (Reverse Proxy) を選択
   • IPアドレス：127.0.0.1（ローカルループバックアドレス）
   • ポート：Nuxt.js開発サーバー起動時の指定ポート。ここでは 8585

   設定完了後、「追加」または「保存」をクリック。ServBayが自動で構成を反映します。

   ServBayでNode.js開発サイト（リバースプロキシ利用）が必要な場合の詳しい手順はNode.js開発サイトの追加方法もご参照ください。

3. 開発モードのウェブサイトへアクセス

   ブラウザで登録したドメイン、例：https://nuxt-dev.servbay.demo にアクセスします。

   ServBayのリバースプロキシ機能を通じて、カスタムドメイン＆HTTPS（SSL）でローカルのNuxt.js開発サーバーにアクセスできます。SSL証明書はServBayが自動生成・設定（ServBay User CAが発行。ご利用のシステムがこのCAを信頼していることをご確認ください）。HTTPS開発は本番環境やService Workerテスト、セキュア文脈必須機能の試験にも適しています。

プロダクションビルドと静的ファイル配信

Nuxt.jsプロジェクトが完成し本番リリースまたは本番同様環境での確認をしたい場合、プロダクションビルドを実施します。Universalモードで静的Webサイトを生成する場合、nuxt generate または npm run export で静的ファイル生成が一般的です。

1. プロダクションビルドおよび静的ファイル生成

   プロジェクトルートで下記コマンドを順に実行してください。npm run build でコードをビルド、npm run export でルーティングに従う静的HTMLを出力（デフォルトは dist ディレクトリ）。

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # またはYarnの場合: yarn build && yarn export
   # またはpnpmの場合: pnpm build && pnpm run export

   完了後、プロジェクトディレクトリ内に dist フォルダが生成され、すべての静的ファイルが格納されます。

2. ServBayでウェブサイト構成（静的ファイル配信）をする

   ServBayコントロールパネルの「ウェブサイト」タブを開き、左下「+」ボタンで新規ウェブサイト設定を追加。

   • 名前：例 Nuxt.js Prod Site (Static)
   • ドメイン：本番環境用のカスタムドメイン（例：nuxt-prod.servbay.demo）
   • ウェブサイトタイプ：静的 (Static) を選択
   • ウェブサイトルート：Nuxt.jsが生成した静的ファイルディレクトリ。ここでは /Applications/ServBay/www/servbay-nuxt-app/dist

   設定後、「追加」または「保存」で反映。ServBayが自動で構成を更新します。

3. プロダクションモードのウェブサイトへアクセス

   ブラウザで設定した本番用ドメイン（例: https://nuxt-prod.servbay.demo）へアクセス。

   ServBayの高性能Webサーバー（CaddyまたはNginx/設定による）が dist ディレクトリの静的ファイルを直接配信します。静的コンテンツ提供には最適化されており、非常に高速なレスポンスを実現。同時に無料のSSL証明書とカスタムドメインにも対応しています。

まとめ

ServBayなら、Nuxt.jsプロジェクトのローカル開発・プレビュー環境を簡単に管理できます。ServBayのNode.jsパッケージで開発サーバーを運用し、リバースプロキシ機能をフル活用すれば、カスタムドメイン＆HTTPSで快適に開発・デバッグ可能です。開発が完了したら、そのまま静的ファイルを生成し、静的ウェブサイトとしてローカルで高性能プレビューも実現。ServBayの利便性と強力な機能を最大限に活かし、フロントエンド開発・テストのワークフローをシンプルにできます。本ガイドが皆様のNuxt.js開発をより効率化する一助となれば幸いです！