見出し画像

WebUIをスマホ上から外出先で操作する方法（構築編）

とーふのかけら

はじめに

前回（WebUIをスマホ上から外出先で操作する方法（基礎知識編））の続きになります。
ご覧頂いていない方は、こちらの記事内容を鵜呑みにする前に、外出先でのアクセスの仕方には様々な方法がありますので、基礎知識編からご覧ください。

今回取り扱う方法は、導入には少し難があるものの、実装すると便利の幅が広がるものです。
是非、皆さんもチャレンジしてみてください。

実装内容

今回は以下の通りに実装します。

  • 起動バッチに[ --listen ]を付与し、イントラネット環境にVPN経由でHTTP接続する

この手法を用いて出来るようになることは以下になります。

  • ローカルPC内に起動している、WebUIへアクセスすることができる

  • ローカルPC内のファイルへアクセスすることができるようになる

また、VPN接続を行えば、WebUIアクセスに限らず、様々な用途にも使うことができます。
AIイラストとは関係ありませんが、実用例を挙げてみます。

  • PCにメディアサーバを立ち上げ、スマホ上でストリーミング再生を行える

  • 外出先で自宅のネットワークプリンタで印刷が可能になる

  • PC内のファイル編集などができるようになる

上記は、あくまで一例です。
自身がいつも使っているPCへアクセスし、スマホへ好きなデータを持ってくることができますし、自宅のLAN環境へアクセスすることが可能になるので、利用の幅は広がるのではないでしょうか。

VPN技術について

VPNとは

「VPN」は「Virtual Private Network」の略で、日本語では「仮想専用線」と呼ばれます。

送信側、受信側にそれぞれに設置した機器で「カプセル化」と呼ばれる処理を行うことで、第三者には見えない仮想的なトンネルを形成して通信する仕組みです（「トンネリング」）。

また、通信時には正規の利用者であることを確認するために認証を行う、万一トンネルに侵入された場合に備えて通信内容は暗号化して送信する、などの技術を併せて採用することで、さらに通信の安全性を高めています。

これらの技術により、拠点間をいわば仮想の専用線で結び、安全に情報をやり取りすることができるわけです。

出典元：NTTPCコミュニケーションズ - そもそもVPNとは？その仕組みを解説
https://www.nttpc.co.jp/column/network/whats_vpn.html

安全性について

VPNは、セキュアなアクセスをするために必要なトンネリング技術や通信情報の暗号化など、セキュリティを意識したネットワーク構造になっています。
そのため、リモートワークなど離れた場所から、社内サーバーやシステムへ安全にアクセスできます。

出典元：NTTPCコミュニケーションズ - そもそもVPNとは？その仕組みを解説
https://www.nttpc.co.jp/column/network/whats_vpn.html

VPNのメリット・デメリット

リモートで社内ネットワークへのアクセスが可能（モバイル端末も可能）

2010年代後半から、働き方が多様化し、リモートワークなどが推奨されています。VPNであれば、PCからはもちろん、モバイル端末からもアクセスすることができます。離れた場所からでもセキュアでスピーディーな通信環境を利用できるため、様々な働き方に対応できます。

出典元：NTTPCコミュニケーションズ - そもそもVPNとは？その仕組みを解説
https://www.nttpc.co.jp/column/network/whats_vpn.html

情報漏洩がゼロとはいえない
VPNの種類によっては、セキュリティのレベルに差があるため、情報漏洩のリスクが完全に無いとはいえません。特にVPNの初期設定を誤ってしまうと、DNSやIP漏洩に繋がってしまう可能性があります。
セキュリティを意識しながら、設定を行いましょう。

通信速度が遅くなることもある
VPNの中でも、公衆回線を利用するインターネットVPNは通信速度が一定ではないというデメリットが挙げられます。これは時間帯によって変動するため、ある一定の時間になると通信速度が低下する可能性があります。

出典元：NTTPCコミュニケーションズ - そもそもVPNとは？その仕組みを解説
https://www.nttpc.co.jp/column/network/whats_vpn.html

実装構成

