Xserver VPSにNode.jsの環境を構築する方法!HTTPサーバーを立ててExpressをインストールするまで

Xserver VPSにNode.jsの環境を構築する方法

本ページはプロモーションが含まれています

今回はXserver VSPを使ってNode.jsの実行環境を構築していきます。

Xserver VSPにはNode.jsの実行環境を簡単にVPSに構築してくれるアプリイメージが用意されていますが、今回はそちらは使用せず一から構築していこうと思います。

【12月16日17:00まで】月額実質415円〜!
半額キャッシュバックキャンペーン

Xserver VPSの公式サイトはこちら
目次

Node.jsのアプリイメージを使用しない理由

Xserver VPSのOS・アプリイメージ一覧
Xserver VPSのOS・アプリイメージ一覧

構築の容易さという点ではアプリイメージを使用した方が圧倒的に優位なのですが、試してみたところ、以下の2点が気になったので今回は見送りました。

  • Node.jsのバージョン管理ツールが用意されていない
  • Webサーバーは自分でインストールする必要がある

まず、私が確認したところNode.jsのバージョン管理ツールが用意されていませんでした。

Node.jsの環境構築にバージョン管理ツールは当然欲しいところなので、自分でインストールしても良いのですが、だったらそのままNode.js自体も自分でインストールした方が良いよねとなります。

また、Node.jsでHTTPサーバーを立ち上げたいので、Webサーバーを用意したいのですが、アプリイメージにはWebサーバーは組み込まれていませんでした。

上記のような理由からアプリイメージで作った環境を理解する工数も考えると一から自分で環境構築したほうが後々楽かなと判断しました。

Xserver VPSを契約

Xserver VPSの契約がまだの方は以下の手順で申し込みができます。

【12月16日17:00まで】月額実質415円〜!
半額キャッシュバックキャンペーン

Xserver VPSの公式サイトはこちら

Xserver VPSに申し込む

まだXserver VPSを契約していない方は、Xserver VPSの公式サイトから申し込み手続きをします。

公式サイトの「お申し込みはこちら」をクリックしてください。

すでにXserver VPSをお申し込み済みの方はOS再インストールから好きなOSを選んでください。

OS再インストールを行うと運用中のサーバーは一度リセットされてしまいます。申し込んでいるサーバーで別のアプリケーションを運用中の方は新しくサーバーを追加申し込みしてください。

Xserver VPSの申し込みボタン
Xserver VPSの申し込みボタン

すでにXserverアカウントを持っている方は「ログイン」初めて申し込む方は「すぐにスタート!新規お申込み」をクリックしてください。

お申し込みフォームの選択ボタン
お申し込みフォームの選択ボタン

申し込みフォームが表示されます。

お客様情報を入力する

Xserverアカウントを作成するために、お客様情報を入力します。

必要項目を入力しましょう。

お客様情報の入力画面
お客様情報の入力画面

入力が完了したら、「次へ進む」をクリックしてください。

続いて、本人認証のために確認コードがメールで送られます。

Xserverから届いた確認コード
Xserverから届いた確認コード

メールを確認して、確認コードを入力しましょう。

確認コードの入力画面
確認コードの入力画面

最後に入力内容を確認して、問題がなければ「この内容で登録しサーバー申し込みへ進む」をクリックします。

Xserverアカウントの確認画面

これでXserverアカウントの作成は完了です。

お申し込み内容を入力する

続いて、VPSの申し込みをします。

こちらも必要項目を入力していきます。

Xserver VPSのお申し込み画面
Xserver VPSのお申し込み画面

今回は「CentOS」を使用します。皆さんはお好きなOSを選択してください。

rootパスワードは後ほど必要になりますので、忘れないようにどこかに控えておきましょう。

入力が完了したら、「お申し込み内容を確認する」をクリックしてください。

確認画面で申し込み内容を確認します。

Xserver VPSのお申し込み確認画面
Xserver VPSのお申し込み確認画面

問題がなければ、「お支払いへ進む」をクリックしてください。

お支払い情報を入力する

支払い設定を行います。

Xserver VPSではクレジットカード決済とあと払い(ペイディ)に対応しています。

お支払い設定画面
お支払い設定画面

支払い方法を選択して、「決済画面へ進む」をクリックします。

クレジットカード情報の入力画面
クレジットカード情報の入力画面

クレジットカード情報を入力して、「確認画面へ進む」をクリックしてください。

クレジットカード払いの確認画面
クレジットカード払いの確認画面

内容を確認して、問題がなければ「支払いをする」をクリックしてください。

これでXserver VPSの申し込みは完了です。

SSH接続してみる

VPSの契約が完了して、サーバーの起動状態を確認したら、SSH接続してみます。

ssh root@{IPアドレス}

IPアドレスはVPS管理ページに記載されています。

パスワードはVPSのお申し込み時に設定した「rootパスワード」です。

Xserver VPSのVPSパネル
Xserver VPSのVPSパネル

