はじめに
Xserverで、Nuxtのプロジェクトをホストする方法をお伝えします。
Nuxt3でしか検証していませんが、おそらく他のNode.jsフレームワーク(Reactなど)でも動くはずです。
Xserverとは
日本国内で提供されている人気のレンタルサーバーサービスのことです。
同様のレンタルサーバーサービス(さくらのレンタルサーバーやConoHa WINGなど)でも、似たような手順で動くと思われます。
自分の環境
サーバー情報(ホスト名) : sv16xxx.xserver.jp, sv12xxx.xserver.jp
node環境の構築
方法1 nvmを使う
複数のバージョンのNode.jsを簡単にインストールし、切り替えられるnvmというツールを使います。
一番簡単でおすすめの方法です。
nvmのインストール
XserverにSSHで接続し、以下のコマンドを実行します。
基本的にはユーザーのホームディレクトリ(/home/ユーザー名)に必要なフォルダが作成されるため、どのディレクトリで実行してもよいです。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
nvmのREADME.md(GitHub)でコマンドを確認して、最新のnvmをインストールしてください。
下記のコマンドを実行して、バージョンが表示されたらインストール成功です。
bash # インストール後にシェルの再起動をしないと使えない(初回のみ)
nvm --version
nodeのインストール
下記のコマンドを参考に、必要なバージョンのnode.jsをインストールします。
nvm ls-remote # インストール可能なバージョンを表示
nvm install node # 最新のバージョンをインストール
nvm install --lts # 最新LTSのバージョンをインストール
nvm install 22 # 特定のメジャーバージョンをインストール
nvm install 22.17.1 # 特定のバージョンをインストール
下記のコマンドを参考に、インストールしたバージョンのnode.jsを有効化します。
nvm use node # 最新のバージョンを有効化
nvm use --lts # 最新のLTSバージョンを有効化
nvm use 22 # 特定のメジャーバージョンを有効化
nvm use 22.17.1 # 特定のバージョンを有効化
下記のコマンドを実行して、バージョンが表示されたらインストール成功です。
node -v
方法2 直接インスール
使いたいバージョンのnodejsのバイナリファイルを直接ダウンロードします。
自分でファイルを見つけなければなりませんが、バージョン管理が不要な場合、余計なファイルは生成されません。
nodeのインストール
下記サイトより、インストールしたいバージョンのnode.jsを探します。
ファイル名にlinux-x64を含むものが使えます。
見つけたら、ダウンロードして解凍します。
HOMEディレクトリで下記コマンドを実行してください。
※URLとファイル名は適宜書き換えてください。
wget https://nodejs.org/download/release/latest-v22.x/node-v22.15.1-linux-x64.tar.xz
tar xvf node-v22.15.1-linux-x64.tar.xz
続いてパスを通します。
次の内容を.bashrcへ追記します。
export PATH=~/node-v22.15.1-linux-x64/bin:$PATH
シェルを再起動し、インストールできているかを確認します。
bash
node -v
方法3 古い環境の場合
古いサーバーを利用している場合、上記2つの方法では次のようなエラーが発生して、v16.20.2以降のバージョンを動かすことができません。
$ node -v
./node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by ./node)
./node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by ./node)
./node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by ./node)
./node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by ./node)
./node: /lib64/libc.so.6: version `GLIBC_2.27' not found (required by ./node)
./node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by ./node)
./node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by ./node)
理由は、サーバーに標準で入っているC言語関連のライブラリのバージョンが低いためです。
通常は新サーバーに移行することで、ライブラリのバージョンが上がり解決します。
しかし、一部の環境(学生プランなど)ではサーバーの移行ができません。
古いサーバーでv16.20.2以降を利用する場合は、次のような方法が有効です。
Homebrewを入れてgccを入れ直してみたり、nodebrewを使ってみたりもしたのですが、少なくとも私の技術ではうまく行きませんでした。
node(unofficial)のインストール
Node.js unofficial-builds projectとは、公式には提供されていない、サポートが限定的なNode.jsのバイナリを提供する実験的なプロジェクトです。
古い環境でも使えるようなバージョンを提供しており、今回はこれを利用します。
利用するパッケージによっては、エラーが発生して利用できません。
例えば、libSQLは利用できませんでした。
下記サイトより、インストールしたいバージョンのnode.jsを探します。
ファイル名にlinux-x64-glibcを含むもののみが使えます。
見つけたら、ダウンロードして解凍します。
HOMEディレクトリで下記コマンドを実行してください。
※URLとファイル名は適宜書き換えてください。
wget https://unofficial-builds.nodejs.org/download/release/v20.17.0/node-v20.17.0-linux-x64-glibc-217.tar.xz
tar xvf node-v20.17.0-linux-x64-glibc-217.tar.xz
続いてパスを通します。
次の内容を.bashrcへ追記します。
export PATH=~/node-v20.17.0-linux-x64-glibc-217/bin:$PATH
シェルを再起動し、インストールできているかを確認します。
bash
node -v
ファイルの用意
Nuxtプロジェクトのフォルダをアップロードします。
場所は問わないのですが、public_html配下などの、直接公開される場所には置かないでください。
方法1 Git
パブリックリポジトリ
Gitコマンドを使い、GitHubなどから対象のリポジトリをクローンすることでコードをアップロードします。
クローンの方法は次のサイトなどを参考にしてください。
プライベートリポジトリ
プライベートリポジトリでは、ログインの代わりに使えるアクセストークンを使って、リポジトリをクローンします。
パーソナルアクセストークンの発行
基本的な手順については、下記サイトを参考にしてください。
ExpirationはNo expirationを推奨します。
Repository accessはOnly select repositoriesにして、クローン対象のリポジトリを選択します。
Permissionsは、Repository permissionsタブにある、ContentsをRead-onlyに設定します。
生成したパーソナルアクセストークンは、安全な場所にメモしておいてください。
リポジトリのクローン
基本的な手順については、下記サイトを参考にしてください。
git cloneコマンドは、github.comの直前に先ほどのパーソナルアクセストークンと@を含めた、下記コマンドを用います。
git clone https://YOUR-PERSONAL-ACCESS-TOKEN@github.com/YOUR-USERNAME/YOUR-REPOSITORY
方法2 FTP
FTPでXserverに接続して、必要なファイルをアップロードします。
後述するビルドをローカル環境で行い、生成された.outputフォルダだけをアップロードして使う方法もあります。
毎回手動でアップロードする手間はかかりますが、サーバーに余計なファイルを置きたくない場合はこちらがおすすめです。
ビルド
必要なパッケージをインストールしてビルドします。
cd Nuxtのrootディレクトリ
npm ci # 正確にインストールを行うため、npm installよりも本番環境に適している
npm run build
foreverという、nodeサーバーを継続的に動かすためのツールも、このタイミングでグローバルにインストールしましょう。
npm install -g forever@latest
サーバー開始&停止
以下のコマンドでサーバーを開始します。
forever start .output/server/index.mjs
.envファイルから環境変数を読み込む場合は、代わりに次のようにします。
forever start -c "node --env-file=.env" .output/server/index.mjs
停止などには下記のコマンドを参考にしてください。
forever list # 稼働中のnodeサーバー一覧を確認
forever stop id # 特定のnodeサーバーを停止(idに上のコマンドで確認したidを入れる)
forever stopall # 全てのnodeサーバーを停止
メンテナンス等でサーバーが再起動された場合、nodeサーバーは自動で開始しません。
その場合は上記のコマンド(forever start ...)を再び実行してください。
プログラムを更新した場合は、git pullなどでファイルを更新の上、サーバー停止→ビルド→サーバー開始の順でやり直してください。
同じポートを使って複数のnodeサーバーを立てることはできません。
ReverseProxyの設定
80、443ポートへきたアクセスをNuxtサーバーの3000番ポートへ転送するため、設定をします。
Apacheの設定フォルダをいじれる環境であればVirtualHostを書き換えるのですが、Xserverではその方法が使えないため.htaccessで設定します。
次のような.htaccessファイルを、対象ドメインのpublic_html配下に設置してください。
※環境に応じて適宜書き換えてください。
# DirectoryIndex(index.htmlへ飛ばす機能)を無効化
DirectoryIndex disabled
# RewriteEngineを有効化
RewriteEngine On
# /配下へのアクセスをlocalhost:3000/へリバースプロキシ
RewriteRule ^(.*)$ http://localhost:3000/$1 [P,L,QSA]
RewriteRule ^$ http://localhost:3000/ [P,L,QSA]
# バックエンドサーバーが必要とする場合にHostヘッダーを設定
RequestHeader set Host localhost:3000
# Locationヘッダーの修正（ProxyPassReverseの代替）
Header edit Location ^http://localhost:3000/(.*) https://example.com/$1
Nuxtはデフォルトで3000番ポートにて稼働しますが、環境変数にPORTを指定するとポートを変更できます。
その場合は、.htaccessも書き換えてください。
baseURLを変更する場合(http://localhost/sub/などがルートになる)、nuxt.config.tsを設定した上で、.htaccessを次のようにします。
対象ドメインのpublic_htmlの対象ディレクトリ配下に設置してください。
※環境に応じて適宜書き換えてください。
# DirectoryIndex(index.htmlへ飛ばす機能)を無効化
DirectoryIndex disabled
# RewriteEngineを有効化
RewriteEngine On
# /sub/配下へのアクセスをlocalhost:3000/sub/へリバースプロキシ
RewriteRule ^(.*)$ http://localhost:3000/sub/$1 [P,L,QSA]
RewriteRule ^$ http://localhost:3000/sub/ [P,L,QSA]
# バックエンドサーバーが必要とする場合にHostヘッダーを設定
RequestHeader set Host localhost:3000
# Locationヘッダーの修正（ProxyPassReverseの代替）
Header edit Location ^http://localhost:3000/sub/(.*) https://example.com/sub/$1
終わりに
これで、.htaccessを設置したURLにアクセスすれば、Nuxtで作成したサイトにアクセスできるはずです。
参考