2種類の異なるアプリケーションを同一サーバー内で共存させる方法

Next.jsとLaravelを1つのサーバー内に共存させたい

「Node.jsとRailsを共存させたいけど、80と443しか受け付けていないからポート番号が被って共存させられない」

このような複数のアプリケーションを同一サーバーに共存させたい悩みを解消するために、本記事ではWordpressとNext.jsを共存させる方法を紹介します。

本記事中では以下の意味で扱います。

サーバー：レンタルサーバーや物理的なサーバーのこと
アプリケーションサーバー：アプリケーションを用いて立ち上げて応答を受け付けられるサーバーのこと。例えばNext.jsサーバー、Wordpressサーバーのこと

前提
結論
リバースプロキシとは
本記事の構成の説明
設定手順
注意点
まとめ

前提

基本的な考えは1アプリケーション、1サーバーです。その方がシンプルでリソースやエラー監視などで保守・管理がしやすいからです。
また、本番で運用する際には考慮する点が多いので、その他の情報も参考にしてください。

ですが、知識自体を持っていることは必ず役に立ちます。

結論

さっそく結論を言うと、

リバースプロキシという仕組みを使います。

「example.comはWordpressサーバーへ」、「example.com/toolsはNext.jsサーバーへ」アクセスを振り分けるということが実現可能です。

リバースプロキシとは

出典：https://www.gate02.ne.jp/media/it/column_107/

リバースプロキシとは簡単に説明すると、「インターネットとサーバーの間に立ってくれる良いヤツ」のことです。間に立ってくれることで負荷分散やどのサーバーにアクセスさせるか（ルーティング）などを受け持ってくれます。

今回は「Apache」を使いますが、「Nginx」でもGCPの「Cloud Load Balancing」でも同様のことは実現可能です。

詳しく知りたい方は以下のサイト様が分かりやすいです。

プロキシサーバーとは？仕組みやメリット、使用上の注意点について解説

企業が安全なネットワーク環境を整えるにあたって、プロキシサーバーはとても役に立つものです。しかし、やみくもに運用すると、逆にリスクが高まってしまうケースもあります。導入を検討しているのであれば、具体的な役割を知っておく必要があります。

本記事の構成の説明

Apacheでリクエストを受けているWordpressサーバーを建てている状況から、Next.jsを導入する方法を説明します。

GCPのGCE上で1サーバーを借りている状況です。

今回のルーティングは以下の通りになることを想定しています。

example.com … WordPressサーバー
exmaple.com/next 配下 … Next.jsサーバー

設定手順

1. Next.jsを導入する

STEP1
サーバーにNode.js、npmの導入

SSHなどでサーバーに入ってから、Node.jsを導入します。
Node.jsを導入するとnpmも自動で入ります。
そのため、Node.jsを導入します。
自分は各LinuxディストリビューションからNode.jsのバイナリインストールする方法を使いました。

https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions
github.com
STEP2
Next.jsの導入
Next.jsを導入します。
Gitを使ってセットアップするのが基本だと思いますが、今回はマニュアルでセットアップします。
Bash
```
npm install next react react-dom
```
package.jsonを開いて、scriptsを追加します
package.json
```
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
```
STEP3
Next.jsを動かすファイルを作成
この辺りは公式を見た方が早いのでオススメです。

Getting Started: Installation | Next.js
Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.
nextjs.org

また、next.config.jsを設定します。
URLの構造は合わせた方がシンプルで考えやすいです。
next.config.js
```
module.exports = {
  assetPrefix: "/next",
  basePath: "/next",
};
```
STEP4
Next.jsサーバー起動
ビルドしてからNext.jsサーバーを起動します。
Bash
```
sudo npm run build
sudo npm run start
```
STEP5
Next.jsサーバーが起動していることを確認
curlで起動していることを確認します。
HTMLが帰ってくればサーバーが起動していることが分かります。
Bash
```
curl localhost:3000
```

このままでは外から3000番ポートにアクセスできないので、Apacheの設定を変えてアクセスできるようにします。

2. Apacheの設定

STEP1
proxyの設定を追加
/etc/apache2/sites-enabled/000-default.confに（適宜サーバーによって読み取ってください）以下の設定を追加します。

/next と /next/がある理由は、/next と /next/ と /next/**/*をカバーするために入れています。
Bash
```
ProxyRequests Off
ProxyPreserveHost On
ProxyPass /next/ http://localhost:3000/next/ keepalive=On
ProxyPassReverse /next/ http://localhost:3000/next/
ProxyPass /next http://localhost:3000/next keepalive=On
ProxyPassReverse /next http://localhost:3000/next
```
URLの構造は合わせた方がシンプルで考えやすいです。

また、ProxyPassを有効にするためには、mod_proxyのApacheモジュールを読み込む必要があります。
STEP2
再起動
以下のコマンドでApacheを再起動します。
Bash
```
sudo systemctl reload apache2
```

エラーになる場合は

Webページにアクセスしてエラーが出る場合は、/var/log/apache2/error.logにエラー内容が書かれていることがあります。

また、sudo a2ensiteで有効にする必要があるかもしれません。

注意点

この構成を取る時の注意点やデメリットが以下の通りです。

自動起動の設定が必要

このままではサーバーを再起動したときに、Next.jsが自動起動しません。
それらの設定も必要になります。

少し複雑になる

1アプリケーション：1サーバーのような構成と比べて少し複雑になります。

そのため、

スケールの設定が大変
リソース管理の予測が難しい
エラーログの取得がしづらい
両方起動してからアクセスを流す考慮

この辺りの設定が大変です。

起動時間が遅くなる

1サーバーに2種類のアプリケーションサーバーを入れているので、もちろん起動するのに時間がかかります。
自動スケール設定の場合起動時間が遅いと間に合わないことがあります。

まとめ

本記事ではリバースプロキシを用いて、異なるアプリケーションを動くようにしてみました。

本番では今回のようなアプリケーションが動いているサーバー内でルーティングを行わずに、前段にもう一つサーバーを用意するのが一般的かと思われます。

しかし、「費用をなるべく抑えたい」、「古くから稼働しているサーバーのため大きな変更を加えられない」など、用途によっては使いようがあるので、実現可能であることの知識として持っておくと損することはないと思います。