Nginx と React を導入【Ubuntu22.04】

React

2023.10.182023.10.22

はじめに
前提条件
NodeJS のインストール
Nginx のインストール
Nginx の設定
おわりに

はじめに

Ubuntu22.04 で Nginx と React を導入する手順をまとめました。備忘録です。

前提条件

前提条件は以下の通りです。

Ubuntu22.04
core i3-12100
メモリ 8GB

NodeJS のインストール

nodejs のページから、LTSのLinuxのダウンロードリンクをコピーして wget します。

wget https://nodejs.org/dist/v18.18.0/node-v18.18.0.tar.gz
tar -zxvf node-v18.18.0.tar.gz
cd node-v18.18.0
./configure
make -j4
sudo make install
sudo npm install -g create-react-app

大体1時間ほどかかります。
これでインストール完了です。
なぜか npm にパスが通らなかったので最後に export しておきました。
もしくは、.bashrc に記載でも大丈夫です。

sudo node -v
V18.8.0
sudo npm -v
9.8.1

パッケージも作成しておきます。

sudo create-react-app test1
cd test1
sudo npm start
sudo npm run build

Nginx のインストール

こちらを参考にインストールしました。

まずは公開鍵を取得します。

sudo apt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring
curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor \
    | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null

ここまできたら、以下を実行します。

gpg --dry-run --quiet --no-keyring --import --import-options import-show /usr/share/keyrings/nginx-archive-keyring.gpg

以下のような出力になれば、OKです。

pub   rsa2048 2011-08-19 [SC] [expires: 2024-06-14]
      573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62
uid                      nginx signing key <signing-key@nginx.com>

続いて、以下のコマンドを実行します。

echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] \

Index of /packages/ubuntu/
nginx.org `lsb_release -cs` nginx" \
    | sudo tee /etc/apt/sources.list.d/nginx.list

echo -e "Package: *\nPin: origin nginx.org\nPin: release o=nginx\nPin-Priority: 900\n" \
    | sudo tee /etc/apt/preferences.d/99nginx

sudo apt update

sudo apt update でワーニングが出ると思うので、修正していきます。

sudo nano /etc/apt/sources.list.d/nginx.list

以下のように変更してください。

deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] http://nginx.org/packages/ubuntu jammy nginx
↓
deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg arch=amd64] http://nginx.org/packages/ubuntu jammy nginx

ここまできたら、nginx をインストールします。

sudo apt install nginx
nginx -v
nginx version: nginx/1.24.0

Nginx の設定

ファイアーウォールを有効にします。

sudo ufw enable
sudo ufw allow 'Nginx Full'
sudo systemctl start nginx

こちらを参考に、nginx の設定を行いました。

cd /etc/nginx/conf.d
sudo touch react-test1.conf

今作成した react-test1.conf を以下のようにします。

server {
  listen       83;
  server_name  127.0.0.1;
  charset      utf-8;

  # ドキュメントルートを指定.
  root /home/seigi/web-dev/test1/build;
  index index.html;

  # リクエストされたリソースがなければ、index.htmlを返却.
  location / {
    try_files $uri /index.html;
  }
  location = /index.html {
    #エラー確認用
  }
}

ここまできたら、あとはnginx を起動していきます。
エラー対処はこちらを参考にしました。

sudo ufw allow 83/tcp
sudo usermod -G username nginx
sudo systemctl reload nginx

http://http://127.0.0.1:83/ にアクセスします。

無事に表示できました！

おわりに

今回は React アプリをビルドして Nginx を使用して公開するまでの手順をまとめました。

次回は fastAPI でバックエンドを作成して React につなげられたらと思います。