Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to deploy frontend and backend in same heroku applications but different docker images

I'm creating a web application that has Angular for front end and Flask for back end. I already 'dockered' my applications but I'm not sure on how to get them in Heroku as the same application

I've been reading that some people has used a reverse proxy server (this means that both applications are in different heroku app and they connect them using a proxy like traeffik or haproxy). But I don't want to do this, I want them to be in the same application (Example: grupo-camporota.herokuapp.com)

I was thinking that I should push both images, one as web dyno (front) and the other one as a worker (backend) but I've read that the worked dyno it's not for this, but for EXTERNAL apis. I would like to upload both image into heroku and make them communicate between them.

I would like to know how to get this done (I'm pretty sure it's possible), since i'm kinda lost

like image 901
Cesar Avatar asked Sep 02 '19 12:09

Cesar


People also ask

Can I deploy frontend and backend on Heroku?

Each process has its own port in dev, but deploying on Heroku uses just one total. Put the working frontend in a subdirectory of root (such as /frontend ). Put the working backend in a subdirectory of root (such as /api -- the blogpost assumes the backend remains in the root directory -- either way is fine).

Can I deploy Docker containers on Heroku?

Heroku provides two ways for you to deploy your app with Docker: Container Registry allows you to deploy pre-built Docker images to Heroku. Build your Docker images with heroku. yml for deployment to Heroku.

What is the way to easily link a backend service Docker container with data only Docker container?

Two options would be: Create a docker bridge network manually. Here are the docs for that. You'd just want to define a network with docker network create , add that network in your docker-compose, and make sure you put your frontend container in the same network when you docker run it by using the --network option.

How to deploy backend from GitHub to Heroku?

On Heroku Dashboard, create a new App and connect it to your Github repository, click the manual deploy and check it with the public URL provided by Heroku Your backend should be up and running at Heroku scale!

How to communicate between Docker containers on Heroku?

It also looks like you can't communicate between Docker containers using a private network on Heroku. You may just have to deploy two apps (or host your front-end on a more appropriate static host). Thanks for answering Chris.

Is Netlify a good alternative to Heroku for backend app development?

This is a good way to split the complexity and responsibility in different codebases. While Heroku is a very good option to deploy an api-based backend app in seconds, Netlify is a much better solution for frontend app (build system, CDN and more). Here the steps and source code to start from zero to a minimal remote and working app.

Can You Run 2 apps on the same Heroku Dyno?

You can run 2 apps (frontend and backend) on the same Heroku dyno. It’s just not straightforward… There’s a tonne of ways it won’t work, and only 1 that will. Today we’ll walk though setting up a ReactJS/Node frontend and a Rails API backend.


1 Answers

Your backend can't be a worker dyno: only web dynos can receive traffic from the internet. And one app will only get a single port to listen on, so you can't run two services on a single app.

You could serve your front-end up from your back-end as static files, but I don't think that will work with Docker. Also, Flask doesn't like to serve static files itself, so that may not be a good fit either.

It also looks like you can't communicate between Docker containers using a private network on Heroku. You may just have to deploy two apps (or host your front-end on a more appropriate static host).

like image 70
Chris Avatar answered Sep 30 '22 14:09

Chris