自宅のPCを遠隔起動したいと一度は考えたことがあると思います。

5年ほど前に購入したSynologyNASからWoLを送れるようで、
こちらの記事 を参考にWoLを送ることができました。

ただこの方法ではDSMを開く必要があり、スマホからだと少々手間がかかりました。
そこで、ブラウザからWoLを送れるようにしました。

使用環境

おおまかな流れ

  1. HTMLとPHPでWoLを送るWebページを作成
  2. SynologyNASでWebStationを構築、ホスト
  3. Cloudflare Tunnelを利用し外部から接続できるようにする
  4. スマホのブラウザからWebページを開く
  5. PC起動

WoLを送るWebページをHTMLとPHPを使って作成

Webページは 参考記事（こたのお考え） 様を参考にさせていただき使用しました。
yashikota/wake-on-dsm.git をダウンロードし、index.htmlにMACアドレスを追記して使用しました。

index.htmlの下記ハイライト部分を編集･追記しました。

113
114
115
116
117
118
119
120
121

<body>
    <form action="wake.php" method="post">
        <label for="macSelect">Select MAC Address</label>
        <select name="macSelect" id="macSelect" onchange="toggleMacInput()" required>
            <option value="">Choose a MAC Address</option>
            <option value="AB:CD:EF:GH:IJ:KL">GamePC (AB:CD:EF:GH:IJ:KL)</option>
            <option value="12:34:56:78:90:12">StreamPC (12:34:56:78:90:12)</option>
            <option value="other">Other</option>
        </select>

Synology NASでWebStationを構築

※本記事ではWoLを送るための最低限しか解説しません。ご了承ください。

Synology NASのDSMからパッケージセンターを開き、Web Stationをダウンロードします。
インストール･起動を済ませた後、NASとローカルネットで繋がっている状態でhttp://[NASのIPアドレス]と叩けば、Your website is not set up yetと書かれたページが開かれるはずです（ファイルを削除したため参考画像撮れませんでした）。
このページが表示されればWebサーバとしての準備はできています。

次に、File Stationを開き、NAS/webというディレクトリを確認します。
こちらの中身を削除し、前項で作成したHTMLとPHPを設置します。
File station

そして先ほどのhttp://[NASのIPアドレス]を再度開くと、MACアドレスを選ぶページに飛べます。
これでWoLを送ることはできるようになりました。
Local WoL

次項で外部からこのページに接続できるようにしていきます。

Cloudflare TunnelでSynologyNASに接続する

Cloudflareの会員登録は済んでるものとして進めます。
プランはfreeで大丈夫です。

Cloudflare Tunnelの準備

まずCloudflareのホーム画面からZero Trustへ移動します。
Zero Trust

最初は支払いの設定をしないといけませんが、基本的に支払いが発生することは無いです。

次にTunnelを作成してきます。
メニューの中からネットワーク Tunnelsとクリックします。
Network_Tunnel

トンネルを作成するをクリックし、Cloudflaredを選びます。
make Tunnel

わかりやすい名前を設定します。
name Tunnel

次にコネクタのコマンドをコピーします。
環境はDockerを選択し、コネクタのコマンドをメモしておきます。
Connector

コマンドですが、一部分はSynology NASが自動で実行するものと被っているものがあるので添削します。
docker run cloudflare/cloudflared:latestの部分を削除します。

tunnel --no-autoupdate run --token 以下長いコードとなっていればOKです。
このコマンドはメモしておき、他人に漏らさないようにしてください。

Synology NASをTunnelにつなぐ

まずSynology NASにContainer Managerをインストールし、起動します。
※DSM7.1以下ではDockerを利用するみたいです。ただ、僕のDS420jでは利用できませんでした。
7.2.2にアップデートするとContainer Managerは利用できました。

左側のメニューからレジストリをクリックし、検索欄にCloudflare/Cloudflaredと入力します。
表示されたcloudflare/cloudflaredをクリックし、ダウンロードします。
container registry

タグはlatestにします。

ダウンロードが完了すると、イメージにcloudflare/cloudflaredが追加されています。
こちらをクリックし、起動します。
container image

