How to add nginx as web server in heroku?

[gamesover]

First thing first, this is an amazing torturial to guide me how to setup a React SPA + Rails API as one project in heroku. Before, I have to seperate them as two projects(frontend and backend) to host in heroku.

I am really appreciated @superhighfives 's great jobs and efforts.

As we know, in a typical prod env, we use nginx as web server and puma/passenger as app server. It is very easy to config nginx to pass diff requests to either react(all other paths) or rails(by /api).

Previously, it seems very hard to setup both puma and nginx in one heroku dyno. However, currently heroku has some interesting buildpacks like https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static and https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nginx .

To be frank, I tried a couple of days but went nowhere. I would really appreicate if there is bonus 2 torturial to teach me how to config a react + nginx + puma + rails api into one heroku project. As traditionally, all requests shall hit nginx first and it is nginx's responsibility to forward diff requests to either puma/rails or react.

Thank you.

[superhighfives]

Hey @gamesover! Thanks for the kind words, and for trying out the tutorial.

Depending on your set up, there's no reason why you shouldn't be able to use those things together, but currently I've set it up to let Heroku handle the serving of files. Were you hoping to use an existing nginx set up?

[gamesover]

I hope to integrate https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nginx into my project, so that I can config something like

upstream app_server {
		server unix:/tmp/nginx.socket fail_timeout=0;
 	}

I tried in https://github.com/gamesover/hello-world/blob/master/config/nginx.conf.erb, but heroku just refused to start nginx, end with error like

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

I guess it mean nginx is not started

[superhighfives]

Hey @gamesover—yeah, there is a 60 second timeout during which you'll need the port to bind. Is $PORT being set correctly? I don't have a huge amount of experience with nginx, so I'm not sure what could be causing that.

[superhighfives]

You can use multiple buildpacks on Heroku, too: https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app

[gamesover]

Thanks. Yes, nginx has been listening to ENV['PORT'].

listen <%= ENV['PORT'] %>;

Heroku supports multiple buildpacks by default currently. We don't need to do anything except adding buildpacks in the settings.