今回、実装する構成は以下になります。

ダイアグラム概略図

今回、VPNサーバを構築するソフトウェアは以下を利用します。

筑波大学大学院研究プロジェクトから公開されているOSS、SoftEther VPNを利用して実装しようと思います。

VPN構築

SoftEther VPNの導入

まず初めに、今回導入するSoftEther VPNをインストールしましょう。
以下から、ソフトウェアをダウンロードすることができます。

必要なコンポーネントをダウンロードしましょう。
今回はVPN Serverを使用しますので、以下をダウンロードしてください。
2023年5月時点では最新バージョンはVer 4.41.9787ですね。
ダウンロードする時期によってバージョンは変わりますが、最新バージョンをダウンロードして問題ありません。

VPN Serverコンポーネント ダウンロード

次に、ダウンロードした実行ファイルを実行しましょう。
以下のような画面が表示されますので、内容に従ってセットアップを完了させます。

SoftEther VPNセットアップウィザード画面

SoftEther VPN Serverを選択し、次へを押してください。

インストールするソフトウェアの選択

使用許諾契約書（ライセンス）と免責事項です。同意にチェックを入れて次へ進みましょう。

使用許諾契約書
重要事項説明書（免責事項）

次に、インストール先フォルダの選択です。
デフォルトのままでいいと思いますが、インストール先を変更したい方は適時変更してください。
また、共有PCを利用されている方は、「上級者のためのインストールオプション」にチェックを入れて、使用できるユーザーを選択することができます。
利用環境に応じて変更してください。

インストール先選択

次へを押すと、インストールが開始されます。

インストール準備完了画面
インストール中

インストールが完了すると、以下のような画面が表示されます。
そのまま、完了を押しましょう。

インストール完了

SoftEther VPNの設定

インストールが完了すると、SoftEther VPNサーバ管理マネージャが開きます。
初回インストール時には「localhost」向けの接続設定が1つあると思います。
私の場合は既に別IP向けの接続設定がされている為、マスク処理しています。

管理マネージャ画面

接続設定（localhost）がある方は、以下の次の区切り線内の作業は飛ばして頂いて構いません。
接続設定を誤って消したり、接続設定がない方は以下にて追加していきましょう。

「新しい接続」をクリックします。

管理マネージャ画面

接続設定画面が表示されますので、必要項目を埋めていきましょう。
今回は以下のように設定しています。

  • 接続設定名：localhost

  • ホスト名：（このコンピュータ(localhost)に接続にチェック）

  • ポート番号：5555

  • プロキシ：TCP/IP直接接続

  • 管理モードの選択とパスワードの入力：サーバ管理モード

  • 管理パスワード：（空白）

接続設定名は任意項目なので、自身で分かりやすい名前を入力してください。
また、管理パスワードですが、後に設定するのでここでは空白でOKです。
ここまで出来たらOKを押しましょう。

新しい接続設定の作成

次に、接続を押しましょう。

接続

初回接続時、管理者パスワードの設定するよう促されますので、設定したいパスワードを入力してください。
設定変更などで管理マネージャにアクセスする際に必要になりますので、忘れないものにしましょう。

管理者パスワードの設定

管理者パスワードの設定が完了すると、以下の画面が表示されます。
今回の実装環境自体、小規模ネットワークである為、「リモートアクセスVPNサーバー」を選択し、次へを押しましょう。

簡易セットアップ画面

次は、仮想HUB名の設定です。
仮想HUB名は管理上の名前なので、任意の名前を入力して、OKを押してください。
ここでは、デフォルトのVPNを指定しています。

仮想HUB名

次に、DDNS設定です。
セキュリティ上、私のネットワーク情報に関する部分はマスクしています。

DDNSのホスト名は自由に変更が可能です。
任意のDDNSホスト名を入力して、閉じるを押してください。

DDNS設定

VPN Azureクラウドサービスの設定が表示されますが、今回は使わないので「VPN Azureを無効にする」にチェックを入れて、OKを押してください。

VPN Azureクラウドサービス設定

