Reactで開発したWEBアプリ・WEBサイトをVPSにデプロイする手順

本記事はプロモーションを含みます

Reactとは?

ReactはFacebookが開発し、現在はコミュニティによって支えられているJavaScriptライブラリで、ユーザーインターフェースの構築に特化しています。シングルページアプリケーション(SPA)の開発に適しており、仮想DOMを使用することで効率的なレンダリングを実現しています。Reactはコンポーネントベースのアーキテクチャを持っており、再利用可能なUIコンポーネントを作成することができます。

ReactアプリケーションをVPSにデプロイする流れ

ReactアプリケーションをVPSにデプロイする流れは次のようになります。それほど難しくありません。

VPSを購入する

お試しで使いたい場合は1時間単位あるいは1日単位で使えるプランもあります。

VPSにNode.jsとNginxをインストールする

WEBサーバーとしてNginxを使います。

Reactアプリケーションをビルドする

npm run builsコマンドでReactアプリケーションをビルドします。

Nginxの設定をおこなう

Reactアプリケーションを公開する設定をおこないます

HTTPSでアクセスできるようにする

わたしはサーバー側でHTTPS化するのが面倒なのでCloudflareを使っています。

VPSを購入する:VPSプランの選び方に注意!

すでにVPSを利用中の方は読み飛ばしてください。

VPSにインストールするOSはLinuxを想定しています。VPSの最安値プランはメモリーサイズが512MBであることが多いのですが、最近のLinuxディストリビューションは512MBのメモリーサイズでは起動しない場合があるので、最低でも1GBは必要です。

VPSプランを決める場合はどのようにしてVPSを使うかによって変わります。アクセス数は多いのか、少ないのか、複数のアプリを動かすのか、複数のドメインを使うのか、など。CPUやメモリーサイズ、ストレージサイズもそれよって変わります。

わたしはカゴヤVPSのCPU2コア、メモリーサイズ2GB、ストレージサイズ200GBの1カ月プランを880円で利用しています。これはカゴヤVPSの大容量プランというストレージサイズを増やしたプランですが、このスペックだと複数サイトを運営していても十分処理できます。

VPSの価格検索は次のページを参考にしてみてください。複数の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エラーになることを防ぐ設定です。

/etc/nginx/sites-available/www.example.com
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入門:手順別にわかりやすく解説!