LoginSignup
0
0

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

Posted at

要約

  • 「 HTTPS と認証機能を持たないコンテナ上の Web アプリ」には今回 VSCode Server (code serve-web) を想定しているが HTTP でアクセスするものであれば他でもよい
  • HTTPS と Basic 認証機能を持つリバースプロキシを調べたところ GUI で設定できる Nginx Proxy Manager が一番お手軽そうだった
  • Qiita でも Nginx Proxy Manager を扱っているものはあったが Basic 認証の設定方法や管理画面の HTTPS 化の手順をまとめた記事を見つけられなかったためここに残す
  • 環境は以下を用いた

手順

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 つ準備する
    sub-domain.png

Docker のインストール

  • VM (ubuntu) に Docker をインストールする
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) にアクセスする
  • Quick Setup に書かれているユーザーを用いてサインインする
  • ユーザーやパスワードの変更を求められるので従う
    • HTTPS 化した後にパスワードを再度変更することが望ましい

管理画面の HTTPS 化

  • GitHub の Issue に従い設定する
  • "Proxy Hosts" をクリックする
    • proxy-hosts.png
  • "Add Proxy Host" をクリックする
  • "New Proxy Host" の Details を以下のように設定する
    • "Websockets Support" は Websockets を使用している可能性を考慮して有効化する
    • details1.png
  • "New Proxy Host" の SSL を以下のように設定して Save をクリックする
    • ssl1.png
  • 以下のように正しく設定できたことを確認する
    • admin.png
  • HTTPS でアクセスできることを確認する
  • HTTP のアクセスを不可にするため docker-compose.yml を修正する
docker-compose.yml
...
    ports:
      - '80:80'
#      - '81:81'
      - '443:443'
...
  • 再起動する
docker compose down
docker compose up -d

Basic 認証の準備

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0