Socket.io使用時にAngularでHerokuサーバーの動的PORTを取得する方法、または代替法はありますか？

Question

MEANスタックとSocket.ioで作ったアプリをHerokuにデプロイしようとしたら、Angularでサーバーの動的PORTが取得できなくて困っています。

そもそもHerokuではポートが固定ではなく、動的に変わるらしいです。

Nodejsの側では「process.env.PORT」変数で取得できるのに、Angular側のenvironment.prod.tsでは取得できません。

何か「process.env.PORT」変数で取得する以外に代替手段はあるのでしょうか？

一応、StackOverflowで似た様な質問(以下記載)を見つけたのですが、いまいち理解できずにいます。
https://stackoverflow.com/questions/33977845/socket-io-doesnt-work-in-production
https://stackoverflow.com/questions/36676815/nodejs-socketio-multiple-files
https://stackoverflow.com/questions/54156848/how-can-i-apply-the-heroku-generated-server-port-to-my-front-end-vue-js-app__イタリックテキスト__

以下　ソースコード
Github
https://github.com/Mori-Chan/Angular-async-means

該当コード

// ここをどの様に記述すれば良いのかがわかりません。
export const environment = {
  production: true,
  SOCKET_ENDPOINT: 'https://angular-async-means.herokuapp.com'
};

this.socket = io(environment.SOCKET_ENDPOINT);

const PORT = process.env.PORT || 3001;

httpServer.listen(PORT, () => console.log('Express server listening on port ' + PORT));

Answer 1

検討すべき方針として上から表示します。
「どうしてもそれじゃダメなんだよ！」なら次へ行く感じですね。

1. そもそもパスの始まりが何故/始まりじゃなくて、

ポート番号込みの絶対アドレス表記で指定しないといけないの？
2. ポート番号固定の方が良くない？
3. SSRやSSG等で含める手段もあるよ
4. 最悪AjaxでNode.jsに伺いに行く仕組みにするとかだね

特に1や2が採用出来ない理由が質問文に記載されていないので、
どうしてその質問が出るんだ感は少しありますね。

例えばWebサーバとSocket.ioのサーバが異なる場合でも
Nginxをメインの80番ポートに据えて、
パスの文字列部分でNode.jsのWebサーバとSocket.ioサーバを切り分けて中継する手法があります。
Nginxお得意のリバースプロキシですね。

参考記事: NginxのリバースプロキシでWebソケットを通す際の設定

これで1や2を採用出来ない理由は殆ど潰れるので、
まずNginxで解決出来ないかを検討してみてください。

---

次、Node.jsの仕様に関しての話です。

process.envはJavaScriptをRubyみたいな汎用スクリプト言語として使いたいから、
C++なんかでモジュールをゴテゴテ付け足しまくって、
processみたいな独自仕様を盛り込みまくったNode.jsという魔改造JSです。

そしてNode.jsのロールって単なるWebサーバなんですよね。
HTTPリクエストを待って、HTTPレスポンスを投げ返すのが要件でありお仕事。
この要件さえ満たせば別にNode.jsである必要がないんですね、PHPだろうがGolangだろうが何でも可能。

Chromeなんかのブラウザは、WebサーバにHTTPリクエストという文字列を送って、
HTTPレスポンスとしてHTMLを受け取って画面上に表示するのが仕事です。
その相手が実はNode.jsだろうがPHPだろうが心底どうでも良い。

その結果にJSファイルが入ってて「これ実行してDOM書き換えてね！」って言ってるわけです。
Chromeで実行されるJSは魔改造Node.jsではないのでprocess.envがありません。

---

実行環境の違いを理解した所で対策を考えていきましょう。
ポートという情報が欲しければ
HTMLやJSファイル内に直接流し込むという案もあります。

私にとってAngularは1系のJS時代の認識であまり詳しくないんですが、
2系以降はSSRやSSGなんかが強化されたんでしたっけ？

Node.jsのWebサーバがHTTPリクエストを受け取った時、
HTMLやJSファイルをブラウザに送信する前に、
そのファイルにポート番号の文字列を渡してしまう手法が考えられます。

まぁAngularには詳しくないので、それを専用で賢く解決する機能が用意されているかもしれません。
1、2の方針を採用できない場合はこの方法になると思うので調査してみてください。

Comments

[miyabi-sun]

あー、Heroku使いたいんですね
じゃあ1で紹介したNginx作戦はダメだわ
後で相応しい感じに修正しておきます。