Day 86｜nginxでマルチアプリに対応しよう

こんにちは、こんです🦊

前回までで、独自ドメインを取得し、ConoHa VPSに割り当てるDNS設定まで完了しました。

今回はそこに、複数のアプリをURL別に振り分けて公開する仕組みを追加します。

1. 導入：この記事でできるようになること

この記事では、1つのVPS（＝Virtual Private Server（仮想専用サーバー）。レンタルしたサーバー）を“もっと便利に使う”ための設定を行います。
たとえば、同じ「yourtool.xyz」という住所で：

https://yourtool.xyz/app1 に アプリA
https://api.yourtool.xyz に アプリB

のように、複数のアプリを使い分けられる仕組みを作ります。

💡 これってどういうこと？

1つの家（＝VPS）に、いくつも部屋（アプリ）を用意しておいて、
「玄関（＝URL）から来た人を、目的に応じた部屋に案内する」イメージです。

/app1 → アプリAの部屋
/api → アプリBの部屋
/（トップ） → サイト全体の入口ページ

🎯 なんでこんなことするの？

VPS代を節約できる！
1. → 1台のサーバーでいくつもアプリが動かせるから、コスパがいい
URLをわかりやすく整理できる！
1. → 「APIだけ使いたい」「管理画面にアクセスしたい」など目的別にURLを分けられる
開発用／本番用を使い分けられる！
1. → /dev はテスト用、/ は本番用、と分けて使える

✅ つまりこの記事は…

「1つのドメインで、いくつもアプリを自由に切り分けて動かせるようにする」ためのガイドです！

🛠 nginxという“玄関スタッフ”を使って、アプリを切り分けて案内していきましょう。

2. 背景・基礎知識

🔹 nginxとは？

nginx（エンジンエックス）は、軽量かつ高速なWebサーバー兼リバースプロキシです。
アクセスされたURLに応じて、裏側のアプリ（Flask / Streamlit / Node.js など）に振り分けるハブのような役割を担います。

🌍 クライアント（ブラウザ）
  ↓ <https://yourtool.xyz/app1>
🌐 nginx（玄関）
  ↓ <http://localhost:8501>（アプリ1）

VPS（家やオフィスのような場所）にある1つの玄関のようなもので、この玄関には「受付の人」がいて、訪問者（ユーザー）が来るたびに、目的に応じて各部屋に案内してくれるイメージです。
たとえば：

あなたの家の住所は「yourtool.xyz」です。
この家には、以下の3つの部屋があります：
- /app1 → Streamlitアプリの部屋（ポート8501）
- /slack → Slack連携用のFlaskアプリの部屋（ポート5000）
- / → ウェルカムページの部屋（ポート3000）

🔁 どのURLにアクセスしても、**最初に来るのは nginx（玄関）**です。
これにより、1つのIP・1つのドメインでも複数アプリを共存させることが可能になります。

🔹 じゃあCloud Runとの違いは？

Cloud Runを使っていると、それぞれのアプリが別の“家”に住んでいて、玄関も個別なんです。

Flask → https://my-app.a.run.app
Streamlit → https://my-streamlit.a.run.app

つまり「それぞれに個別の住所（URL）がある」状態。
でもnginxを使えば…

🏡 1つの家（ドメイン）に全部まとめて住める！
👉 URLのパスやサブドメインでアプリを分けられる！

3. 実践パート

✅ 前提条件

ConoHa VPSでUbuntuが稼働している
aptが使える
アプリ（例：StreamlitやFlask）はそれぞれポートで起動済み

✅ ステップ1：nginxのインストール

sudo apt update
sudo apt install nginx

✅ ステップ2：ファイアウォール（ufw）でHTTP/HTTPSを許可

sudo ufw allow 'Nginx Full'
sudo ufw reload

✅ ステップ3：アプリの起動確認

アプリ1（例：Streamlit）を 8501 番で起動しておく：

streamlit run app1.py --server.port 8501

アプリ2（例：Flask）を 5000 番で起動：

python3 app2.py

✅ ステップ4：nginxの設定ファイルを作成

sudo nano /etc/nginx/sites-available/yourtool

server {
    listen 80;
    server_name yourtool.xyz;

    location /app1 {
        proxy_pass <http://localhost:8501>;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

server {
    listen 80;
    server_name api.yourtool.xyz;

    location / {
        proxy_pass <http://localhost:5000>;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

✅ ステップ5：設定を有効化＆リロード

sudo ln -s /etc/nginx/sites-available/yourtool /etc/nginx/sites-enabled/
sudo nginx -t  # エラーが出なければOK
sudo systemctl reload nginx

✅ ステップ6：ドメインのDNS設定（お名前.com）

yourtool.xyz と api.yourtool.xyz に対して、AレコードでVPSのIPアドレスを指定しておくこと

4. つまずきポイントと対処法（FAQ）

5. まとめと次回予告

nginxは1つのVPSに複数アプリを共存させる“交通整理係”
/app1 や api. などURLを分けてアクセス可能に
Cloud Runでは実現しにくい「1ドメイン集中運用」ができる！

🔜 次回予告（Day 87）

SSL化して安全なHTTPSアクセスを実現しよう！

無料のLet’s Encryptを使ってSSL証明書を発行し、「🔒保護された通信」へ。httpからhttpsへのリダイレクト設定も含めて徹底解説します。

#100日チャレンジ #VPS #nginx入門 #マルチアプリ #独自ドメイン運用 #ConoHaVPS #リバースプロキシ