警告

このチュートリアルはコミュニティの貢献によるものであり、Open WebUIチームによるサポートは提供されません。これは、ご自身の特定の利用例に合わせてOpen WebUIをカスタマイズする方法のデモとしてのみ提供されています。貢献したいですか？貢献方法についてのチュートリアルをご覧ください。

Nginxを使用したHTTPS

ユーザーとOpen WebUI間の安全な通信を確保することは非常に重要です。HTTPS (HyperText Transfer Protocol Secure)は、送信されるデータを暗号化し、それを盗聴や改ざんから保護します。リバースプロキシとしてNginxを構成することで、Open WebUIデプロイメントにシームレスにHTTPSを追加し、セキュリティと信頼性を向上させることができます。

このガイドでは、HTTPSを設定するための3つの方法を紹介します:

• 自己署名証明書: 開発および内部使用に最適、Dockerを使用。
• Lets Encrypt: 信頼性の高いSSL証明書が必要な本番環境に最適、Dockerを使用。
• Windows+自己署名: Windows上で開発および内部使用向けの簡略化した手順、Docker不要。

ご自身のデプロイメントニーズに最適な方法を選んでください。

Nginx Proxy Manager

Nginx Proxy Manager

Nginx Proxy Manager (NPM) は、Open WebUI のようなローカルアプリケーションを、Lets Encrypt の有効な SSL 証明書を使用して簡単に管理し、安全にリバースプロキシすることができます。 この設定により、HTTPS アクセスが可能になり、多くのモバイルブラウザで音声入力機能を使用するために必要なセキュリティ要件を満たしつつ、アプリケーション固有のポートを直接インターネットに公開することなく使用できます。

前提条件

• Docker を実行しているホームサーバーと open-webui コンテナが動作していること。
• ドメイン名（DuckDNS のような無料オプション、Namecheap や GoDaddy のような有料オプション）。
• Docker と DNS 設定に関する基本的な知識。

手順

1. Nginx ファイル用ディレクトリを作成:

   mkdir ~/nginx_config
   cd ~/nginx_config

2. Docker を使用して Nginx Proxy Managerをセットアップ:

   nano docker-compose.yml

services:
  app:
    image: jc21/nginx-proxy-manager:latest
    restart: unless-stopped
    ports:
      - 80:80
      - 81:81
      - 443:443
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

コンテナを実行:

docker-compose up -d

3. DNSとドメインを設定:

   • ドメインプロバイダー（例: DuckDNS）にログインしてドメインを作成します。
   • ドメインをプロキシのローカルIPに指定します（例: 192.168.0.6）。
   • DuckDNSを使用する場合は、ダッシュボードからAPIトークンを取得します。

以下は https://www.duckdns.org/domains の簡単な例です:

4. SSL証明書を設定:

• http://server_ip:81 で Nginx Proxy Manager にアクセスします。 例: 192.168.0.6:81
• デフォルトの資格情報（[email protected] / changeme）でログインし、要求されたら変更します。
• SSL 証明書 → SSL 証明書の追加 → Lets Encrypt に進みます。
• DuckDNSで取得したメールアドレスとドメイン名を記入します。一つのドメイン名にはアスタリスクが含まれ、もう一つのドメインには含まれていません。例: *.hello.duckdns.org と hello.duckdns.org。
• DNSチャレンジを使用するオプションを選択し、DuckDNSを選んでAPIトークンを貼り付けます。 例: dns_duckdns_token=f4e2a1b9-c78d-e593-b0d7-67f2e1c9a5b8
• Let’s Encrypt の利用規約に同意して保存します。必要に応じて伝播時間を変更します (120秒の場合あり)。

5. プロキシホストを作成:

• 各サービス (例: openwebui、nextcloud) のために、Hosts → Proxy Hosts → Add Proxy Host に進みます。
• ドメイン名（例: openwebui.hello.duckdns.org）を入力します。
• スキームをHTTPに設定（デフォルト）し、Websockets support を有効にし、Docker IPを指定します（nginx manager と open-webui が同じコンピュータで動作する場合は、前述のIPと同じになります。例: 192.168.0.6）
• 先ほど生成したSSL証明書を選択し、SSLを強制し、HTTP/2を有効にします。

6. open-webuiへのURLを追加（HTTPSエラー回避のため）:

• ご自身のopen-webui → 管理パネル → 設定 → 一般 に移動します。
• Webhook URLテキストフィールドに、Nginx リバースプロキシ経由で open-webui に接続する際のURLを入力します。例: hello.duckdns.org （これは必須ではない）または openwebui.hello.duckdns.org （これは必須）。

WebUIへのアクセス:

