Nuxt×Express Herokuのポートで苦労した

背景

NuxtとExpressを使ってしりとりゲームを作成してみました。

そこで、デプロイするにあたってHerokuを選択したのですが、苦労した点を記録として残します。
※ なんとかしてデプロイできただけで最善策だとは思っていないのでより良い方法をご存知の方に教えていただきたいです。

環境

• node 16

• express 4.17.3

• nuxt 2.15.8

• heroku 7.53.0

• Docker 20.10.8

悩み port指定がわからない

今回、Socket通信を使ってNuxt側とExpress側で通信をしました。
開発環境では以下のdocker-comose.ymlのように2ポート開放して、それぞれのポートで通信を行っていました。

version: '3.8'
services:
  nuxt:
    build: ./nuxt
    ports:
      - "3000:3000"
      - "3001:3001"
    volumes:
      - "./nuxt:/nuxt"
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true
volumes:
  node_modules_volume:

ただ、Herokuにデプロイする際に悩みました。
Herokuのコンテナデプロイを今回始めて利用したのですが、解放されるポートはHeroku側で設定されるようで、こっちから指定することができませんでした。

また、Herokuのコンテナデプロイはdocker-compose.ymlを読み取ってくれるような仕組みはない？
-> heroku.ymlを設定することでうまくできるような気もしますが、そこまで深く調べることができず、Dockerfile2つで解決しようという気になりました。

対処法

画像のようにそれぞれをDockerイメージで作成し、それぞれのherokuにデプロイ。デプロイしたドメインに対して通信をするという風にすることで解決しました。

FROM node:16-alpine3.14

RUN mkdir -p /nuxt
COPY . /nuxt
WORKDIR /nuxt

RUN apk update
RUN yarn global add create-nuxt-app
RUN yarn install
RUN yarn build

ENV HOST 0.0.0.0
EXPOSE 3000
CMD [ "yarn", "start" ]

FROM node:16-alpine3.14

WORKDIR /usr/src/app
COPY . .
RUN yarn install
EXPOSE 3001
CMD [ "yarn", "start" ]