Deploy React on OCI Instance

以前にOCIインスタンス上にReact環境を構築して、グローバルIPアドレスからアクセスできないかを試したけど、ダメで挫折しましたが今回再チャレンジしました。
あらためて、OCIインスタンスを立ち上げた初期段階から始めてみました。

パッケージのアップデートを行う

sudo apt update -y

Reactのインストール

1. nodejsとnpmのインストール

OCIインスタンスのUbuntu 22.04 Minimalイメージを使うと、nodejsのバージョンは12.2が入っています。

sudo apt -y install nodejs npm

2. nodejsのバージョンアップ

バージョン管理コマンドであるnコマンドを使って安定版のnodejsをインストールします。

18系

n --stable

20系

n --latest

今回は18系をインストールします。sudo n stableコマンドでインストールし、hash -rコマンドでバージョン18に反映させます。

sudo n stable
hash -r

Reactアプリの作成

npxコマンドでReactアプリを作成し、起動させます。

npx create-react-app test-app
cd test-app/
npm start

起動後以下のようなログが表示されればOKです。
ローカル環境だと http://localhost:3000 にアクセスすればReactのデフォルトApp画面が表示されますが、
クラウド上のインスタンスなのでこのアドレスは使えません。。。

React起動ログ

You can now view test-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.143:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

なんですが！！！
nginxのリバースプロキシを使うことでアクセスが可能になります！！
と言うわけで、nginxをインストールしていきます。

nginxのインストール

sudo apt install nginx -y

ufwのインストール

sudo apt install ufw -y

sudo ufw app list コマンドで登録されたアプリケーションを確認します。
今回はNginxのHTTPを使います。

sudo ufw app list
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

さらにiptablesでもポートを開けておきましょう。

sudo iptables -I INPUT -p TCP --dport 80 -j ACCEPT

続けて、リバースプロキシの設定を行います。

/etc/nginx/sites-available/default

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                #try_files $uri $uri/ =404;       ★ここはコメントアウト
                proxy_pass http://localhost:3000; ★ここを追加
        }

nginxのサービス再起動を行います。

sudo systemctl restart nginx

再度Reactのtest-appを起動させ、外部からアクセスできるか確認する

cd test-app/
npm start

ブラウザで確認してみる。

以上で、完了です。