概要

フロントエンドをreact、バックエンドをslim frameworkで開発した際のデプロイ方法についてのまとめ。

前提

• webサーバはApache
• デプロイ先は1台のEC2
• ALBのドメイン名でアプリケーションにアクセスする
  • サブドメイン使えない
• ドメイン名は取得していない

以下のような構成

やりたいこと

一つのドメイン名（ALBのドメイン名）でフロントエンドとバックエンドアプリケーションを連携する。

実現方法

バックエンドアプリケーションをバックグラウンドで起動する

ドキュメントルートはフロントエンドアプリケーションに設定して、バックエンドへの通信はプロキシを設定することで実現する。そのためにはバックエンドアプリケーションをバックグラウンドで実行する必要がある。今回は、PHPのフレームワーク「slim」を使用しているため、PHPのビルドインサーバを利用する。
以下のコマンドでビルドインサーバを起動できる。

php -S 127.0.0.1:8000 -t public

そのままではバックグラウンドで起動しないため、コマンド末尾に&をつけて実行する。

php -S 127.0.0.1:8000 -t public &

Apacheの設定変更

バックエンドアプリケーションをバックグラウンドで起動できたら、Apacheの設定でプロキシの項目を追加する。

<VirtualHost *:80>
  DocumentRoot "/var/www/html/frontend/dist"
  ServerName <albのドメイン名>
  <Directory>
    Require all granted
    AllowOverride All
  </Directory>
  # ここから追加
  ProxyPass /backend/ http://localhost:8000
  ProxyPassReverse /backend/ http://localhost:8000
  # ここまで追加
</VirtualHost>

設定が完了したら反映する

sudo systemctl restart httpd

上記の手順を踏むことでフロントからバックへ通信できるようになった。

まとめ

ドメインが複数ある場合(サブドメインが取得できる場合も)はバーチャルホストでドキュメントルートをフロント用とバック用で作成すれば解決できたが、今回のケースではプロキシを使用することで、フロントとバックの通信を実現できた。現状、何となく動いた、という状態なのでプロキシについての理解を深めたい。