次に、簡易セットアップの実行画面が表示されます。
「ユーザーを作成する」をクリックしましょう。

簡易セットアップの実行

次に、ユーザ作成画面が表示されますので、以下赤枠の項目を埋めてください。
今回は以下のように設定しています。

  • ユーザー名：hogehoge

  • 認証方法：パスワード認証

  • パスワード：hogehoge

必要項目を入力したらOKを押してください。

ユーザの新規作成

ユーザ「hogehoge」が登録されました。
登録が確認出来たら、閉じるを押してください。

ユーザの管理

続いて、モバイルデバイスが接続できるようにしましょう。
管理マネージャのメイン画面にて、「IPsec/L2TP設定」をクリックしてください。

メイン画面

次に、「L2TPサーバ機能を有効にする（L2TP over IPsec）」にチェックを入れ、「IPsec事前共有鍵」（Pre-shared key）を設定してください。
今回は、以下のように設定しています。

  • IPsec事前共有鍵：hogehoge

設定が終わったら、OKを押してください。

IPsec/L2TP設定

ここまで出来たら、接続の準備は整いました。
念のため、コマンドプロンプトでDDNS情報が広告されているか確認します。

nslookup <DDNSで発行されたURL>
nslookup実行

上図のような表記になれば、DDNS情報は広告されています。

VPN Server側の設定は以上になります。

ホストPCのIPアドレス(IPv4)固定化

ホストPC（VPN ServerとなるPC）のIPアドレスは動的IPですと、次項で説明するポートフォワーディングでフォワーディング先に設定の揺らぎが生じてしまう為、ローカルIPは静的IPとして設定する必要があります。

Windows設定から「ネットワークとインターネット」を開き、IP割り当てを編集します。

IP割り当ての編集

今回は、IPアドレスを以下のように固定しています。

  • IPアドレス：192.168.11.4

  • サブネットマスク：255.255.255.0

  • ゲートウェイ：192.168.11.1

上記設定は一例の為、参考程度にしてください。
各々の環境に合うよう、適時変更してください。

IP割り当て設定

ポートフォワーディングの設定

L2TPでは以下ポートを使用します。

  • ESPプロトコル（ポート番号：50）

  • ISAKMP/UDP（ポート番号：500）

  • IPSec-NAT-T/UDP（ポート番号：4500）

上記のポートフォワーディング設定をルータ側で行う必要があります。
これは、各々の環境によって異なります。

ポートフォワーディング設定

上図は一例として参考にしてください。
さて、これで接続の準備が完了しました。

では、次章で接続してみましょう。

VPN接続

ここからは、お手持ちのスマートフォン上で設定を行います。
筆者のデバイスがAndroidなので、Androidを例に設定を行います。

初めに、ネットワークとインターネット（ネットワーク設定）を開きます。

スマートフォン設定画面

次に、VPN設定を開きます。

VPN設定

次に、SoftEther VPNで設定した情報を入力します。
今回、設定した内容を例に以下のように設定します。

  • 名前：hogehoge

  • タイプ：L2TP/IPSec PSK

  • サーバアドレス：vpn660874111.softether.net

  • L2TPセキュリティ保護：未使用

  • IPSec ID：未使用

  • IPSec事前共有鍵：hogehoge

  • ユーザ名：hogehoge

  • パスワード：hogehoge

  • 常時接続VPN：無効

設定内容によって入力項目の内容は変わります。
自身の環境に合わせて、適時修正して入力してください。

VPＮ設定

接続を実施します。
接続が確立すると、「接続されました」の表示と、右上に鍵マークが表示されます。
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へアクセスすることができましたね！

おわりに

今回は、WebUIをスマホ上から外出先で操作する方法（構築編）をお伝えしました！

結構、専門的な知識が必要なので、非常にニッチな構築方法ですが、VPN接続のメリットもあるので、皆さんも是非チャレンジして頂けたらと思います！

いや…これ参考になる人いるのかな…

よろしければサポートお願いします！✨ 頂いたサポート費用は活動費（電気代や設備費用）に使わさせて頂きます！✨