React/ExpressのアプリをVPSにデプロイするときにやること(apache2編)

はじめに

nginx環境では以前に実施済だったが、複数サーバーが起動しているapache環境で行った際のメモ。
nginx編は以下
https://weblion303.net/1899

今回はフロントエンドのアプリとサーバーサイドのアプリ(どちらもnode.js)をConohaのVPS(ubuntu18.4で既にapache2で稼働中)にデプロイするまでの方法。

Gitのリモートリポジトリを作成

ローカル環境から変更をpush→本番サーバーでpullするだけでアップデートが可能な状態を作っていくために作成。

私はbitbucketで作りました。
フロント、バッグそれぞれのソースコードをローカル環境からリモートリポジトリにpushし、本番サーバーの任意のディレクトリでcloneします。(例としてvar/www/front,var/www/apiにて作業)

sudo git clone https://****@bitbucket.org/***/***.git

後に変更を取り込む際はディレクトリ配下で以下コマンド

sudo git pull

フロントエンド側はreact.jsによるSPAなので、apacheのconfファイルでrewrite,またはbuildファイル下に.htaccessファイルを作って常にindex.htmlを返すように記述。(手軽に後者でやります)

.htaccessファイルはこんな感じ

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
</IfModule>

フロントエンドのサーバー設定

まずはフロントエンドがきちんとつながる状態を作ります。
先述したように既にほかのアプリケーションが稼働しているため、バーチャルホストの設定をします。
Apacheでのバーチャルホストの設定はこちら
https://weblion303.net/1336

apacheのコンフファイルを設定します。
/etc/apache2/site-availableにある000-defauld.confをコピーして複製してリネーム。

        ServerName ***.com
        ServerAlias www.***.com

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/front/build

予め取得したドメインへアクセスがあった場合、gitでpullした/var/www/frontの/build以下を参照するという指定。

同様にsslでのアクセスの場合も設定。

apacheを再起動

sudo systemctl restart apache2 

https://***.comへのアクセスでサーバー上の/var/www/front/build以下にあるreactアプリの起動が確認できればOK.

バックエンドアプリの設定

/var/www/api下にpullした状態から。

サブドメインを作り、expressで起動したサーバーにリバースプロキシをするようにします。
例としてapi.***.comを使用。

またapacheのコンフファイルを新しくコピーします。
/etc/apache2/site-availableにある000-defauld.confをコピーして複製してリネーム。

        ServerName api.***.com
        ServerAlias www.api.***.com
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/api
        ProxyPass / http://127.0.0.1:3000/
        ProxyPassReverse / http://127.0.0.1:3000/

api.***.comへのアクセスは/var/www/apiをルートとし、そこへのアクセスをexpressが起動しているポートに向けるという感じ。

このとき、http サイトにリバースプロキシするために必要なモジュールを有効化する。

sudo a2enmod proxy_http

SSLのconfも同様に設定
※あくまでもプロキシを行う先はhttpで起動しているexpressなので、SSLの設定ファイルもproxyPassはhttp://~でOK.

apacheを再起動。

apiのプロジェクト配下に移動し、npm iでパッケージをインストールし、npm startで起動してみる。

api.***.comへアクセスでサーバーのexpressに繋がればOK。

サーバーアプリを本番用に起動する。

clusterでマルチスレッド可を行う。
https://weblion303.net/2106

pm2でプロセスの永続化を行う。
Express(Node.jsアプリ)を本番環境向けにpm2で動かす