Node.js + Express環境構築 〜開発からXserverに公開まで〜

更新日：2025/03/10

はじめに

Node.jsとExpressを使ったWeb開発は、JavaScriptの知識だけで前後端のプログラミングができる点が魅力です。本記事ではExpress.jsフレームワークの基本概念から、開発環境のセットアップ、さらに本番環境へのデプロイまでを一貫して解説します。

Webアプリケーション開発を始めたばかりの方や、すでに開発はできるけれど本番環境への公開に不安がある方にとって、実践的なガイドとなることを目指しています。

Express環境のセットアップ

Node.jsのインストール

まずはNode.jsの公式サイトから、推奨版（LTS版）をダウンロードしてインストールします。インストール後、ターミナルで以下のコマンドを実行して正常にインストールされたことを確認しましょう。

node -v
npm -v

Express Generatorの導入

Express Generatorは、Expressアプリケーションの雛形を素早く作成するためのツールです。以下のコマンドでグローバルにインストールします。

npm install -g express-generator

プロジェクトの作成と基本構造

Express Generatorを使って新しいプロジェクトを作成します。ここではEJSをテンプレートエンジンとして使用します

express --view=ejs myapp
cd myapp
npm install

または、現在のディレクトリにファイルを生成する場合：

express --view=ejs .
npm install

このコマンドにより、以下のような構造のプロジェクトが生成されます：

myapp/
├── app.js                 # アプリケーションのメインファイル
├── bin/
│   └── www                # 起動スクリプト
├── package.json           # プロジェクト情報と依存関係
├── public/                # 静的ファイル格納フォルダ
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
│       └── style.css
├── routes/                # ルーティングロジック
│   ├── index.js
│   └── users.js
└── views/                 # ビューテンプレート
    ├── error.ejs
    └── index.ejs
Express.jsプロジェクトの基本構造 app.js アプリケーションの中心 routes/ ルーティング定義 bin/www 起動スクリプト views/ テンプレートファイル public/ 静的ファイル package.json 依存関係と設定 Express Generatorで生成される主要ファイルとディレクトリ それぞれのファイルが特定の役割を持ち、MVCパターンに似た構造になっています

Express.jsの基本的な仕組み

ExpressとWebサーバーの違い

ExpressはWebサーバーそのものではなく、Webアプリケーションフレームワークです。両者の違いを理解することが重要です：

  • Webサーバー（Apache, Nginx）：HTTPリクエストを受け付け、静的ファイルを配信することが主な役割。プロセス管理やセキュリティ機能も提供。
  • Express：Node.js上で動作するフレームワークで、動的なコンテンツ生成、APIの構築、データベース連携などアプリケーションロジックの実装に特化しています。

実運用時は、Webサーバー（Nginx/Apache）がフロントエンドとして動作し、Expressがバックエンドのアプリケーションロジックを担当するという構成が一般的です。

ルーティングロジックの仕組み

ルーティングとは、特定のURLとHTTPメソッド（GET, POST, PUT, DELETEなど）の組み合わせに対して、どの処理を実行するかを定義する仕組みです。

// routes/index.js の例
const express = require('express');
const router = express.Router();

// GETリクエストが「/」に来た時の処理
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

// GETリクエストが「/about」に来た時の処理
router.get('/about', function(req, res, next) {
  res.render('about', { title: 'About Us' });
});

module.exports = router;
Expressのリクエスト・レスポンスフロー クライアント ブラウザ HTTP リクエスト GET /users Express アプリケーション ミドルウェア 1. ロギング 2. リクエスト解析 3. 認証 app.use(express.json()), app.use(cookieParser()) など ルーティング app.use(‘/users’, usersRouter); router.get(‘/’, userController.getUsers); コントローラー処理 function(req, res) { res.render(‘users’, { users: userList }); } HTTP レスポンス HTML/JSON/etc. クライアント ブラウザ Expressアプリケーションでのリクエスト処理の流れ リクエストはミドルウェア層を通過し、適切なルートにマッチングされて処理されます

Express Generatorで生成されたプロジェクトでは、ルーティングロジックはroutesフォルダに配置され、app.jsでそれらが統合されます。

開発環境での作業フロー

npm startでの起動

開発環境では、以下のコマンドでアプリケーションを起動します：

