えっ？！全部の受信ポートを拒否しながらVSCodeでリモート開発を？！【ConoHa編】
「できらぁ！！！！」
というわけで、この記事は、ConoHa Advent Calendar 2022 20日目 の記事です。急遽20日目が空いたので、急いで書きました。
はじめに
以前、Visual Studio Code(以下、VSCode) がRemote Tunnelという新しいリモート開発方法を提供開始したという記事を書きました。
こちらで「「え？ベンダが提供するWeb画面ベースのコンソールでもいいの？」に対しては「はい」です」と書いたので、実際に試してみましょうという記事になります。
著者のConoHa歴
Advent Calendarからいらっしゃった方は初めまして。@yoh1496と申します。
ConoHa VPSは趣味で2年近く使ってます（主にマイクラサーバーを立てたり、リバースプロキシにしてみたり）。 最近ConoHa WINGも契約しましたが死蔵しています。PHP勉強して動くものを載せたい…
想定読者
今回の内容は 前回記事の内容と変わりありません。ですので、詳しい内容は前回記事を参照いただくとして、今回は
- 具体的なイメージが掴みたい
- ConoHa使った場合にどうやるのかステップバイステップで知りたい
- ただ興味を持っただけ。ザックリ概要を知りたい
という方に読んでいただければと思います。
ConoHa での VSCode Tunnelの始め方
さて、ここからはConoHa VPSを使って、全ポート受信拒否設定をしつつVSCodeで乗り込んでみよう！という話になりますが、、、
ここからの内容は危険な可能性のある手順を含みます。
実施を推奨するものではありませんし、実施する内容を理解したうえで、実験的用途に限って試してください。
サーバーを作成する
では気を取り直して…まずはVPSを作っていきましょう。再三書かせていただきますが、万一があっても問題にならないように大事な本番環境とは分けて行ってください。
パスワードとネームタグを設定していきます。ネームタグは「vscode_dekiraa」としました。
そして本題の「接続許可ポートを全て拒否」にします。IPv4でもIPv6でも、80番ポートはおろかSSH用の22番ポートも開きません。
ここまでの基本的な設定が終わったら、code tunnelを導入すべく、VSCodeのCLIのダウンロードを行うスタートアップスクリプトを用意します。ここでの内容はVPSを作成したのちに、コンソールから自身で実施いただいても大丈夫です。
今回は、お手製のスタートアップスクリプトをGistに作ってそれを読むようにしてみました。（VSCode CLIのダウンロードと、バックグラウンドでの実行を行います）
【余談】
今回初めてスタートアップスクリプトを作ってみたんですが「テキスト入力」だと「追加」ボタンを押してもVPSが作成できませんでした。これは仕様…？
https://gist.githubusercontent.com/yoh1496/47023b37b0936502992622b658182e96/raw/c04ac04ea38a836ed04d7d9a4f710cf0bbf85c7c/vscode_tunnel_start.sh
ここまで完了したら「追加」ボタンを押してVPSを作成します。
作成されたサーバーのコンソールでcode tunnelを設定する
そして作られたVPSがコチラ。接続許可ポートに何もチェックが入っていないのがポイントです。（鉄壁の守り！）
では早速、「コンソール」に入ってみましょう。先ほどのスタートアップスクリプトを実行した後は「GNU screen」を使ってバックグラウンドでcode tunnelが動作しているので、まずは
- root でログインする
screen -rコマンドでバックグラウンドのcode tunnelにアタッチする
をやってみましょう。
すると、code tunnelを使用するにあたってのプライバシーポリシーやライセンスが表示されますので問題なければ「y」で同意します。
同意すると、GitHubのアカウントとデバイス（ここではVPS）を紐づけるための認証画面へのURL（https://github.com/login/device）が出ます。
それを今度はブラウザで開いてみましょう。未ログインの場合はログイン画面が出ますが、ログイン済みの場合はこの画面は表示されません。
表示された認証コード入力画面に先ほどのコードを入力します。
すると、「aaa.bbb.ccc.dddというIPアドレスからの認可のリクエストを許可しますか」的な画面が出るので「Authorize Visual Studio Code」ボタンを押します。ここではちゃんとIPアドレスが自分が建てたConoHa VPSのものであるか確認してください。
以下の画面が出れば（ほぼ）完了です。
接続用のURLを取得する
さて、ここまではGitHubの画面でデバイスとの接続を確立しましたが、いったんConoHaのコンソールに戻ります。
すると、新たに1行出力され、「このマシンになんという名前を付けますか？」と聞かれますので、いい感じの名前を付けます。（conoha_vscode_dekiraa としようとしましたが、長すぎて怒られたので vscode_dekiraa にしました）
そして、以下のように接続用URLが出力されればOK！これを使って接続することができます。
ブラウザでVSCodeを開いてみる
ここまで準備できましたら、いざ、接続用URLを開いてみましょう。前回デバイス接続に使用したブラウザで開いてみると、、、このようにお馴染みのVSCodeが開けばOKです。
拡張機能から開いてみる
手元のVSCodeの拡張機能からもやってみましょう。拡張機能で「tunnel」と検索して、出てきた「Remote Tunnels」をインストールします。
すると、「Remote Explorer」タブで「Remote」を選んだ時に、一覧に先ほど名前を付けたマシンの名前があることを確認できると思います。
名前を右クリックして「Open in Current Window」（もしくは名前右のボタン）してみると、、、
このようにいつものVSCodeアプリで開くこともできます。
ここからは普段通りに拡張機能をVPS側にもインストールして開発するもよし、VSCodeの便利機能を活用していろいろとやってみるもよしです。
終わりに
今回は「あえて接続許可ポートを無しにしてVSCode Remoteで乗り込む」ということをやってみたわけですが、無暗にポートを開けたくないときに頑張ってWeb画面のコンソールからポチポチやっていたのを劇的に改善できる方法かなと思っています（実際どれぐらいWeb画面のコンソールが使われているかは知りませんが。。。）。ネイティブ版（アプリ版？）VSCodeを使うことで、ファイルアップロードなどもできますし、ターミナルにコピペしたりも容易ですしね。
しかし、ここで紹介したのは極端な例で、あくまでネタと考えてください。実際にはrootのままトンネル作るのは危険ですし、まじめな環境で運用をする場合はコレをしない方がよいと個人的には思います。少なくとも、ログインユーザーは分けたいところです。
というか、ここまでするなら素直にSSHできるようにした方がよい気がしますね。もちろんキッチリセキュリティ対策はするとして。やっぱりcode tunnelが真価を発揮するのはグローバルIPを持たせられない環境（例えば自宅のPC）で使う場合かなという気がしますね。
ここまで書いておいて、結局使いどころは微妙な感じかなと思ってしまいましたが、初 ConoHa Advent Calendar、お邪魔させていただきました。21日目のかた、よろしくお願いいたします～！
ではでは、みなさまもよきConoHa VPSライフを！！
（そういえば、3年間のVPSきっぷ買ったけどまだ作ったVPS活用してないや… どうしよ）