HTTPS経由でOpen WebUIにアクセスします。例: hello.duckdns.org または openwebui.hello.duckdns.org（設定に応じて）。

ファイアウォールに関する注意: ローカルファイアウォールソフトウェア（Portmasterなど）が Dockerの内部ネットワークトラフィックや必要なポートをブロックする可能性があります。この設定が機能しない場合は、問題解決のためにファイアウォールルールを確認してください。

Lets Encrypt

Lets Encrypt

Lets Encryptは、ほとんどのブラウザに信頼される無料のSSL証明書を提供しており、本番環境に適しています。

前提条件

• Certbotがシステムにインストールされていること。
• DNSレコードが正しく設定され、サーバーにポイントしていること。

手順

1. Nginxファイル用のディレクトリを作成する:

   mkdir -p conf.d ssl

2. Nginx設定ファイルを作成する:

   conf.d/open-webui.conf:

   server {
       listen 80;
       server_name your_domain_or_IP;
   
       location / {
           proxy_pass http://host.docker.internal:3000;
   
           # WebSocketサポートを追加（バージョン0.5.0以降で必要）
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
   
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
   
           # （オプション）モデルから流れる応答を改善するためにプロキシバッファリングを無効化
           proxy_buffering off;
   
           # （オプション）大きな添付ファイルや長い音声メッセージのための最大リクエストサイズを増加
           client_max_body_size 20M;
           proxy_read_timeout 10m;
       }
   }

3. 簡易Lets Encryptスクリプト:

   enable_letsencrypt.sh:

   #!/bin/bash
   
   # 説明: Certbotを使用してLets Encrypt SSL証明書を取得、インストールする簡易スクリプト。
   
   DOMAIN="your_domain_or_IP"
   EMAIL="[email protected]"
   
   # Certbotをインストール（インストールされていない場合）
   if ! command -v certbot &> /dev/null; then
       echo "Certbotが見つかりません。インストール中..."
       sudo apt-get update
       sudo apt-get install -y certbot python3-certbot-nginx
   fi
   
   # SSL証明書を取得
   sudo certbot --nginx -d "$DOMAIN" --non-interactive --agree-tos -m "$EMAIL"
   
   # Nginxを再起動して変更を適用
   sudo systemctl reload nginx
   
   echo "Lets Encrypt SSL証明書がインストールされ、Nginxが再起動されました。"

   スクリプトを実行可能にする:

   chmod +x enable_letsencrypt.sh

4. Docker Composeの設定を更新:

   docker-compose.ymlにNginxサービスを追加:

   services:
     nginx:
       image: nginx:alpine
       ports:
         - "80:80"
         - "443:443"
       volumes:
         - ./conf.d:/etc/nginx/conf.d
         - ./ssl:/etc/nginx/ssl
       depends_on:
         - open-webui

5. Nginxサービスを開始:

   docker compose up -d nginx

6. Lets Encryptスクリプトを実行:

   SSL証明書を取得しインストールするスクリプトを実行:

   ./enable_letsencrypt.sh

WebUIにアクセス

HTTPS経由でOpen WebUIにアクセス:

https://your_domain_or_IP

自己署名

自己署名証明書

自己署名証明書を使用するのは、信頼性が重要な懸念事項でない開発や内部利用に適しています。

手順

1. Nginxファイル用ディレクトリを作成する:

   mkdir -p conf.d ssl

2. Nginx構成ファイルを作成する:

   conf.d/open-webui.conf:

   server {
       listen 443 ssl;
       server_name your_domain_or_IP;
   
       ssl_certificate /etc/nginx/ssl/nginx.crt;
       ssl_certificate_key /etc/nginx/ssl/nginx.key;
       ssl_protocols TLSv1.2 TLSv1.3;
   
       location / {
           proxy_pass http://host.docker.internal:3000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
   
           # (任意) モデルからのストリーミングレスポンスを向上させるためにプロキシバッファリングを無効化
           proxy_buffering off;
   
           # (任意) 大きな添付ファイルや長い音声メッセージのために最大リクエストサイズを増加
           client_max_body_size 20M;
           proxy_read_timeout 10m;
       }
   }

3. 自己署名SSL証明書を生成する:

   openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
   -keyout ssl/nginx.key \
   -out ssl/nginx.crt \
   -subj "/CN=your_domain_or_IP"

4. Docker Composeの構成を更新する:

   docker-compose.ymlにNginxサービスを追加する:

   services:
     nginx:
       image: nginx:alpine
       ports:
         - "443:443"
       volumes:
         - ./conf.d:/etc/nginx/conf.d
         - ./ssl:/etc/nginx/ssl
       depends_on:
         - open-webui