npm start

これにより、Express Generatorで生成されたpackage.jsonに定義されたスクリプトが実行されます。

"scripts": {
  "start": "node ./bin/www"
}

起動すると、デフォルトでは3000番ポートでサーバーが立ち上がり、ブラウザでhttp://localhost:3000にアクセスして確認できます。

開発時の便利なツール

開発効率を上げるために、ファイルの変更を検知して自動的にサーバーを再起動してくれるnodemonを使うことをお勧めします。

npm install -g nodemon
nodemon ./bin/www

または、package.jsonに開発用スクリプトを追加する方法もあります：

"scripts": {
  "start": "node ./bin/www",
  "dev": "nodemon ./bin/www"
}

これで、npm run devコマンドで開発モードでの起動が可能になります。

開発環境と本番環境の比較 開発環境 開発者のPC 直接コードを編集・テスト localhost 実行コマンド npm start nodemon ./bin/www 変更を検知して自動再起動 動作特性 • フォアグラウンドで実行 • ログが直接ターミナルに表示 • エラーの詳細情報が表示される • NODE_ENV=development 本番環境 レンタルサーバー / クラウド SSH接続でリモート管理 yourdomain.com 実行コマンド pm2 start ./bin/www –name “myapp” pm2 startup && pm2 save プロセスマネージャーで管理 動作特性 • バックグラウンドで実行 • Nginx/Apacheとリバースプロキシ連携 • クラッシュ時に自動再起動 • NODE_ENV=production 開発環境と本番環境では実行方法やツール、設定が大きく異なります

本番環境へのデプロイ

レンタルサーバーへのSSH接続

レンタルサーバーにアプリケーションをデプロイするには、まずSSHでサーバーに接続します：

レンタルサーバーでのExpress公開フロー 開発環境 (ローカルPC) Express アプリケーション $ express –view=ejs myapp $ npm install $ npm start (開発確認) デプロイ (Git/SCP/FTP) レンタルサーバー環境 SSH接続 $ ssh username@your-server.com 1. Node.js環境確認・インストール $ node -v $ npm -v 2. アプリケーションインストール $ cd ~/myapp $ npm install 3. 環境設定 $ export NODE_ENV=production $ export PORT=3000 4. PM2でアプリケーション起動 $ npm install -g pm2 $ pm2 start ./bin/www –name “myapp” $ pm2 startup && pm2 save 5. Webサーバー (Nginx/Apache) 設定 リバースプロキシ設定 (80→3000) $ sudo systemctl restart nginx エンドユーザー Webブラウザ http://yourdomain.com (ポート80/443でアクセス) PM2を使うことでNode.jsプロセスが常駐し、サーバー再起動時にも自動的に起動します 
ssh username@your-server.com

Nodebrewをインストールします。

curl -L git.io/nodebrew | perl - setup
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
  0     0    0     0    0     0      0      0 --:--:--  0:00:01 --:--:--     0
100 26039  100 26039    0     0  12526      0  0:00:02  0:00:02 --:--:-- 12526
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

パスを通す

Nodebrewへのパスを通します：

vi ~/.bash_profile

エディタが開いたら、以下の行を追加します：

vi ~/.bash_profile
Xserverでのパスの通し方ガイド ステップ1: SSH接続 $ ssh ユーザー名@サーバーのホスト名 ステップ2: .bash_profileを編集 $ vi ~/.bash_profile # User specific environment and startup programs PATH=$PATH:$HOME/bin export PATH=$HOME/.nodebrew/current/bin:$PATH この行を追加 ステップ3: 編集を保存 Escキーを押してから :wq と入力しEnterキーを押す ステップ4: 設定を反映 $ source ~/.bash_profile 正しくパスが通ったか確認: $ which node または: $ echo $PATH

エディタ上で「i」キーを押して挿入モードに入ります（画面下部に「– INSERT –」と表示されます）

Windows: 右クリック または Shift+Insert Mac: Command+V

保存して終了

  • 「Esc」キーを押してコマンドモードに戻ります
  • :wqと入力し、Enterキーを押します（writeして終了という意味）
