目的
本ページでは、Apache上でReactアプリをデプロイするまでの手順をまとめます。
背景
ローカルで作成したReactをApacheで動かしてみたい
内容
- AWSでEC2を立ててApache＆gitインストール
- 自身のブラウザ上でアプリケーションが表示されることを確認
1. Apacheインストール
まずは、AWS上で検証用EC2を立てます。
OSはAmazonLinuxを使用します。
ディストリビューション等が違う場合は別途コマンドを読み替えて進めて下さい。
また、EC2はSSH接続＆Apacheインストールのためインターネットへのイン/アウトバウンド通信が必要です。
セキュリティグループの穴あけと、EC2へのグローバルIPアドレス付与は他記事を参考にしてください。
さて、SSH接続して以下のコマンドでApacheをインストールしましょう。
sudo yum install httpd
無事インストールが完了すると、Complete!! がコンソールに表示されます。
Apacheを起動してみましょう
sudo systemctl start httpd
起動できたかどうかは以下のコマンドで確認します
sudo systemctl status httpd
上記コマンドを実行すると以下のような出力がでます。
↑Activeが「running」となっていれば起動は成功しています。
続いて、テストのhtmlファイルをApacheサーバーに配置し、webブラウザを通して応答が返ってくるかを確認します。
『var/www/html』ディレクトリ直下に『index.html』を作成しましょう。
cd /var/www/html
touch index.html
vi index.html
vi、vimとはLinux標準のテキストエディタです。
コマンドモード、入力モードや各種保存コマンド等は調べましょう。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test-page</title>
</head>
<body>
<h1>Hellow world!</h1>
</body>
</html>
また、htmlファイルは不特定多数が閲覧するアクセスするファイルのため、Read権限が必要となります。
lsコマンドでread権限が付与されていることを確認しましょう。
ls -l
↑その他のユーザーにread権限が付与されていない場合はchmodコマンドで付与してください。
『/var/www/html/index.html』 はApacheサーバーにアクセスしたときに最初に読み込まれるファイルパスとなります。これをドキュメントルートといい、必要に応じて変更も可能となります。
ブラウザを立ち上げて、ブラウザのURLに
『http://xxx.xxx.xxx.xxx』 (xxx.xxx.xxx.xxx はEC2のElasticIPアドレス)
と入力してApacheサーバーにアクセスしましょう。
ブラウザ上に『index.html』が表示、つまりHello World!!が表示されていれば成功です。
gitインストールからReactプロジェクトのクローンまで
既にReactプロジェクトを開発しているGitリポジトリは作成済みとします。
クローン～Apache上でReactを動かすとこまで。
以下のコマンドでサーバーにgitをインストールしましょう。
sudo yum install git -y
gitインストールが完了すれば後は該当リポジトリをクローンして下さい
今回は『var/www/git』直下にリポジトリをクローンしました
Apache上にReactプロジェクトのビルドファイルを配置
まずは Node.jsをインストールします。（npmも同時にインストールされます）
curl -fsSL https://rpm.nodesource.com/setup_16.x | bash -
yum install -y nodejs
次に、先ほどクローンしてきたReactプロジェクトに移動してください。
そしてReactに必要なパッケージを下記コマンドでインストールしてください。
npm install
上記コマンドはpackage.jsonを元にパッケージをインストールしてくれるコマンドとなります。
サーバー上でビルドやローカルデプロイのテストを行うのに必要です。
また、今回は本番デプロイを想定するのでproduction build(本番ビルド)を行います。
'''
npm run build
'''
ビルドが成功するとReactプロジェクト直下に『/build』が作成されます。
roduction buildをかけるメリットは以下となります。
・ファイル軽量化
・バンドラーによる最適化
・難読化（Sourcemap使えば見れるがセキュリティ的な問題あり）
一般的にはCI/CDの過程でproduction buildを行い、エラーなどなければサーバーにデプロイする等が理想です（いつか記事書きたい）
Apacheのドキュメントルート変更
次に、ドキュメントルートを変更します。
Apacheの設定ファイルは /etc/httpd/conf/httpd.conf にあります。
設定ファイルの書き換え時には必ずバックアップを取りましょう。
httd_backup.confなどで同じ階層にバックアップを保存しておくと事故を防げます。
#
# Note that from this point forward you must specifically allow
# particular features to be enabled - so if something's not working as
# you might expect, make sure that you have specifically enabled it
# below.
#
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/var/www/html" ←ここを書き換える
『DocumentRoot "/var/www/html" 』の箇所を書き換えて保存しましょう。
私の場合だと 『/var/www/git/react/build』となります。
これでApacheサーバーにアクセスすると、buildフォルダ内のindex.htmlがユーザーに表示されます。
設定ファイルの変更を反映するにはサーバーの再起動が必要となります。
systemctl restart httpd
動作確認
『http://xxx.xxx.xxx.xxx』 (xxx.xxx.xxx.xxx はEC2のElasticIPアドレス)
でサーバーにブラウザからアクセスしてみます。
↑無事アプリケーションが表示されました。
おまけ
lsofコマンドで確認すると80番ポートでApacheがListenしているのが確認できます。
tcpdumpコマンドで80番ポートをキャプチャするとパケットも確認できます。