5. Nginxサービスを開始する:

   docker compose up -d nginx

WebUIにアクセス

Open WebUIにHTTPSを介してアクセスする:

https://your_domain_or_IP

---

Windows

WindowsでDockerを使用せず、自己署名証明書とNginxを使用する方法

基本的な内部開発用のインストールでは、Nginxと自己署名証明書を使用してOpen WebUIをHTTPSへプロキシすることで、LAN上のマイク入力などの機能を利用できます。（デフォルトでは、ほとんどのブラウザは非セキュアなlocalhost以外のURLでマイク入力を許可しません）

このガイドは、pipを使用してOpen WebUIをインストールし、open-webui serveを実行していることを前提としています。

ステップ1: 証明書生成用のOpenSSLをインストール

まずOpenSSLをインストールする必要があります。

Shining Light Productions (SLP)のウェブサイトから事前にコンパイルされたバイナリをダウンロードしてインストールできます。

または、Chocolateyをインストール済みの場合は、それを使用してOpenSSLを迅速にインストールできます:

1. コマンドプロンプトまたはPowerShellを開きます。
2. 次のコマンドを実行してOpenSSLをインストールします:

   choco install openssl -y

---

インストールの確認

インストール後、コマンドプロンプトを開いて以下を入力します:

openssl version

OpenSSLバージョン（例: OpenSSL 3.x.x ...）が表示されれば、正しくインストールされています。

ステップ2: Nginxをインストール

nginx.orgからWindows版公式Nginxをダウンロードするか、Chocolateyのようなパッケージマネージャーを使用します。 ダウンロードしたZIPファイルをディレクトリに解凍します（例: C:\nginx）。

ステップ3: 証明書生成

以下のコマンドを実行します:

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout nginx.key -out nginx.crt

生成されたnginx.keyとnginx.crtファイルを任意のフォルダ、もしくはC:\nginxディレクトリに移動します。

ステップ4: Nginxの設定

C:\nginx\conf\nginx.confをテキストエディタで開きます。

Open WebUIをローカルLAN経由でアクセス可能にする場合は、ipconfigを使用してLANのIPアドレスを確認してください（例: 192.168.1.15）。

以下のように設定します:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  $remote_addr - $remote_user [$time_local] "$request" 
    #                  $status $body_bytes_sent "$http_referer" 
    #                  "$http_user_agent" "$http_x_forwarded_for";

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  120;

    #gzip  on;

    # WebSocket (ストリーミング) を適切に処理するために必要
    map $http_upgrade $connection_upgrade {
        default upgrade;
              close;
    }

    # 全HTTPトラフィックをHTTPSにリダイレクト
    server {
        listen 80;
        server_name 192.168.1.15;

        return 301 https://$host$request_uri;
    }

    # HTTPSトラフィックを処理
    server {
        listen 443 ssl;
        server_name 192.168.1.15;

        # SSL設定（正しいパスを確認）
        ssl_certificate C:\\nginx\\nginx.crt;
        ssl_certificate_key C:\\nginx\\nginx.key;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
        ssl_prefer_server_ciphers on;

        # OCSP Stapling
        #ssl_stapling on;
        #ssl_stapling_verify on;

        # ローカルサービスへのプロキシ設定
        location / {
            # proxy_passはopen-webuiの実行中のlocalhostバージョンを指す必要があります
            proxy_pass http://localhost:8080;

            # WebSocketサポートを追加 (バージョン0.5.0以降で必須)
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # (オプション) モデルからのストリーミング応答を改善するためプロキシバッファリングを無効化
            proxy_buffering off;

            # (オプション) 大きな添付ファイルや長い音声メッセージのための最大リクエストサイズを増加
            client_max_body_size 20M;
            proxy_read_timeout 10m;
        }
    }

}

ファイルを保存し、nginx -tを実行して設定にエラーや構文問題がないことを確認します。Nginxをインストールした方法によっては、まずcd C:\nginxを実行する必要があります。

nginxを実行してNginxを起動します。すでにNginxサービスが開始されている場合は、nginx -s reloadを実行して新しい設定をリロードできます。

---

これで、https://192.168.1.15（または適切なLANのIPアドレス）でOpen WebUIにアクセスできるようになります。必要に応じてWindowsファイアウォールのアクセスを許可してください。

次のステップ

HTTPSの設定後、以下のURLから安全にOpen WebUIにアクセスしてください:

• https://localhost

ドメイン名を使用している場合はDNSレコードが正しく構成されていることを確認してください。本番環境では、信頼性の高いSSL証明書を取得するためにLets Encryptを使用することを推奨します。

---