コンテナを作成します。
自動再起動を有効にするのチェックだけ入れておきます。
make container

次にコンテナの詳細設定をします。
コマンドに先ほどメモしておいたコマンドを貼り付け、ほかは初期設定でOKです。
container settings

このコンテナを起動することでCloudflareとNASが繋がります。
コンテナから接続されている確認ができます。
container container

また、Cloudflare側でも接続を確認できます。
Cloudflare healthy

トンネルからWebページを開く設定をする

CloudflareとNASが繋がりましたので、次に先ほど構築したWebサイトを開きに行く設定をします。

まずはTunnelの編集画面を開きます。
利用するTunnelの右端の・・・ 編集とクリック。
Cloudflare tunnel config

設定画面のパブリックホスト名をクリックし、パブリックホストを追加するをクリック。
Cloudflare publicHost

好きなサブドメインと自分のドメインを入力し、
タイプはHTTP、URLにはNASのIPを入力します。
Cloudflare host

この設定したパブリックホスト名をURLに入力すると、先ほど作成したWebページが開かれるようになります。
今回の例では、URLはttp://tunnel_nas_wake_on_lan.iniwach.comとなります。

このURLを好きな端末から開き、wakeボタンを押せばwolが送られPCを起動できます。

セキュリティの設定

このままでは誰でもWebページにアクセスできる状態なので、メール認証を通過しないとページを開けないようにします。
ここで紹介するのは一例なので、お好みで設定してください。

Access アプリケーションとクリックし、アプリケーションを追加するをクリックします。
access app

種類はセルフホストを選択します。
selfhost

基本情報のアプリケーション名は分かりやすい名前を入れておきます。
セッション時間はお好みで。

パブリックホスト名を追加をクリックします。
add publichost

パブリックホスト名が追加されるので、入力します。
入力方法はデフォルト、サブドメインは先ほど設定したものを、ドメインは取得しているドメインを、パスは空欄で大丈夫です。
security app

次にAccessポリシーを設定します。
新しいポリシーを作成するをクリックすると、別タブでページが開きます。
policy settings

ポリシー名は分かりやすいものを設定し、アクションはAllow、セッション期間はアプリケーションセッションタイムアウトと同じとしてください。
認証方法の設定をしていきます。
policy action

ログイン方法を追加します。
セレクターはEmailsを選び、値に自分のメールアドレスを入力します。
policy authentication

以上でAccessポリシーが作成できました。

続いて、Accessのアプリケーション設定に戻ります。
既存のポリシーを選択をクリックし、先ほど作成したポリシーを選択します。
Access policy

最後に、ログイン方法から利用可能な全てのIDプロパイダーを受け入れるのチェックを外しておきます。
login setting

これでURLへアクセスしようとすると、メールアドレス認証の画面が出てくるようになったはずです。
Accessポリシーで設定したメールアドレスを入力すると、そのメールアドレス宛にワンタイムパスワードが発行されます。

この認証を通過すればwebページにアクセスできます。
セッション期間が切れるまでは再認証は不要です。

※ブラウザのプライベートウィンドウでアクセスして認証が発生することと、設定していないメールアドレスではワンタイムパスワードが発行されないことを確認してください。

小ネタ

NASのポート設定が初期設定であれば、
Tunnelで設定したパブリックホスト名を[NASのIP]:5000とすればDSMを開けます。
この:5000はポート番号です。

SynologyであればQuick connectがあるので不要かもしれませんが。

おわりに

これでどこにいてもネットさえあればWoLでPCを起動できるようになりました。
長年使っているNASが新たな形で活躍してくれて嬉しい限りです。

NASとCloudflare Tunnelは他にも遊べそうなので思いついたら実践して記事にします。

参考にした記事

SimpleLife : Synology DiskStationからWake on LAN
こたのお考え : SynologyのNASからWake On LANを送れるようにしてPCを起動できるようにする
ホームNW研究所 : SynologyのWebサーバをCloudflresのDNSにトンネルで接続する方法