0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@utamaruru

Open WebUI + さくらのAI Engine + TailscaleでiPhoneで外からLLMを動かす

0
Posted at

はじめに

本記事では、Mac上に Open WebUI をDockerで立ち上げ、さくらのAI Engine をバックエンドのLLMとして使えるようにします。
さらに Tailscale によるVPNメッシュを使うことで、iPhoneから外出先でもそのMac上のOpen WebUIに安全に接続し、チャットできるようにするまでの手順をまとめます。ChatGPTやClaudeの無料枠でのチャットがすぐに使い切ってしまうので代替手段として用意してみました。

最終的な構成は次のようになります。

┌─────────────┐      Tailscale      ┌─────────────┐      インターネット      ┌─────────────────────┐
│  iPhone     │  ◄────────────────►  │    Mac      │  ◄──────────────────►  │ さくらのAI Engine   │
│  Safari     │   (暗号化トンネル)   │ Open WebUI  │                        │ api.ai.sakura.ad.jp │
└─────────────┘                      │  Docker     │                        └─────────────────────┘
                                     └─────────────┘

この構成のメリットは次の通りです。

  • Mac側で大規模言語モデルを動かす必要がない（GPU不要）
  • 自分専用のチャットUIをカスタマイズできる
  • Tailscaleの暗号化トンネルを使うので、ポート開放や固定IPが不要
  • 外出先のiPhoneからでも自宅・オフィスのMacに接続できる

想定読者

  • MacでDockerを使える方
  • さくらのAI Engineのアカウントトークンを持っている、または取得できる方
  • iPhoneから外出先で自分専用のAIチャットを使いたい方

使用する主な技術

  • Open WebUI: LLM向けのオープンソースWebチャットインターフェース
  • さくらのAI Engine: OpenAI互換APIを提供する日本の生成AI推論サービス
  • Docker Desktop for Mac: コンテナ実行環境
  • Tailscale: 簡単に構築できるメッシュVPN

前提条件

本記事の手順を実施する前に、以下が整っていることを確認してください。

  1. macOS が動作するMac（Apple Silicon / Intel どちらでも可）
  2. Docker Desktop がインストール済み
  3. さくらのAI Engine のアカウントトークンを取得済み
    • コントロールパネルから「APIキー」または「アカウントトークン」を発行してください
  4. Tailscale アカウントを作成済み
  5. iPhone にTailscaleアプリをインストール済み
    • App Storeで「Tailscale」を検索してインストール

手順の概要

  1. Open WebUIの起動ファイルを用意する
  2. .env でさくらのAI Engineを接続先に設定する
  3. DockerでOpen WebUIを起動する
  4. 初回セットアップを行い管理者ユーザーを作成する
  5. TailscaleをMacにインストール・ログインする
  6. iPhoneでもTailscaleにログインし、同じTailnetに参加する
  7. iPhoneのブラウザからMacのTailscale IP経由でOpen WebUIを開く

それでは順に進めていきます。

1. Open WebUIの起動ファイルを用意する

まず、Mac上に作業用ディレクトリを作成します。

mkdir -p ~/openwebui-sakura-byok
cd ~/openwebui-sakura-byok

続いて、以下の3ファイルを同じディレクトリに配置します。

  • docker-compose.yml
  • .env

以降の手順は、このディレクトリを前提に進めます。

docker-compose.yml の例

