how to deploy Web server & API server in 1 heroku app? Heroku + Docker (deployed with heroku.yml)

I want to deploy Vue app whose script has a couple of ajax request to django API server like follows:

getRecordList: function(){
  this.records = [];
  this.$axios
  .get('http://[ip address for API server]')
  .then(response => {})
  .catch(err => {})
  })

I am thinking to deploy this app to heroku with the following heroku.yml.
But both web and api container has to accept http request.
The container with the name: ‘web’ only accepts Http request.
(According to heroku website)

Should I create multiple heroku app?
Or is there any workaround?

Any suggestions are appreciated. Thank you for your time.

what I do for deploying

git add heroku.yml
git push heroku master

and this will push the whole images to the heroku repository,
in running process, CMD lines will be executed.

heroku.yml

build:
  docker:
    web: bootstrapdebug/Dockerfile
    api: apis/Dockerfile

apis/Dockerfile

FROM python:3.6
ENV PYTHONBUFFERED 1
WORKDIR /app
COPY . /app/apis
WORKDIR /app/apis
RUN python3 -m pip install -r requirements.txt --no-cache-dir
CMD ["python", "manage.py", "runserver", "0.0.0.0"]

bootstrapdebug/Dockerfile

FROM node:12.10.0-alpine
WORKDIR /app
COPY . /app/bootstrapdebug
WORKDIR /app/bootstrapdebug
RUN apk update && 
    npm install && 
CMD ["npm", "run", "serve", "--", "--port", "$PORT"]

Source: StackOverflow