【爆速公開】Nginx+Tomcat10+Reactで作る！モダンなWebサービス構築ガイド

a.kurogoシステム開発コメントを残す

はじめに：なぜこの構成が「最強の組み合わせ」なのか？

こんにちは、ブログ編集長兼システムエンジニアのa.kurogoです。Webサービス開発を始めたばかりの皆さん、サーバー環境の構築で迷っていませんか？「どの技術を使えばいいのか」「最新の技術で効率的に開発したい」そう考える方のために、今回は最もモダンで効率的なサーバー構成をご紹介します。

今回解説する「Nginx + Tomcat10 + React」の組み合わせは、役割が明確で、拡張性が高いのが特徴です。フロントエンド（React）とバックエンド（Tomcat）を分離することで、開発効率が飛躍的に向上します。この記事では、私が実際にさくらVPS上で試行錯誤した経験をもとに、この最強の組み合わせを構築するための具体的な手順を、初心者でも分かるように丁寧に解説します。

このガイドを読めば、あなたのWebサービスをHTTPSで安全に、そして確実にインターネットに公開する道筋が見えてきます。さあ、一緒に新しいWebサービスの扉を開きましょう。

目次

この構成のメリットと前提知識

まずは、今回の構成を理解するための重要なポイントを整理しましょう。

  • Nginx：外部からのアクセスを最初に受け付ける「玄関口」です。ReactでビルドしたHTML/CSS/JSといった静的ファイルを超高速で配信します。また、バックエンド（Tomcat）への通信を中継する「リバースプロキシ」の役割も担います。
  • Tomcat10：Javaで書かれたWebアプリケーションを動かすための「心臓部」です。APIやデータベースとの連携など、複雑なロジック処理を担います。
  • React：ユーザーが見る画面（フロントエンド）を構築するためのライブラリです。Reactで開発したコードは、最終的に静的ファイル（HTML, CSS, JS）にビルドされます。

この分業体制により、フロントエンドとバックエンドをそれぞれ独立して開発・更新できるため、開発効率が大幅に向上します。

ステップ1：NginxとJavaをインストールする

サーバーOSはRocky Linux 9を前提とします。まずは必要なソフトウェアをインストールしましょう。

# NginxとJava 17（Tomcat10の動作に必須）をインストール
sudo dnf install -y nginx java-17-openjdk-devel

Nginxの自動起動設定
sudo systemctl enable --now nginx

この時点で、ブラウザからドメインにアクセスすると、Nginxのデフォルトページが表示されるはずです。

ステップ2：Tomcat10をセットアップする

Tomcat10をダウンロードし、専用ユーザーで起動するように設定します。Nginxと連携するため、外部からの直接アクセスは遮断し、8081番ポートで起動させます。

# Tomcat専用ユーザーを作成
sudo useradd -r -m -U -d /opt/tomcat10 -s /bin/false tomcat10

Tomcat10をダウンロードして配置（バージョンは最新に）
TOMCAT_VER=10.1.20
wget https://dlcdn.apache.org/tomcat/tomcat-10/v${TOMCAT_VER}/bin/apache-tomcat-TOMCAT_VER.tar.gzsudotarxzfapache−tomcat−{TOMCAT_VER}.tar.gz -C /opt/tomcat10 --strip-components=1
sudo chown -R tomcat10: /opt/tomcat10

次に、server.xmlを編集してポートとアドレスを設定します。特にaddress="127.0.0.1"とすることで、ローカルホスト（Nginx）からしかアクセスできなくなり、セキュリティが向上します。

sudo vi /opt/tomcat10/conf/server.xml
<Connector port="8081" protocol="HTTP/1.1" address="127.0.0.1"
connectionTimeout="20000"
redirectPort="8444" />

最後にsystemdのサービスファイルを作成し、Tomcat10を起動します。

ステップ3：Nginxをリバースプロキシとして設定する

Nginxが外部からのアクセスをTomcat10へ転送するための設定を行います。

sudo vi /etc/nginx/conf.d/bakauke.conf
server {
listen 80;
server_name bakauke.i-third.org;

location /api/ {
    # /api/ へのアクセスをTomcatへ転送
    proxy_pass [http://127.0.0.1:8081/](http://127.0.0.1:8081/);
    proxy_set_header Host $host;
}

location / {
    # それ以外のアクセスはReactの静的ファイルを配信
    root   /var/www/html/bakauke;
    index  index.html;
    try_files $uri $uri/ /index.html;
}
}

この設定のポイントは2つです。

/api/で始まるアクセスはTomcat（8081番ポート）に転送します。

それ以外のアクセスは、Reactのビルド済み静的ファイルが置かれた/var/www/html/bakaukeから配信します。

これで、APIはTomcatが、WebページはNginxが担当する分業体制が完成します。

ステップ4：HTTPS化とReactの静的配信設定

Certbotを使って無料でSSL証明書を取得し、HTTPSで安全な通信を確立します。

sudo certbot --nginx -d bakauke.i-third.org --agree-tos --redirect

このコマンド一つで、自動的にHTTPS設定が完了します。次に、Reactで開発したサービスを公開するために、npm run buildで生成される静的ファイルをrootディレクトリに配置します。

# ビルド後のファイルを配置するディレクトリを作成
sudo mkdir -p /var/www/html/bakauke

Reactプロジェクトのビルド
npm run build

ビルド済みファイルをサーバーにアップロード
例：scp -r build/ user@your.server.ip:/var/www/html/bakauke/

これで、あなたのWebサービスはHTTPSで公開され、ReactとJavaが連携して動く状態になります。

まとめ：あなたのアイデアを形にするための第一歩

今回は、Nginx、Tomcat10、Reactを使ったモダンなWebサービス構築手順を解説しました。この構成は、開発の効率とシステムの安定性を両立させます。もしメモリが不足するようであれば、VPSのプラン変更を検討することで、より大規模なサービスにも対応できます。サーバー構築という第一歩を踏み出したあなたは、もう立派なITエンジニアです！

次のステップ：あなたのサービスを世界に公開しよう

この環境が整えば、あとはあなたのアイデアをコードに落とし込むだけです。記事を読み進めて、さらに技術力を高めていきましょう。質問やコメントがあれば、SNSで気軽にお声がけください！

関連記事：「Reactでの状態管理のベストプラクティス」
関連記事：「JavaからDBに接続するHikariCPの活用法」

Twitter/Xをフォローする

コメントを残す

メールアドレスが公開されることはありません。必須項目には印がついています *