services:
  open-webui:
    image: ghcr.io/open-webui/open-webui:main
    container_name: open-webui
    ports:
      - "${OPEN_WEBUI_PORT:-3000}:8080"
    volumes:
      - open-webui-data:/app/backend/data
    environment:
      - OPENAI_API_BASE_URL=${SAKURA_API_BASE_URL:-https://api.ai.sakura.ad.jp/v1}
      - OPENAI_API_KEY=${SAKURA_API_KEY}
      - DEFAULT_MODEL=${DEFAULT_MODEL:-gpt-oss-120b}
    restart: unless-stopped

volumes:
  open-webui-data:

ポイントは以下の通りです。

  • Open WebUIは内部でポート 8080 を使うため、外部の 3000 にマッピングしています
  • OPENAI_API_BASE_URL にさくらのAI EngineのOpenAI互換エンドポイントを指定します
  • OPENAI_API_KEY は .env から読み込みます
  • DEFAULT_MODEL で新規チャット時の初期モデルを指定できます

2. .env でさくらのAI Engineを接続先に設定する

.env の内容例は次のようになります。

# Mac側でOpen WebUIにアクセスするポート
OPEN_WEBUI_PORT=3000

# さくらのAI Engine の OpenAI 互換エンドポイント
SAKURA_API_BASE_URL=https://api.ai.sakura.ad.jp/v1

# 全ユーザー共通のAPIキー（BYOKにする場合は空欄）
SAKURA_API_KEY=

# 新規チャット時のデフォルトモデル
DEFAULT_MODEL=gpt-oss-120b

BYOK（Bring Your Own Key）運用について

SAKURA_API_KEY を空欄にしておくと、共通キーは設定されません。
その場合、各ユーザーがOpen WebUIの設定画面から自分のアカウントトークンを入力する必要があります。

個人利用であれば .env に自分のキーを入れておくほうがシンプルです。
複数人で使う場合や、キーの課金をユーザーごとに分けたい場合はBYOK運用が適しています。

全ユーザーで共通のキーを使う場合

.env を次のように変更してください。

SAKURA_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

キーは実際のトークンに置き換えてください。

3. DockerでOpen WebUIを起動する

準備ができたら、Dockerコンテナをバックグラウンドで起動します。

docker compose up -d

初回はOpen WebUIのイメージをダウンロードするため、数分かかる場合があります。

起動状況を確認するには次のコマンドを使います。

docker compose logs -f

以下のようなログが出力されれば、起動は成功しています。

open-webui  | INFO:     Application startup complete.
open-webui  | INFO:     Uvicorn running on http://0.0.0.0:8080

ブラウザで動作確認

Mac上のブラウザで以下のURLにアクセスしてください。

http://localhost:3000

初回アクセス時には管理者ユーザー登録画面が表示されます。

4. 初回セットアップを行う

Open WebUIに初めてアクセスすると、最初のユーザーを作成する画面が表示されます。
最初に作成したユーザーが自動的に管理者になります。

  1. 名前、メールアドレス、パスワードを入力
  2. 「Create Account」または「ログイン」を選択

ログイン後、画面右上のユーザーアイコンから Settings を開きます。

APIキーが未設定の場合（BYOK運用時）

BYOKで運用している場合、各ユーザーは以下の手順でAPIキーを設定します。

  1. 右上のユーザーアイコン → Settings
  2. General → API Keys を開く
  3. OpenAI API Key の欄に、さくらのAI Engineのアカウントトークンを貼り付ける

これで、そのユーザーがさくらのAI Engineのモデルを利用できるようになります。

モデルが選択できるか確認

新規チャット画面でモデル選択ドロップダウンを開き、以下のようなモデルが表示されていれば成功です。

  • gpt-oss-120b
  • llm-jp-3.1-8x13b-instruct4
  • Kimi-K2.6
  • Kimi-K2.7-Code
  • Qwen3-VL-30B-A3B-Instruct

モデル一覧は今後追加される可能性があるため、さくらのAI Engineのコントロールパネルで最新情報を確認してください。

5. TailscaleをMacにインストール・ログインする

ここからは、iPhoneからMacへ接続するためのVPN設定です。

Tailscaleのインストール

  1. Tailscaleのダウンロードページ からMac用アプリを入手
  2. dmgファイルを開いてアプリを Applications フォルダにコピー
  3. Tailscaleを起動

初回起動時に「Install VPN Configuration」と表示されたら、許可してください。

ログイン

Tailscaleのメニューバーアイコンをクリックし、Log in を選択します。
表示されるブラウザでTailscaleアカウントでログインすると、MacがTailnetに参加します。

参加後、メニューバーに接続状況と自分のTailscale IPが表示されます。

Tailscale IPの確認

ターミナルからも確認できます。

tailscale ip -4

出力例:

100.xxx.yyy.zzz

この 100.xxx.yyy.zzz が、MacへのTailscale経由アドレスです。
iPhoneからアクセスする際に使います。

Macのファイアウォール確認

macOSのファイアウォールが有効になっている場合、Dockerのポート公開がブロックされることがあります。

  1. システム設定 → ネットワーク → ファイアウォール を開く
  2. ファイアウォールがONの場合、一時的にOFFにするか、Docker Desktopの通信を許可するルールを追加

Tailscaleは暗号化トンネルを張るため、公衆回線から直接Macのポートが見えるわけではありませんが、同一Tailnet内からは到達可能です。

6. iPhoneでもTailscaleに参加する

iPhone側でもTailscaleアプリを使って同じTailnetに参加させます。

  1. App Storeで Tailscale をインストール
  2. アプリを起動し、Get Started をタップ
  3. Tailscaleアカウントでログイン（Macと同じアカウント）
  4. VPN構成の追加を許可

ステータスが Connected になればOKです。

同じTailnetに参加しているデバイス同士なら、どのネットワークにいても通信できます。

7. iPhoneからOpen WebUIにアクセスする

iPhoneでSafariを開き、以下のURLを入力します。

http://100.xxx.yyy.zzz:3000

100.xxx.yyy.zzz は、先ほど確認したMacのTailscale IPアドレスに置き換えてください。

うまく接続できれば、Open WebUIのログイン画面が表示されます。
Macで作成した管理者アカウントでログインすれば、チャットが利用できます。

MagicDNSを使う場合

TailscaleのMagicDNSを有効にしている場合、IPアドレスの代わりにホスト名でもアクセスできます。

例えばMacのホスト名が macbook-pro の場合:

http://macbook-pro.tailxxxxx.ts.net:3000

ホスト名はTailscaleの管理コンソールで確認・変更できます。

iPhoneから入力しやすくする

  • Safariのブックマークに登録しておく
  • ホーム画面に追加（Safariの共有メニュー → 「ホーム画面に追加」）

これで、いつでもワンタップでOpen WebUIを開けます。

セキュリティに関する注意

ポート開放は不要

Tailscaleを使う場合、ルーターのポート開放やグローバルIPは不要です。
すべての通信はTailscaleの暗号化トンネル内で行われます。

認証は必須

Open WebUIの初回ユーザー登録画面は、誰でもアクセスできる状態になっています。
最初に管理者アカウントを作成したら、次の設定を検討してください。

  • 新規登録を無効化する
  • 招待制にする
  • 強力な管理者パスワードを設定する

管理者画面の Settings → General などから制御できます。

まとめ

本記事では、以下の構成で「外出先のiPhoneからさくらのAIを使ったチャット環境」を構築しました。

  • Mac: Docker Desktop上でOpen WebUIを実行
  • バックエンドLLM: さくらのAI Engine（OpenAI互換API）
  • リモートアクセス: Tailscaleによる暗号化メッシュVPN

この構成であれば、自宅やオフィスのMacに負荷をかけずに、最新の大規模言語モデルを手元のiPhoneから利用できます。
ポート開放が不要なため、比較的安全に運用できるのも大きな利点です。

ぜひ、自分専用のAIチャット環境を作ってみてください。

参考リンク

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?