TOP
記事一覧
Node.js + Express環境構築（Express Generatorの導入）〜開発からXserverに公開まで〜

Node.js + Express環境構築（Express Generatorの導入）〜開発から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 のアプリケーション生成プログラム
https://expressjs.com/ja/starter/generator.html

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

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の基本的な仕組み

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 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コマンドで開発モードでの起動が可能になります。

本番環境へのデプロイ

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

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

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

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

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

保存して終了

「Esc」キーを押してコマンドモードに戻ります
:wqと入力し、Enterキーを押します（writeして終了という意味）

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

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

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

検索

（例） debug search etc..
カテゴリー
- AWS
- CSS
- Docker
- Git
- Google Search Console
- JavaScript
- Next.js
- Node.js
- PHP
- Python
- SEO
- Snow Monkey
- Web制作
- WordPress
- 制作実績
- 未分類

新規記事

すべてを見る

人気記事ランキング

ピックアップ記事

Python

話題のキーワードから探す

Node.js + Express環境構築（Express Generatorの導入） 〜開発からXserverに公開まで〜