はじめに
あのtailscaleがVSCodeの拡張機能を出したらしいからそれをつかってWebサイトを簡単に外部公開してみましょうという記事です。
tailscaleとは
Tailscaleは、雑に要約するとVPNがありえんほど簡単に使えるようになるサービスです
詳細はいろんなサイトを見てください
tailscaleをインストール
こちらなどを参考にインストールしてください（上のリンクとおなじ）
このサイトは詳細に書いてありますが、やることはtailscaleのインストールと認証程度で良いはずです。
tailscaleの拡張機能をvscodeのインストール
こちらをインストール（2023/6/3現在)
拡張機能でtailscaleと検索すれば一番上にヒットします
それでは、使えるかやってみましょう。
適当なwebサイトを立ち上げる
それぞれでwebサイトを作成してください。
自分はdjangoのプロジェクトを新規作成し、http://127.0.0.1:8000/ で動くことを確認しました。
公開したいサイトのポートはユーザーが入力するので、8000以外でも構いません。
さっそくtailscaleで公開
とりあえず使えるか確認しましょう。
CMD + Jでパネルを開いて、TAILSCALE:FUNNELというのを開きましょう。
まだ使えないらしいです。Funnelを有効化しろと言っています。
Enable Funnelより、リンクへアクセスしてみると、セットアップ手順が書かれているので、言われたとおりに有効化を進めます。
MagicDNSとHTTPS Certificatesの有効化
https://login.tailscale.com/admin/dns ここのMagicDNSとHTTPS Certificatesを有効化する
このように赤いボタンになっていれば有効化されている 白いボタンだったらクリックして有効化しましょう
Funnelの有効化
アクセスコントロールに言われたとおりに以下のコードを貼り付けます。
Click the Add Funnel to policy button. Clicking this button adds the default nodeAttrs section and saves the tailnet policy file automatically. The default nodeAttrs section looks like:
Add Funnelボタンを押せばいいと書いてありますが、私の場合はボタンがなかったので、下記コードを貼り付けました。
"nodeAttrs": [
{
"target": ["autogroup:members"],
"attr": ["funnel"],
},
],
リストの末尾に追加すればいいと思います。
パネルの確認
funnelが有効化されてる！
接続確認
127.0.0.1:<port>にポートを入力（自分の場合は8000）し、Start!
アクセスできました！
余談
自分は新規にセットアップしたdjangoのプロジェクトで試したので、最初はsettings.pyのALLOW_HOSTSに何も設定してなかったためにエラーが表示されました
その後ALLOW_HOSTS = ["*"]として、表示ができました。