Node.js・React.jsのプロジェクトをデプロイする方法

Windows ＋　XAMPP　＋　VSCodeでアプリを開発。
GitHubへは同期済み。

これをCentOSにデプロイする手順のまとめ。

ドメインの取得と設定

freenomやお名前.comなどで独自ドメインを取得。

ドメイン名からサーバーのIPアドレスが解決できるように
DNSにAレコードを登録する。

CentOSサーバーでの作業

nginxの.confを設定

vi /etc/nginx/conf.d/example.com.conf

example.com.confのようなファイルを新規作成。

example.com.conf

server {
    listen 80;
    server_name example.com;
    root /home/user1/Projects/xxx/frontend/build;
    index index.html;

    allow 127.0.0.1;
    allow 192.168.1.1;
    deny all;

    location /api/ {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://localhost:10001;
    }
}

server_name・root・indexを設定し、
ブラウザで
http://example.com
へアクセスしたときに、
/home/user1/Projects/xxx/frontend/build/index.html
が表示されるようにする。

allowとdenyを使って、アプリを利用できるIPアドレスを限定する。

proxy_passを設定し、
http://example.com/api
へのアクセスを
http://localhost:10001
へプロキシーする。

http://example.comをフロントエンド用のURL、
http://example.com/apiをバックエンド用のURLとしている。

IPアドレスを制限して自分専用のアプリにする場合は、https化はしない。
Googleからもアクセスできないので、検索エンジンにはインデックスされない。

ファイアウォールの設定

現在のファイアウォールを確認1

firewall-cmd --list-all

実行結果

public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3 enp0s8
  sources:
  services: ftp http https ssh
  ports: 11000-11009/tcp
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:

アプリ用のポートを開放

firewall-cmd --add-port=10001-10002/tcp --permanent

10001と10002のポートを開放。

localhost:10001でアプリのバックエンドを
localhost:10002でアプリのフロントエンドをリッスンするための設定。

アプリ用のポートを閉じる

firewall-cmd --remove-port=10001-10002/tcp --permanent

ポート番号を間違えて設定した場合や、使わなくなってポートを閉じる場合は上記のコマンドを実行する

ファイアウォールを再起動

firewall-cmd --reload

ファイアウォールの設定をリロード。

現在のファイアウォールを確認2

firewall-cmd --list-all

実行結果

public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3 enp0s8
  sources:
  services: ftp http https ssh
  ports: 11000-11009/tcp 10001-10002/tcp
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:

バックエンド（Node.js）をデプロイ

バックエンド（Node.js）をCentOSにデプロイする方法

フロントエンド（React.js）をデプロイ

フロントエンド（React.js）をCentOSにデプロイする方法

foreverをcrontabで実行する

foreverをcrontabで実行する方法

目次