本記事はプロモーションを含みます
Contents
Reactとは？
ReactはFacebookが開発し、現在はコミュニティによって支えられているJavaScriptライブラリで、ユーザーインターフェースの構築に特化しています。シングルページアプリケーション（SPA）の開発に適しており、仮想DOMを使用することで効率的なレンダリングを実現しています。Reactはコンポーネントベースのアーキテクチャを持っており、再利用可能なUIコンポーネントを作成することができます。
ReactアプリケーションをVPSにデプロイする流れ
ReactアプリケーションをVPSにデプロイする流れは次のようになります。それほど難しくありません。
お試しで使いたい場合は1時間単位あるいは1日単位で使えるプランもあります。
WEBサーバーとしてNginxを使います。
npm run builsコマンドでReactアプリケーションをビルドします。
Reactアプリケーションを公開する設定をおこないます
わたしはサーバー側でHTTPS化するのが面倒なのでCloudflareを使っています。
VPSを購入する：VPSプランの選び方に注意！
すでにVPSを利用中の方は読み飛ばしてください。
VPSにインストールするOSはLinuxを想定しています。VPSの最安値プランはメモリーサイズが512MBであることが多いのですが、最近のLinuxディストリビューションは512MBのメモリーサイズでは起動しない場合があるので、最低でも1GBは必要です。
VPSプランを決める場合はどのようにしてVPSを使うかによって変わります。アクセス数は多いのか、少ないのか、複数のアプリを動かすのか、複数のドメインを使うのか、など。CPUやメモリーサイズ、ストレージサイズもそれよって変わります。
わたしはカゴヤVPSのCPU2コア、メモリーサイズ2GB、ストレージサイズ200GBの1カ月プランを880円で利用しています。これはカゴヤVPSの大容量プランというストレージサイズを増やしたプランですが、このスペックだと複数サイトを運営していても十分処理できます。
VPSにNode.jsとNginxをインストールする
Node.jsをインストールする
Node.jsはaptコマンドでもインストールできるのですが、バージョンが古いためおすすめしません。そのため最新版のNode.jsや任意のバージョンのNode.jsをインストールしたい場合は別の方法でインストールする必要があります。
最新のv20系をインストールする場合は次のようにします。
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - &&\ sudo apt-get install -y nodejs
インストールするバージョンはどれでも良いわけではありません。奇数のバージョンはサポート期間が6カ月と短いです。それに対して偶数のバージョンはサポート期間が30カ月のLTSバージョンですので、使うならば偶数のバージョンにしましょう。
上記のコマンドはGitHubから引用しています。ご利用の環境とインストールしたいバージョンから、どのコマンドを実行すれば良いのか分かります。
参考：distributions/README.md at master · nodesource/distributions · GitHub
Nginxをインストールする
Nginxはaptコマンドでインストールできます。
sudo apt-get update
sudo apt-get install nginx
Nginxをインストールしたら自動起動を有効にしておきます。
sudo systemctl eable nginx
Reactアプリケーションをビルドする
VPS上でReactアプリケーションをビルドします。npm installを実行していない場合は、Reactアプリケーションのディレクトリでnpm iコマンドを実行しておきます。
準備が出来たらnpm run buildコマンドを実行します。問題なく実行できるとbuildディレクトリが作成されているはずです。このディレクトリの中身を公開します。
Nginxの設定をおこなう
ひとつのVPSで複数のドメイン・FQDNを扱うことを想定して、わたしはドメインごとに設定ファイルを分けています。設定ファイル名は分かりやすい方が良いので、ドメイン名にすることをおすすめします。たとえば www.example.com というドメイン名であればファイル名も www.example.com にします。
設定ファイルは /etc/nginx/sites-available/ディレクトリ配下に配置します。server_nameは実際にアクセスされるFQDNとなります。rootはReactアプリケーションをビルドした際に作成されたbuildディレクトリのフルパスに変更します。try_filesはおまじないだと思って追加してください。ブラウザでリロードしたりURLに直接アクセスした際に404エラーになることを防ぐ設定です。
server {
listen 80;
server_name example.com; # アクセスしてくるFQDNに変更する
location / {
root /path/to/your/react/app/build; # buildディレクトリのパスに変更する
try_files $uri /index.html; # Reactアプリの場合はこれが重要
}
}ファイルの作成が完了したらシンボリックリンクを作成してNginxの設定ファイルをsites-enabledディレクトリに追加し、Nginxを再起動します。
sudo ln -s /etc/nginx/sites-available/www.example.com /etc/nginx/sites-enabled/
sudo service nginx restart
これでWEBブラウザでアクセスできるようになっているはずです。ただし、この時点ではHTTPS化されていません。
HTTPSでアクセスできるようにする
現在のWEBはHTTPS化は必須です。HTTPSでアクセスできるようにする方法はいくつかあるのですが、わたしはCloudflareを使っています。
Cloudflareとは？
CloudflareはCDN（Content Delivery Network）サービスのひとつです。
CDNはWEBコンテンツをユーザーへ高速に配信するためのネットワークシステムです。これは、世界中に分散配置されたサーバ群から成るネットワークで、ユーザーの近くのサーバからコンテンツを提供することで、ウェブページのロード時間を大幅に短縮します。
どのようにしてHTTPS化するのか？
Cloudflareを使うと誰でも簡単に無料でHTTPS化できます。方法は難しくないですが詳しく解説すると長くなるので、別の記事で解説しています。
詳細は以下の記事を参考にしてみてください。
無料でHTTPS化！初心者のためのCloudflare入門：手順別にわかりやすく解説！
