LoginSignup
8
3

GitHub Codespacesのポートフォワーディング(Public指定)が面倒なとき

Last updated at Posted at 2023-06-04

LINE Bot開発などをする際には開発サーバーをローカル起動させるだけではなく、起動したサーバーに外部のインターネットからリクエストをもらう必要があるため、ngrokなどでトンネリングする必要がありました。

GitHub Codespacesを使うことで、開発環境自体がクラウドになるためローカルPCのトンネリングは要らず、ボタンを押すだけで公開状態のサーバーを作ることができます。

...が

毎回Publicに変更するのが面倒

node app.jsなどでプログラムを起動させた際にローカルサーバーを起動すると、GitHub Codespacesが自動的にアドレスを発行してくれます。このURLをLINE Bot開発の際には管理画面のWebhook URLのアドレスとして利用します。

https://n0bisuke-xxxxxx-xxxxxx-xxxxx-3000.preview.app.github.devのようなURLが発行されます。

ただこの際に、
右クリックでメニュー表示 -> ポートの表示範囲 -> Publicを選択を毎回やらないといけません。

ローカルサーバーのプログラムを起動した際に自動で立ち上がるフォワーディング(ポート転送)の設定が毎回Privateがデフォルトになっているため、コードを直した際に毎回これをやらないといけません。

クソ面倒ですね。

スクリーンショット 2023-06-04 16.32.59.png

自動転送ではなく自身で指定することで回避

ポートの追加を自身で一度設定しておくことで回避できました。
(デフォルトをPublicにするような設定もどこかにありそうですが今の所調べられてません)

プログラムを起動する前にポートを指定

node app.jsなどでプログラムを起動させる前に、ポートタブからForward a Portのボタンを押し、3000などの数字を指定します。

そして表示範囲をPublicに指定しましょう。

スクリーンショット 2023-06-04 16.45.27.png

これをやることで、配信元の項目がユーザーによる転送になります。

(ちなみにプログラムを先に起動させるやり方だとここが"自動転送"になっていて、自動転送だとプログラム編集のたびにPrivateに戻ってしまうようです。)

あとはプログラムを起動させればOKです。
このやり方だと プログラムを修正して再起動してもURLはPublicになったままなので、毎回Publicにしなおさないといけない手間から解放されます。

まとめと補足

結論としては、 ポート指定を先にしてから、開発をしはじめると良いです。

授業でよくこの辺を実施していて、ngrokを使っていた時代はngrokプログラムを起動しっぱなしで公開URLやその設定も変わらずだったので便利でしたが、インストールでそもそもこける人が多かったりしてトラブルが多いポイントでもありました。

最近はGitHub Codespacesでの開発にすることでトラブルは激減しましたが、意外と手間な部分もあるんだなと感じたのが今回でした。結構地味なポイントで気付きにくいポイントだったので実際に触ってみるのはやはり大事ですね。

サーバーもエディタ(VS Code)もGitやGitHub周りも統合された環境なので全て把握できるかというと難しいところはありますが、かなり便利なので使い方をもっと調べていきたいところです。

※ちなみにコードはこちらの記事で利用しているものを使っています。

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
3