Azure の Static Web へ VPN 経由でのみアクセスを許可する

Azure StaticWeb Apps へのアクセスをVPN経由にする

Azure Static Web で静的なWEBサイトをホスティングするのだけど社内ルール的にVPNを介したアクセスにしないといろいろ手続きが面倒とのこと。
とりあえず、どのようにすればVPN接続のみにできるのかを調べたのでメモ。

StaticWeb Apps の設定

StaticWeb Apps へのアクセスを内部 (Vnet) からのアクセスに限定するためにプライベートエンドポイントを構成する。

プライベートエンドポイントを構成した瞬間にパブリックからのトラヒックは受け入れないらしいのでプライベートエンドポイントを設定する以外に設定を入れる必要はない。

（後述するが実は Vnet からのルーティングにはルーティングテーブルを入れる必要があるらしい。StaticWeb Apps の StaticWebAppConfig.json に追加する必要)

VPN Gateway の設定

Azure で VPN 接続をするには VPN Gateway を設定する必要がある。VPNと言ってもどこ対どこの接続なのかによってもいろいろ設定があるようだが、今回のようにクライアントPCとAzure側でVPNを張って、Azure上のコンテンツにアクセスするパターンであれば P2S (Point-to-Site) VPN となる。

P2S VPN についてはこちらのサイトの通りに実施した。

https://qiita.com/carol0226/items/283497c10c94785ebd28

クライアント側でルート証明書とクライアント証明書を作成し、ルート証明書をAzure側に登録する。

https://qiita.com/carol0226/items/e81a92fea2326030ce95

クライアント側の設定

Azure VPN Gateway を設定すると Azure ポータルから exe ファイルがダウンロードできるようになる。この exe ファイルをクライアント側で実行すると自動的に VPN の設定を入れてくれる。

あとは、Windows の　ネットワークとインターネット>VPN に出てきたVPNで「接続」をクリックすればVPNで接続が可能となる。

Azure 側で自動的に DNS の設定なども含めてくれているらしく、StaticWeb App の表示するFQDNでアクセス可能となる。

403: Forbidden が発生

上記設定をしてもVPN経由でのアクセスに対して 403 Forbidden が発生。原因は staticwebappconfig.json への IP whitelist の登録不備。

今回はVPNの払い出しアドレスを10.2.0.0/16としていたので、その払い出しアドレス空間を下記のように staticwebappconfig.json に networking の項目を追加。

{
  "networking": {
    "allowedIpRanges": [
      "10.2.0.0/16"
    ]
  }
}

なお、この networking が追加できるのは Standard 以上の StaticWeb Apps であることに注意。（プライベートエンドポイント自体が Standard 以上でしか設定できないので問題はないと思うが・・・念のため）

Azure 提供のVPN設定ファイルではなく Windows 標準の機能で可能か？

Azure ポータルからダウンロードできる exe ファイルではなく手動で Windows のVPNの構成をやってみた。結果としてVPNでの接続はできたものの DNS 周りの設定がうまくいかず、host ファイルに直接 FQDN とプライベートIPアドレスを記載し、さらにルーティングテーブルをローカルPCに記述するという何とも面倒なことをやったら何とか接続はできた。

ただ、結構、しんどい思いをしたのと、いまだに若干うまくつながらない部分がでてきたりするので、あまりお勧めはできない。