viエディタでの操作方法 – 視覚的ガイド # .bash_profile # User specific environment and startup programs PATH=$PATH:$HOME/bin export PATH=$HOME/.nodebrew/current/bin:$PATH ~ ~ — INSERT — 基本モード 1. コマンドモード (デフォルト) ・移動: 矢印キー ・削除: x (一文字), dd (一行) ・コピー: yy (一行) ・貼り付け: p 2. 挿入モード ・開始: i キー ・終了: Esc キー ・テキスト入力可能 パス設定の操作手順 1. ファイルを開く $ vi ~/.bash_profile 2. 挿入モードに入る i キーを押す 3. パス設定を追加 export PATH=$HOME/.nodebrew/current/bin:$PATH 4. 保存して終了 Esc → :wq → Enter ※保存せずに終了: Esc → :q! → Enter

保存して閉じたら、変更を反映させます：

source ~/.bash_profile

これでNodebrewのパスが正しく通りました。次のコマンドでパスが通っていることを確認できます：

echo $PATH

PATH内に「.nodebrew/current/bin」が含まれていれば成功です。

Node.jsのインストール
安定版のNode.jsをインストールします：

nodebrew install stable
Fetching: https://nodejs.org/dist/v22.14.0/node-v22.14.0-linux-x64.tar.gz
######################################################################## 100.0%
Installed successfully

nodebrew use v22.14.0
use v22.14.0

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.jsバージョン(v22.14.0)がXserverの環境で動作するために必要なライブラリバージョンが見つからないという問題です。

古いバージョンのNode.jsをインストール

nodebrew use v17.6.0
use v17.6.0
node -v
v17.6.0

Expressのインストール

# パッケージのインストール (Node.js v12以上の場合)
npm init -y
npm install express@4.17.1

PM2を使ったアプリケーション管理

PM2は、Node.jsアプリケーションを本番環境で実行・管理するためのプロセスマネージャーです。

# PM2のインストール
npm install -g pm2

# アプリケーションの起動
pm2 start ./bin/www --name "myapp"

# アプリケーション一覧の表示
pm2 list

# アプリケーションの再起動
pm2 restart myapp

# ログの表示
pm2 logs myapp

# サーバー再起動時の自動起動設定
pm2 startup
pm2 save
Express と Webサーバーの連携 本番サーバー環境 インターネット Webサーバー Nginx / Apache 静的ファイル配信 リバースプロキシ PM2 プロセスマネージャー Express.js アプリケーションロジック 動的コンテンツ生成 データベース MongoDB / MySQL など HTTP(S) 80/443 監視・管理 動的リクエスト localhost:3000 本番環境では、Webサーバーがフロントエンドとしてリクエストを受け、 Expressアプリケーションはバックエンドとしてアプリケーションロジックを処理

PM2の主な利点：

  • アプリケーションのクラッシュ時に自動再起動
  • ログの管理と確認が容易
  • 複数のアプリケーションインスタンスを実行可能（ロードバランシング）
  • CPU・メモリ使用率のモニタリング

Webサーバーとの連携

実運用では、NginxやApacheなどのWebサーバーをフロントエンドとして使用し、Expressアプリケーションにリクエストをプロキシすることが一般的です。

Apacheでのバーチャルホスト設定

Apacheを使用する場合は、まず必要なモジュールを有効化します：

sudo a2enmod proxy
sudo a2enmod proxy_http

次に、バーチャルホスト設定ファイルを作成します：

<VirtualHost *:80>
    ServerName yourdomain.com
    ServerAlias www.yourdomain.com
    
    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
    
    ErrorLog ${APACHE_LOG_DIR}/myapp-error.log
    CustomLog ${APACHE_LOG_DIR}/myapp-access.log combined
</VirtualHost>

設定を有効化し、Apacheを再起動します：

sudo a2ensite myapp.conf
sudo systemctl restart apache2

環境変数の管理

本番環境では、適切な環境変数の設定が重要です：

sudo a2ensite myapp.conf
sudo systemctl restart apache2

または、PM2を使用する場合：

pm2 start ./bin/www --name "myapp" --env production

参考サイト

【2分で】XserverにNode.jsを導入する簡単な方法【レンタルサーバー】
https://babl.tech/blog/node-js-on-rental-server

新規記事

すべてを見る
人気記事ランキング
ピックアップ記事
話題のキーワードから探す