HTTPS と認証機能を持たないコンテナ上の Web アプリをリバースプロキシ (Nginx Proxy Manager) 経由で比較的安全に公開する

要約

• 「 HTTPS と認証機能を持たないコンテナ上の Web アプリ」には今回 VSCode Server (code serve-web) を想定しているが HTTP でアクセスするものであれば他でもよい
  • (参考) VSCode Serverがなくなって本体に統合されていた
  • VSCode Server (code serve-web) をコンテナ上に構築する手順は次の記事で纏めたい
• HTTPS と Basic 認証機能を持つリバースプロキシを調べたところ GUI で設定できる Nginx Proxy Manager が一番お手軽そうだった
• Qiita でも Nginx Proxy Manager を扱っているものはあったが Basic 認証の設定方法や管理画面の HTTPS 化の手順をまとめた記事を見つけられなかったためここに残す
  • (参考) 【Nginx Proxy Manager】まだNginxやLet's Encryptの設定をCUIで頑張ってるの？
• 環境は以下を用いた
  • さくらのドメイン
  • Azure Virtula machines (ubuntu 20.04)

手順

VMの準備

• Azure 上に VM を作成する
  • Image は Ubuntu Server 20.04 LTS - x64 Gen2 を選択した
  • Size は Standard_B2als_v2 を選択したが他でも良い
• 作成した VM の IP を取得する
• 80, 81, 443 番ポートの Inbound を許可するよう Network を設定する
  • 80 を許可しないと HTTPS (Let's Encrypt) の有効化時にエラーになる

ドメインの準備

• 管理画面も HTTPS 化するため VM の IP を指すサブドメインを 2 つ準備する
  

Docker のインストール

• VM (ubuntu) に Docker をインストールする
  • production ではないため convenience script を用いてインストールした

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh ./get-docker.sh

• (オプション) sudo 無しで docker コマンドを実行できるようグループを設定する

sudo usermod -aG docker $USER

Web アプリのイメージを作成

• 今回詳細は割愛するが適宜ビルドを行い Web アプリのイメージを準備する

コンテナの起動

• Quick Setup に従い docker-compose.yml を VM 適当なディレクトリに格納する

docker-compose.yml

version: '3.8'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
# ここから Quick Setup に無い定義
    depends_on:
      - web
  web:
    image: 'my-vscode' # 前の手順で作成したイメージを指定
    restart: unless-stopped

• docker-compose.yml を格納したディレクトリで以下を実行する

docker compose up -d

Nginx Proxy Manager の設定

初回アクセス

• 前の手順で準備したサブドメインを用いて管理画面 (:81) にアクセスする
  • http://admin.{自分のドメイン}:81
  • この時点では HTTPS は使用できない
• Quick Setup に書かれているユーザーを用いてサインインする
• ユーザーやパスワードの変更を求められるので従う
  • HTTPS 化した後にパスワードを再度変更することが望ましい

管理画面の HTTPS 化

• GitHub の Issue に従い設定する
• "Proxy Hosts" をクリックする
  • 
• "Add Proxy Host" をクリックする
• "New Proxy Host" の Details を以下のように設定する
  • "Websockets Support" は Websockets を使用している可能性を考慮して有効化する
  • 
• "New Proxy Host" の SSL を以下のように設定して Save をクリックする
  • 
• 以下のように正しく設定できたことを確認する
  • 
• HTTPS でアクセスできることを確認する
  • https://admin.{自分のドメイン}
• HTTP のアクセスを不可にするため docker-compose.yml を修正する

docker-compose.yml

...
    ports:
      - '80:80'
#      - '81:81'
      - '443:443'
...

• 再起動する

docker compose down
docker compose up -d

Basic 認証の準備

• "Access Lists" をクリックする
  • 
• "Add Access List" をクリックする
• "New Proxy Host" の Name は後で分かる名前を適当に入力する
  • 
• "New Proxy Host" の "Authorization" に認証情報を入力する
  • 
• "New Proxy Host" の "Access" には IP 制限をしない場合は all を入力してから "Save" をクリックする
  • 

Web アプリへのリバースプロキシを設定

• "Proxy Hosts" をクリックする
  • 
• "Add Proxy Host" をクリックする
• "New Proxy Host" の Details を以下のように設定する
  • "Websockets Support" は Websockets を使用している可能性を考慮して有効化する
  • "Forward Hostname" には 'docker-compose.yml' で定義した Forward 先のサービス名を入力する
  • "Forward Port" は公開する Web アプリの仕様に合わせて入力する
  • "Access List" には前の手順で作成した "Access List" の Name を選択する
  • 
• "New Proxy Host" の SSL を管理画面の時と同様に設定する
• 以下のように正しく設定できたことを確認する
  • 
• Basic 認証が有効になっていることを確認する
  • https://web.{自分のドメイン}
• 以上です