Nginx Proxy ManagerをUbuntu Server 24.04にインストールしたときの備忘録

どうもおはこんばんにちはyotakun4132です。

自宅で80/443ポートでwebサイトを複数のサーバーでホストしたかったのですが、グローバルIPを1つしか持っていなかったので、Nginxでリバースプロキシサーバーを立てることにしました。
ただ普通に難しくてよくわからないので、Nginx Proxy Managerというリバプロ鯖をGUIで管理できるツールを構築して試してみたときのメモです。

環境

Proxmox VEでVMをたてました。

OS : Ubuntu Server 24.04 LTS
vCPU : 2コア
メモリ : 4GB
ストレージ : 16GB

VMのIPアドレス : 192.168.8.10
ユーザー名 : hogehoge
ホスト名 : rp-server

インストール

Nginx Proxy Managerって長いので、NPMと省略します。

OSのインスコだけ済ませたところから開始します。

hogehoge@rp-server:~$ sudo apt update && sudo apt upgrade -y
hogehoge@rp-server:~$ sudo apt install ca-certificates curl gnupg
hogehoge@rp-server:~$ sudo install -m 0755 -d /etc/apt/keyrings
hogehoge@rp-server:~$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
hogehoge@rp-server:~$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu $(. /etc/os-release; echo $VERSION_CODENAME) stable" |
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
hogehoge@rp-server:~$ sudo apt update
hogehoge@rp-server:~$ sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
hogehoge@rp-server:~$ sudo usermod -aG docker $USER
hogehoge@rp-server:~$ sudo reboot now
// 再起動
hogehoge@rp-server:~$ mkdir -p ~/npm/{data,letsencrypt}
hogehoge@rp-server:~$ nano ~/npm/docker-compose.yml
hogehoge@rp-server:~$ cd ~/npm
hogehoge@rp-server:~/npm$ docker compose pull
hogehoge@rp-server:~/npm$ docker compose up -d
hogehoge@rp-server:~/npm$ docker compose ps
hogehoge@rp-server:~/npm$ sudo ufw allow 80/tcp
hogehoge@rp-server:~/npm$ sudo ufw allow 443/tcp
hogehoge@rp-server:~/npm$ sudo ufw allow from 192.168.8.0/24 to any port 81 proto tcp
hogehoge@rp-server:~/npm$ sudo ufw allow 22/tcp
hogehoge@rp-server:~/npm$ sudo ufw enable
hogehoge@rp-server:~/npm$ sudo reboot now

セットアップ

ブラウザからhttps://192.168.8.10:81にアクセスします。

ログイン画面が出てくるので、
メールアドレス : admin@example.com
パスワード : changeme
でログインします。

フルネーム、ニックネーム、メールアドレスを登録するように求められるので、入力します。

パスワードを登録するように求められるので、current passwordにchangemeを入力して、下の欄に自分の登録したいパスワードを入力します。

これで一通りユーザー登録が完了しました。ユーザー画面が表示されるはずです。

こんな感じ↓

とりあえずこのブログサイトのWebサーバーとファイルサーバーを登録してみようと思います。

HostsタブからAdd Proxy Hostをクリックします。New Proxy Hostという画面が出ます。

主にDetailsタブとSSLタブから設定します。

Detailsタブ

Domain Names

そのサイトのドメインを入力します。このブログサイトであれば、「blog.ytkn.jp」と入力します。

Scheme

NPMからバックエンドサーバーに接続する方法を選択します。
NPMでSSlが終端するならhttp、最後まですべてSSLならhttps

Forward Hostname / IP

実際にコンテンツを配信するサーバーのIPアドレスを入力します。
192.168.1.150とか。

Forward Port

バックエンド側の待ち受けポートを入力します。

Cache Assets

バックエンドサーバーのページとかのデータをキャッシュするかしないかです。
私は無効にしています。

Block Common Exploits

SQLインジェクションとかの攻撃を防いでくれるフィルター的なやつです。有効にしておくことをおすすめします。

Websockets Support

名前の通りWebsocket通信を使うか使わないか選択します。有効でいいと思います。

Access List

特定のIPだけを通したかったりユーザー認証したい場合に使います。普通にWebサイトを公開したい場合はデフォルトでいいと思います。

SSLタブ

SSL Certificate

SSL証明書の扱いについてです。
NPMではLet’s Encryptを自動で発行・更新してくれます。初回の場合、NoneとRequest a new SSL Certificateの2つ選べますが、基本的に後者を選択します。

Force SSL

HTTPアクセスをすべてHTTPSへ自動リダイレクトします。
証明書がまだ発行されていない段階で有効にするとERR_SSL_PROTOCOL_ERRORが発生するので注意。

HTTP/2 Support

HTTP/2という新しい(とはいえ2015年に登場だけど)バージョンのHTTPを有効にします。
なんか強そうなので有効にしておきます。

HSTS Enabled

HSTSとはHTTP Strict Transport Securityの略で、これを有効化すると、ブラウザが次回以降は常にHTTPSでしか接続しないようになります。
有効にしておくことをおすすめしますが、SSLの設定等が完了して安定するまでは無効で良いと思います。

HSTS Subdomains

HSTS Enabledが有効のときに有効化できます。
サブドメイン(api.example.com, cdn.example.com)もHSTS対象に含めます。
基本的に無効で良いと思います。

Use a DNS Challenge

よくわからん
とりあえず無効

Email Address for Let’s Encrypt

Let’s Encryptに登録するメールアドレスを入力します。
証明書の有効期限やエラー通知などが届きます。
いつも使用しているもので良いでしょう。

I Agree to なんちゃら

そのままです。とりあえず同意!

設定完了

AdvancedタブではNginxの設定を手動で記述できます。お好みでどうぞ

設定が完了したらSaveを押して進みます。

ルーターのNATをNPMに向けてDNSとかちゃんと設定すれば繋がるようになります。

ワイが苦戦したポイント

SSL発行エラー

Force SSLを有効化した状態で証明書が未発行だった。

一時的にForce SSLをOFF
Let’s Encryptで新規発行
成功後にForce SSLをON

Cloudflareを使用している場合は、DNSプロキシを一旦無効(オレンジ雲を灰色雲にする(?))にすると証明書を再発行できます。

リダイレクトループ (ERR_TOO_MANY_REDIRECTS)

NPM側とWordPress側のHTTPSリダイレクトが二重に働いていた。

SSLの終端はNPMにしましょう。
.htaccessの設定をいろいろしてください(投げやり)
wp-config.phpの設定の問題もありえます。
WordPress側で以下の設定をwp-config.phpの1行目の<?phpの直下に追記してみてください。

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
}

まとめ

NPM簡単なのでぜひ使ってみてください!

おわり