How to deploy docker app to heroku with multi containers using Rails, React/Vite and Nginx

Question

I've created a docker app using docker-compose that's set up to run using multiple containers on my local environment. I'm using a Rails API backend with a React/Vite front end and it is all tied together using Nginx. My folder structure is set up like this:

.
├── _config.yml
├── frontend
│   ├── Dockerfile (this runs the react/vite app on port 4000)
│   └── ...React/Vite related files
├── backend
│   ├── Dockerfile (this runs the rails app on port 3000)
│   └── ...Rails related files
├── config
│   ├── nginx
│       └── nginx.conf (This runs nginx and port 8080)
├── docker-compose.yml

Here is my docker-compose.yml:

version: "3.9"
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: password
  backend:
    container_name: backend
    build: ./backend
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./backend:/myapp/backend
    ports:
      - "3000:3000"
    depends_on:
      - db
  frontend:
    container_name: frontend
    build: ./frontend
    working_dir: /myapp/frontend
    volumes:
      - ./frontend:/myapp/frontend
    command: "npm run dev"
    ports:
      - "4000:4000"
  nginx:
    container_name: nginx
    image: bitnami/nginx:1.10.2-r1
    volumes:
      - ./config/nginx:/bitnami/nginx/conf/vhosts
    depends_on:
      - backend
      - frontend
    environment:
      VIRTUAL_HOST: yourproject.docker
      VIRTUAL_PORT: 8080
    ports:
      - 8080:8080

And here is my nginx.conf which pulls my frontend and backend app into a single point of entry:

server {
  listen 8080;
  server_name apireact-activeadmin.docker;

  location /api {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://backend:3000;
  }

  # Other to frontend
  location /sockjs-node {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $host;

    proxy_pass http://frontend:4000;

    proxy_redirect off;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  location / {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://frontend:4000;
  }
}

Based on this set up, how do I structure my heroku.yml file in order to deploy my multi-container docker app to Heroku?