ServBay

日本語

English
简体中文
繁體中文
Español
العربية
Português
Русский
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

日本語

English
简体中文
繁體中文
Español
العربية
Português
Русский
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

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 です。ローカル開発用プロジェクトを配置することが推奨されています。ターミナルアプリを開き、以下のコマンドでディレクトリに移動します。

    bash
    cd /Applications/ServBay/www

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

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

    bash
    npx create-nuxt-app servbay-nuxt-app

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

    bash
    ? 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. プロジェクト依存パッケージのインストール

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

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

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

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

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

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

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

  2. ファイル内容を編集

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

    html
    <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 を指定していますが、未使用の任意ポートも利用可能です。

    bash
    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 ディレクトリ）。

    bash
    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開発をより効率化する一助となれば幸いです！