Separate frontend and backend with Heroku

Question

I have an application, let's call it derpshow, that consists of two repositories, one for the frontend and one for the backend.

I would like to deploy these using Heroku, and preferably on the same domain. I would also like to use pipelines for both parts separate, with a staging and production environment for each.

Is it possible to get both apps running on the same domain, so that the frontend can call the backend on /api/*? Another option would be to serve the backend on api.derpshow.com and the frontend on app.derpshow.com but that complicates security somewhat.

What are the best practices for this? The frontend is simply static files, so it could even be served from S3 or similar, but I still need the staging and production environments and automatic testing and so and so forth.

Any advice is greatly appreciated!

Answer 1

For what you are trying to you must use webserver for serving static content and provide access to container(gunicorn, tomcat, etc...) holding your app. Also this is best practice.

Asume your use nginx as webserver, because its easier to setup. nginx config file would look like this

# Server definition for project A server {     listen             80;     server_name        derpshow.com www.derpshow.com;      location / {         # Proxy to gUnicorn.         proxy_pass             http://127.0.0.1:<projectA port>;         # etc...     } }  # Server definition for project B server {     listen             80;     server_name        api.derpshow.com www.api.derpshow.com;      location / {         # Proxy to gUnicorn on a different port.         proxy_pass             http://127.0.0.1:<projectBg port>;         allow   127.0.0.1;         deny    all;         # etc...     } } 

And thats it.

OLD ANSWER: Try using nginx-buildpack it allows you to run NGINX in front of your app server on Heroku. Then you need to run your apps on different ports and setup one port to api.derpshow.com and other to app.derpshow.com, and then you can restrict calls to api.derpshow.com only from localhost.