6月 2, 2025
Github, next, React, カラフルボックス , , , ,

カラフルボックスでNext.jsアプリを公開！手順と備忘録

こんにちは！今回は、レンタルサーバー「カラフルボックス」を利用してNext.jsで作成したアプリケーションを公開するまでの手順と、その過程で得た知見を備忘録としてまとめました。同じようにカラフルボックスでNext.jsアプリをデプロイしようとしている方の参考になれば幸いです。

完成したアプリケーションはこちらです: https://typing.tokiraku.com/

はじめに

Next.jsで開発したウェブアプリケーションを、手軽に使えるレンタルサーバーで公開したいと考え、今回はカラフルボックスを選択しました。ドキュメントを参考にしつつ、いくつか試行錯誤した点もあったため、その記録を残しておきます。

前提条件

  • Next.jsアプリケーションが開発済みであること。
  • GitおよびGitHubの基本的な操作がわかること。
  • SSHクライアントソフトが利用できること（ターミナルやPuTTYなど）。
  • カラフルボックスのアカウントを取得済みであること。

デプロイ手順

1. SSHキーの作成と登録

まず、カラフルボックスのサーバーにSSHで接続し、GitHubからリポジトリをクローンするためにSSHキーを作成・登録します。

  • SSHキーの作成: サーバーにSSH接続後、ssh-keygen コマンドでSSHキーペアを作成します。
  • 公開鍵の登録: 作成した公開鍵 (~/.ssh/id_rsa.pub など) の内容をコピーし、GitHubリポジトリの「Deploy Keys」または個人のアカウント設定の「SSH and GPG keys」に登録します。

詳細な手順は、カラフルボックスの公式ドキュメントが非常に参考になります。 カラフルボックスヘルプセンター: SSH接続でログインする

2. サーバーへの接続とリポジトリのクローン

SSHキーの準備ができたら、サーバーに再度SSH接続し、任意の場所にNext.jsアプリケーションのリポジトリをクローンします。

# 例: /home/<username>/ 配下にクローンする場合
cd /home/<username>/
git clone git@github.com:<your_github_username>/<your_repository_name>.git
# クローンしたプロジェクトディレクトリに移動
cd <your_repository_name>
# (もし特定のブランチを使用する場合)
# git checkout <ブランチ名>

今回は、cPanelのユーザーホームディレクトリ (/home/<username>/) 直下にリポジトリを配置しました。

3. Node.jsのパスの確認

カラフルボックスでは、Node.jsが標準的なパスとは異なる場所にインストールされている場合があります。私の環境では、以下のディレクトリにバージョンごとのNode.jsが存在していました。

  • /opt/alt/

この中に alt-nodejs[バージョン番号] (例: alt-nodejs18) のような名前でディレクトリがあり、実際のNode.js実行ファイルはその中の /root/bin/node になります。 後述する .htaccess の設定で、このパスを指定する必要があります。

当初、nodebrew を使用してNode.js環境を構築しようと試みましたが、ベースとなるライブラリのバージョンが古いなどの理由でうまく動作しませんでした。サーバー側のライブラリはroot権限がないと変更できないため、既存のNode.jsを利用する方針としました。

4. サブドメインの作成

カラフルボックスのコントロールパネル (cPanel) から、公開したいアプリケーション用のサブドメインを作成します。

例: nextapp.yourdomain.com

カラフルボックスヘルプセンター: サブドメインの設定方法

5. Next.jsアプリケーションのビルドとビルド済みファイルの配置（メモリ不足対策）

Next.jsアプリケーションを本番環境で動作させるためには、node_modules ディレクトリとビルド成果物である .next ディレクトリが必要です。

背景: サーバー上で npm run build (または yarn build) を実行した際に、メモリ不足のエラーが発生することが確認されています。この問題を回避するため、ローカル環境でビルドした node_modules ディレクトリおよび .next ディレクトリをサーバーに直接配置します。

手順:

  1. ローカル環境でのビルド:
    • ご自身のローカル開発環境で、対象のNext.jsプロジェクトのソースコードが最新の状態であることを確認します。
    • プロジェクトのルートディレクトリで、以下のコマンドを実行して依存関係をインストールし、本番用のビルドを実行します。npm install # または yarn install npm run build # または yarn build
    • これにより、プロジェクト内に node_modules ディレクトリと .next ディレクトリが最新の状態で生成されます。
  2. サーバーへのアップロード:
    • ローカル環境で生成された node_modules ディレクトリと .next ディレクトリを、サーバーにアップロードします。
    • アップロード先は、手順2でクローンしたプロジェクトディレクトリのルートです（例: /home/<username>/<your_repository_name>/）。
      • SCP、SFTP、rsyncなど、任意の方法でアップロードしてください。
    • カラフルボックスヘルプセンター: ファイルマネージャーのご利用方法

注意点:

  • この手順は、サーバーのスペックに起因するメモリ不足問題を回避するためのものです。サーバー環境が改善された場合は、サーバー上でのビルドを検討してください。
  • ソースコードに更新があった場合は、再度ローカルでビルドし、生成された node_modules と .next を再アップロードする必要があります（node_modules は依存関係に変更がなければ再アップロード不要な場合もありますが、基本的にはセットで管理することを推奨します）。
  • package.json, next.config.js, public ディレクトリなど、その他の必要なファイルもリポジトリ経由または同様の方法でサーバーに配置されていることを確認してください。