今回はNode.jsの環境構築することに重きを置いていますので、rootログインの禁止や鍵交換方式の認証設定などSSH周りの設定は省略します。

ログインできたら何はともあれパッケージを更新しておきます。

yum update

Nginxインストール

今回はWebサーバーにNginxを選びました。

yum install epel-release
yum install nginx
systemctl start nginx
systemctl enable nginx

Nginxの設定

Nginxの設定ファイルにproxy_passを追加します。

vim /etc/nginx/conf.d/default.conf
server {
 client_max_body_size 50M;
 listen 80;
 server_name IPアドレス;
 location / {
  proxy_pass http://localhost:3000;
 }
}

Nginxを再起動します。

systemctl restart nginx

ポート解放

ポート解放はXserver VPSの管理画面から行います。

VPS管理の「パケットフィルター設定」を開いてください。

パケットフィルター設定画面
パケットフィルター設定画面

「パケットフィルター設定を追加する」から開放するポートを追加できます。

「フィルター」から「Web」を選択し、80番ポートを開放します。

※すでにポート解放を設定されている方は不要です。

ファイアウォール設定

続いて、ファイアウォールの設定をします。

ファイアウォールを有効化しておきます。

systemctl enable firewalld

ファイアウォールを起動します。

systemctl start firewalld

httpサーバーにファイアウォールを設定します。

firewall-cmd --add-service=http --permanent
firewall-cmd --reload

Node.jsインストール

Node.jsをインストールしていきます。

今回はバージョン管理にVoltaを使用していきます。

Voltaインストール

公式サイトの手順に従ってVoltaをインストールします。

curl https://get.volta.sh | bash

以下のメッセージが表示されるとセットアップ完了です。

success: Setup complete. Open a new terminal to start using Volta!

一度ターミナルを開き直し、Voltaコマンドを実行してみます。

volta

無事にVoltaをインストールすることができました。

Volta 1.1.1The JavaScript Launcher ⚡

Node.jsをインストール

Node.js本体をインストールします。

バージョン指定してNode.jsをインストールしたい方は、installオプションにnode@バージョン番号を付けてください。

volta install node

無事Node.jsをインストールすることができました。

success: installed and set node@20.11.0 (with npm@10.2.4) as default

コマンドからNode.jsを実行してみる

Node.jsが動作するかコマンドから確認しています。

ドキュメントルートに移動します。

cd /usr/share/nginx/html

テスト用に適当なファイルを作成します。

vim index.js

index.jsにconsole.infoだけ書いてみます。

console.info("Hello World")

確認してみます。

node index.js

しっかり動作していますね。

Node.jsからNginxを起動する

Node.jsからNginxを起動します。

同じ階層にapp.jsを作成してください。

vim app.js

httpサーバーを起動させるコードはNode.js公式サイトのものをそのまま使用します。

const http = require('node:http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
 res.statusCode = 200;
 res.setHeader('Content-Type', 'text/plain');
 res.end('Hello World');
});
server.listen(port, hostname, () => {
 console.log(`Server running at http://${hostname}:${port}/`);
});

起動します。

node app.js

ブラウザでIPアドレスにアクセスしてみます。

しっかり表示されました。

Nodeをデーモン化する

この状態だとサーバーを起動するにはSSH接続して実行し続けないといけないので、デーモン化してバックグラウンドで実行させます。

今回はPM2を使用します。

グローバルにインストールしてください。

npm install -g pm2

デーモンとして実行します。

pm2 start app.js

これで実行環境を永続化できました。

Expressインストール

Expressもインストールしておきます。

npm install -g express
npm install -g express-generator

サンプルアプリを作成します。

express sample_app
cd sample_app
npm install

このままExpressを起動すると3000番ポートはすでに使用されていますと怒られるので、3000番ポートを一度強制終了します。

3000番ポートを使用しているプロセスを確認するため、lsofをインストールします。

yum install lsof

インストールができたら、プロセスを確認します。

lsof -i:3000

プロセスIDを調べて、killします。

kill -9 {PID}

npm startで起動します。

npm start

ブラウザでIPアドレスにアクセスしてみます。

しっかり表示されました。

まとめ

Xserver VPSにNode.jsの実行環境を構築してみました。

今回はテストとして簡単なアプリを動かしてましたが、手元のNode.jsアプリをデブロイしたい場合はドキュメントルートにデプロイして同じようにHTTPサーバーを立てれば動くはずです。

今回の記事が少しでも誰かの役に立てれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コードゲーマーのアバター コードゲーマー サーバーチョイス 編集者

Web開発歴7年のフリーランスエンジニア。大学在学中から教育系Webメディアを運営するスタートアップにて、Webディレクターとして従事。独立からこれまでに多くのコーポレートサイトやCRM、予約システムなどのシステム開発、オウンドメディア運営を経験。20以上のレンタルサーバーの使用経験を持つ。

趣味はゲーム・野球観戦で休日は友人とARKなどオンラインゲームに興じています。

目次