今まである WEB アプリを React と Django を利用して開発して来たのですが、そろそろデモ版として外部にオープンしようかと思い始めました。まず本番環境はどう作れば良いか調べて Apache サーバに乗せって見ることにしました。Let’s Encrypt から SSL証明書も取得済みであって HTTPS を適用して React のロゴが見えるところまで設定します。
プロジェクトを作成
snowball はプロジェクト名です。ここでは /reactjs の下にプロジェクトを作りますが、場所はどこでも良いです。
[root@centos7 ~]# mkdir /reactjs [root@centos7 ~]# cd /reactjs [root@centos7 reactjs]# create-react-app snowball
プロダクションをビルド
yarn build ( = npm run build ) を実行すると、アプリのプロダクションビルドで build ディレクトリが作成されます。 build/static ディレクトリの中には、JavaScript ファイルと CSS ファイルがあります。 build/static の中の各ファイル名はファイル内容のユニークなハッシュを含みます。
[root@centos7 snowball]# ll /reactjs/snowball/build/
total 24
-rw-r–r– 1 root root 820 Jun 24 23:21 asset-manifest.json
-rw-r–r– 1 root root 3870 Jun 24 23:21 favicon.ico
-rw-r–r– 1 root root 2045 Jun 24 23:21 index.html
-rw-r–r– 1 root root 306 Jun 24 23:21 manifest.json
-rw-r–r– 1 root root 646 Jun 24 23:21 precache-manifest.054774adbe886ee6e3c29227ef1745b5.js
-rw-r–r– 1 root root 1182 Jun 24 23:21 service-worker.js
drwxr-xr-x 5 root root 37 Jun 24 23:21 static
[root@centos7 snowball]# ll /reactjs/snowball/build/static/
total 4
drwxr-xr-x 2 root root 70 Jun 24 23:21 css
drwxr-xr-x 2 root root 4096 Jun 24 23:21 js
drwxr-xr-x 2 root root 30 Jun 24 23:21 media
total 24
-rw-r–r– 1 root root 820 Jun 24 23:21 asset-manifest.json
-rw-r–r– 1 root root 3870 Jun 24 23:21 favicon.ico
-rw-r–r– 1 root root 2045 Jun 24 23:21 index.html
-rw-r–r– 1 root root 306 Jun 24 23:21 manifest.json
-rw-r–r– 1 root root 646 Jun 24 23:21 precache-manifest.054774adbe886ee6e3c29227ef1745b5.js
-rw-r–r– 1 root root 1182 Jun 24 23:21 service-worker.js
drwxr-xr-x 5 root root 37 Jun 24 23:21 static
[root@centos7 snowball]# ll /reactjs/snowball/build/static/
total 4
drwxr-xr-x 2 root root 70 Jun 24 23:21 css
drwxr-xr-x 2 root root 4096 Jun 24 23:21 js
drwxr-xr-x 2 root root 30 Jun 24 23:21 media
yarn build
[root@centos7 snowball]# yarn build yarn run v1.16.0 $ react-scripts build Creating an optimized production build... Compiled successfully. File sizes after gzip: 36.44 KB build/static/js/2.b41502e9.chunk.js 762 B build/static/js/runtime~main.a8a9905a.js 602 B build/static/js/main.28647029.chunk.js 517 B build/static/css/main.2cce8147.chunk.css The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "http://myname.github.io/myapp", The build folder is ready to be deployed. You may serve it with a static server: yarn global add serve serve -s build Find out more about deployment here: https://bit.ly/CRA-deploy Done in 19.66s. [root@centos7 snowball]#
Static Server ( 静的サーバ ) を設置
yarn global add serve
ここでは Apache に React アプリを乗せるので使わないですが、普段は serve -s build コマンドで静的サイトをポート 5000 で処理してくれるので Static Server である serve を設置して置きます。
[root@centos7 snowball]# yarn global add serve
yarn global v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "serve@11.0.2" with binaries:
- serve
Done in 4.01s.
[root@centos7 snowball]#
Apache と連動する
基本情報
build ディレクトリ以下を Apache の DocumentRoot へコピーする
[root@centos7 snowball]# cp -r /reactjs/snowball/build/* /usr/local/apache2/htdocs/annotators.ml/
VirtualHost の設定
下記の <Directory> 〜 </Directory> 部分を追加します。
<VirtualHost *:80>
...
＃ 追加：ここから
<Directory "/usr/local/apache2/htdocs/annotators.ml">
Options Indexes FollowSymLinks
AllowOverride All
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Require all granted
</Directory>
＃ 追加：ここまで
...
</VirtualHost>
Apache デーモンを再起動
[root@centos7 snowball]# systemctl restart httpd2
サイトを確認
参考文献
Deployment
Creating a Production Build
Host react application on Apache server
コメント