6. .htaccess の設定 (Phusion Passenger)

サブドメインのドキュメントルート（例: /home/<username>/public_html/<subdomain_directory>）に .htaccess ファイルを作成し、以下のように記述します。これは、Phusion Passengerを利用してNode.jsアプリケーションを動作させるための設定です。

<IfModule mime_module>
  PassengerAppRoot "/home/<username>/[クローンしたリポジトリのパス]"
  PassengerBaseURI "/"
  PassengerNodejs "/opt/alt/alt-nodejs[使用するNode.jsバージョン]/root/bin/node"
  PassengerStartupFile "app.js" # または Next.jsを起動するスクリプト
</IfModule>

設定の際の注意点:

  • PassengerAppRoot:
    • Next.jsアプリケーションのルートディレクトリ（package.json があるディレクトリ）の絶対パスを指定します。
    • "/home/<username>/[クローンしたリポジトリのパス]" の <username> は実際のサーバーのユーザー名に置き換えてください。
    • [クローンしたリポジトリのパス] は、手順2でクローンしたNext.jsプロジェクトのディレクトリ名（例: my-next-app）などを指定し、/home/<username>/ からの正しい絶対パスになるようにしてください。 (例: /home/youruser/my-next-app や /home/youruser/public_html/typing.tokiraku.com/my-next-app-source など、実際の配置場所に合わせてください)
  • PassengerBaseURI: アプリケーションが応答するベースURI。通常は / で問題ありません。
  • PassengerNodejs:
    • 手順3で確認したNode.jsの実行ファイルのフルパスを指定します。
    • "/opt/alt/alt-nodejs[使用するNode.jsバージョン]/root/bin/node" の [使用するNode.jsバージョン] は、プロジェクトで使用するNode.jsのバージョン番号（例: 18, 20など、サーバーにインストールされているもの）に置き換えてください。サーバーのNode.jsのパスがこれと異なる場合は、正しいパスを指定してください。
  • PassengerStartupFile:
    • Next.jsアプリケーションを起動するエントリーポイントとなるファイル名を指定します。
    • Next.jsの標準的な起動は直接指定できないため、後述の app.js という名前のファイルを作成し、それを指定します。

app.js の作成

PassengerAppRoot で指定したディレクトリ（Next.jsプロジェクトのルート）に、app.js という名前で以下の内容のファイルを作成します。

// app.js
const next = require('next');
const http = require('http');

// NODE_ENV が 'production' でない場合を開発モードとみなします。
// Passenger は通常 NODE_ENV を 'production' に設定します。
const dev = process.env.NODE_ENV !== 'production';
const hostname = 'localhost'; // Passenger がリッスンするホスト名

// Phusion Passenger はポートを環境変数 PORT 経由で提供します。
// 提供されない場合のフォールバックとして 3001 を使用します。
const port = parseInt(process.env.PORT, 10) || 3001;

// Next.js アプリケーションのインスタンスを作成します。
// `dir` オプションはプロジェクトのルートを指定します。カレントディレクトリなので '.' です。
const app = next({ dev, hostname, port, dir: '.' });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  http.createServer(async (req, res) => {
    try {
      // Next.js のリクエストハンドラにリクエストを渡します。
      await handle(req, res);
    } catch (err) {
      console.error('Error handling request:', err);
      res.statusCode = 500;
      res.end('internal server error');
    }
  }).listen(port, (err) => {
    if (err) {
      console.error('Failed to start server:', err);
      process.exit(1); // エラーで終了
    }
    console.log(`> Next.js server listening on port ${port} via app.js (for Passenger)`);
  });
}).catch(err => {
  console.error('Error preparing Next.js app:', err);
  process.exit(1);
});

注意: 上記の app.js は実際に使用しているものです。

.htaccess と app.js を適切に設定し、ファイルがアップロードされていれば、サブドメインにアクセスすることでNext.jsアプリケーションが表示されるはずです。

詰まった点・注意点

  • node_modules と .next: サーバー上で直接ビルドするのではなく、ローカルでビルドして必要なモジュール一式をアップロードする方法が確実でした。サーバー上でビルドするとメモリが足りずにできませんでした。
  • Phusion Passengerの設定: PassengerStartupFile で指定するファイルは、単純に next start を実行するだけではPassengerがうまくプロセスを管理できない場合があるため、上記のようなラッパースクリプト (app.js) を用意する必要がありました。
  • エラーログの確認: うまく表示されない場合は、cPanelの「エラー」ログや、Passengerが生成するログ（通常はアプリケーションルートの logs/ ディレクトリなど）を確認すると手がかりが見つかることがあります。

まとめ

以上が、カラフルボックスでNext.jsアプリケーションを公開するまでの一連の手順と備忘録です。特にNode.jsのパス指定とPhusion Passengerの設定周りがポイントでした。 この記事が、これからカラフルボックスでNode.jsアプリケーション（特にNext.js）をデプロイしようとしている方の一助となれば幸いです。

Related Posts: