WebUIをスマホ上から外出先で操作する方法(構築編)
はじめに
前回(WebUIをスマホ上から外出先で操作する方法(基礎知識編))の続きになります。
ご覧頂いていない方は、こちらの記事内容を鵜呑みにする前に、外出先でのアクセスの仕方には様々な方法がありますので、基礎知識編からご覧ください。
今回取り扱う方法は、導入には少し難があるものの、実装すると便利の幅が広がるものです。
是非、皆さんもチャレンジしてみてください。
実装内容
今回は以下の通りに実装します。
起動バッチに[ --listen ]を付与し、イントラネット環境にVPN経由でHTTP接続する
この手法を用いて出来るようになることは以下になります。
ローカルPC内に起動している、WebUIへアクセスすることができる
ローカルPC内のファイルへアクセスすることができるようになる
また、VPN接続を行えば、WebUIアクセスに限らず、様々な用途にも使うことができます。
AIイラストとは関係ありませんが、実用例を挙げてみます。
PCにメディアサーバを立ち上げ、スマホ上でストリーミング再生を行える
外出先で自宅のネットワークプリンタで印刷が可能になる
PC内のファイル編集などができるようになる
上記は、あくまで一例です。
自身がいつも使っているPCへアクセスし、スマホへ好きなデータを持ってくることができますし、自宅のLAN環境へアクセスすることが可能になるので、利用の幅は広がるのではないでしょうか。
VPN技術について
VPNとは
安全性について
VPNのメリット・デメリット
実装構成
今回、実装する構成は以下になります。
今回、VPNサーバを構築するソフトウェアは以下を利用します。
筑波大学大学院研究プロジェクトから公開されているOSS、SoftEther VPNを利用して実装しようと思います。
VPN構築
SoftEther VPNの導入
まず初めに、今回導入するSoftEther VPNをインストールしましょう。
以下から、ソフトウェアをダウンロードすることができます。
必要なコンポーネントをダウンロードしましょう。
今回はVPN Serverを使用しますので、以下をダウンロードしてください。
2023年5月時点では最新バージョンはVer 4.41.9787ですね。
ダウンロードする時期によってバージョンは変わりますが、最新バージョンをダウンロードして問題ありません。
次に、ダウンロードした実行ファイルを実行しましょう。
以下のような画面が表示されますので、内容に従ってセットアップを完了させます。
SoftEther VPN Serverを選択し、次へを押してください。
使用許諾契約書(ライセンス)と免責事項です。同意にチェックを入れて次へ進みましょう。
次に、インストール先フォルダの選択です。
デフォルトのままでいいと思いますが、インストール先を変更したい方は適時変更してください。
また、共有PCを利用されている方は、「上級者のためのインストールオプション」にチェックを入れて、使用できるユーザーを選択することができます。
利用環境に応じて変更してください。
次へを押すと、インストールが開始されます。
インストールが完了すると、以下のような画面が表示されます。
そのまま、完了を押しましょう。
SoftEther VPNの設定
インストールが完了すると、SoftEther VPNサーバ管理マネージャが開きます。
初回インストール時には「localhost」向けの接続設定が1つあると思います。
私の場合は既に別IP向けの接続設定がされている為、マスク処理しています。
接続設定(localhost)がある方は、以下の次の区切り線内の作業は飛ばして頂いて構いません。
接続設定を誤って消したり、接続設定がない方は以下にて追加していきましょう。
「新しい接続」をクリックします。
接続設定画面が表示されますので、必要項目を埋めていきましょう。
今回は以下のように設定しています。
接続設定名:localhost
ホスト名:(このコンピュータ(localhost)に接続にチェック)
ポート番号:5555
プロキシ:TCP/IP直接接続
管理モードの選択とパスワードの入力:サーバ管理モード
管理パスワード:(空白)
接続設定名は任意項目なので、自身で分かりやすい名前を入力してください。
また、管理パスワードですが、後に設定するのでここでは空白でOKです。
ここまで出来たらOKを押しましょう。
次に、接続を押しましょう。
初回接続時、管理者パスワードの設定するよう促されますので、設定したいパスワードを入力してください。
設定変更などで管理マネージャにアクセスする際に必要になりますので、忘れないものにしましょう。
管理者パスワードの設定が完了すると、以下の画面が表示されます。
今回の実装環境自体、小規模ネットワークである為、「リモートアクセスVPNサーバー」を選択し、次へを押しましょう。
次は、仮想HUB名の設定です。
仮想HUB名は管理上の名前なので、任意の名前を入力して、OKを押してください。
ここでは、デフォルトのVPNを指定しています。
次に、DDNS設定です。
セキュリティ上、私のネットワーク情報に関する部分はマスクしています。
DDNSのホスト名は自由に変更が可能です。
任意のDDNSホスト名を入力して、閉じるを押してください。
VPN Azureクラウドサービスの設定が表示されますが、今回は使わないので「VPN Azureを無効にする」にチェックを入れて、OKを押してください。
次に、簡易セットアップの実行画面が表示されます。
「ユーザーを作成する」をクリックしましょう。
次に、ユーザ作成画面が表示されますので、以下赤枠の項目を埋めてください。
今回は以下のように設定しています。
ユーザー名:hogehoge
認証方法:パスワード認証
パスワード:hogehoge
必要項目を入力したらOKを押してください。
ユーザ「hogehoge」が登録されました。
登録が確認出来たら、閉じるを押してください。
続いて、モバイルデバイスが接続できるようにしましょう。
管理マネージャのメイン画面にて、「IPsec/L2TP設定」をクリックしてください。
次に、「L2TPサーバ機能を有効にする(L2TP over IPsec)」にチェックを入れ、「IPsec事前共有鍵」(Pre-shared key)を設定してください。
今回は、以下のように設定しています。
IPsec事前共有鍵:hogehoge
設定が終わったら、OKを押してください。
ここまで出来たら、接続の準備は整いました。
念のため、コマンドプロンプトでDDNS情報が広告されているか確認します。
nslookup <DDNSで発行されたURL>
上図のような表記になれば、DDNS情報は広告されています。
VPN Server側の設定は以上になります。
ホストPCのIPアドレス(IPv4)固定化
ホストPC(VPN ServerとなるPC)のIPアドレスは動的IPですと、次項で説明するポートフォワーディングでフォワーディング先に設定の揺らぎが生じてしまう為、ローカルIPは静的IPとして設定する必要があります。
Windows設定から「ネットワークとインターネット」を開き、IP割り当てを編集します。
今回は、IPアドレスを以下のように固定しています。
IPアドレス:192.168.11.4
サブネットマスク:255.255.255.0
ゲートウェイ:192.168.11.1
上記設定は一例の為、参考程度にしてください。
各々の環境に合うよう、適時変更してください。
ポートフォワーディングの設定
L2TPでは以下ポートを使用します。
ESPプロトコル(ポート番号:50)
ISAKMP/UDP(ポート番号:500)
IPSec-NAT-T/UDP(ポート番号:4500)
上記のポートフォワーディング設定をルータ側で行う必要があります。
これは、各々の環境によって異なります。
上図は一例として参考にしてください。
さて、これで接続の準備が完了しました。
では、次章で接続してみましょう。
VPN接続
ここからは、お手持ちのスマートフォン上で設定を行います。
筆者のデバイスがAndroidなので、Androidを例に設定を行います。
初めに、ネットワークとインターネット(ネットワーク設定)を開きます。
次に、VPN設定を開きます。
次に、SoftEther VPNで設定した情報を入力します。
今回、設定した内容を例に以下のように設定します。
名前:hogehoge
タイプ:L2TP/IPSec PSK
サーバアドレス:vpn660874111.softether.net
L2TPセキュリティ保護:未使用
IPSec ID:未使用
IPSec事前共有鍵:hogehoge
ユーザ名:hogehoge
パスワード:hogehoge
常時接続VPN:無効
設定内容によって入力項目の内容は変わります。
自身の環境に合わせて、適時修正して入力してください。
接続を実施します。
接続が確立すると、「接続されました」の表示と、右上に鍵マークが表示されます。
VPN確立成功です。
無事接続することができました。
起動バッチの引数変更
AUTOMATIC1111版WebUIでは、以下ファイルを実行することでWebUIが起動します。
.\stable-diffusion-webui\webui-user.bat
起動引数へ[ --listen ]を付与します。
--listenを付与することで、イントラネット上でWebUIの起動を共有することができるようになります。
@echo off
set PYTHON=
set GIT=
set VENV_DIR=
set COMMANDLINE_ARGS=--autolaunch --xformers --opt-channelslast --no-half-vae
set PYTORCH_CUDA_ALLOC_CONF=garbage_collection_threshold:0.6, max_split_size_mb:100,
call webui.bat
上記は、私の起動バッチの中身です。
ここに--listenを付与しましょう。
@echo off
set PYTHON=
set GIT=
set VENV_DIR=
set COMMANDLINE_ARGS=--autolaunch --xformers --opt-channelslast --no-half-vae --listen
set PYTORCH_CUDA_ALLOC_CONF=garbage_collection_threshold:0.6, max_split_size_mb:100,
call webui.bat
修正後、ファイルを保存して閉じましょう。
スマホからAUTOMATIC版WebUIへアクセスする
いよいよ終盤です。お疲れさまでした。
ここまでくればもう終わりです。
バッチを起動し、スマホからWebUIへアクセスしてみましょう。
アクセスする際の注意点があります。
PCからアクセスする際は「http://localhost:7860/」がデフォルトだと思います。
これを、PCの固定IPアドレスに変えます。
PCでアクセスする場合:「http://localhost:7860/」
スマホでアクセスする場合「http://<PCの固定IPアドレス>:7860/」
今回は、192.168.11.4がPCの固定IPですので、「http://192.168.11.4:7860/」となります。
さて、アクセスしてみましょう。
無事、WebUIへアクセスすることができましたね!
おわりに
今回は、WebUIをスマホ上から外出先で操作する方法(構築編)をお伝えしました!
結構、専門的な知識が必要なので、非常にニッチな構築方法ですが、VPN接続のメリットもあるので、皆さんも是非チャレンジして頂けたらと思います!
いや…これ参考になる人いるのかな…
よろしければサポートお願いします!✨ 頂いたサポート費用は活動費(電気代や設備費用)に使わさせて頂きます!✨