Nginx proxy instead of webpack (via docker)

A proxy is needed to solve CORS problems when contacting the backend

Frontend and backend normally run on different domains causing CORS problems, so you normally need to have the backend responding under a subpath (/api) under the same domain where the FE is served.

Webpack or Nginx ?

You can solve that via webpack proxy, but you can also us the more advanced nginx that will be likely also be used in production, so you have to write the config just once, and you can implement advanced mechanism (like the auth_request).

Nginx proxy

Nginx proxy running via docker and wrapping react-scripts

I’m going to show how to run a dockerised nginx proxy that “wraps” your current application in dev mode (react-scripts start / npm run start) on the fly, without the need to rebuild anything when a change is made.

  1. Create a docker-compose.yml file where you specify the exact nginx version used on prod
version: '3.1'services:
ui_proxy:
container_name: myapp_ui_proxy
restart: on-failure
image: "nginx:1.18.0-alpine"
volumes:
- ./nginx-local-proxy.conf:/etc/nginx/conf.d/default.conf:ro
ports:
- 8080:8080

2. Create a Makefile with a start target to make it easier to launch the whole thing with make start

.PHONY: help start

start:
npm run start:proxied
# perform checks if needed
docker-compose up -d ui_proxy

proxy-stop:
docker-compose stop ui_proxy

proxy-reload-config:
docker exec -it bolt_ui_proxy nginx -s reload || echo ui_proxy not running

proxy-logs-tail:
docker logs -f bolt_ui_proxy

3. Add the package.json custom start:proxedscript that launches webpack on the port 3000. In case you are not using webpack, just launch npm run startfrom the previous step (and make sure it’s reachable from the proxy like I did for webpack arguments below)

{
"scripts": {
...
"start": "webpack-dev-server --config .webpack.dev.js",
"start:proxied": "webpack-dev-server --config .webpack.dev.js --host=0.0.0.0 --port=3000 --disableHostCheck=true",
...
}
}

4. and last, the nginx-local-proxy.conf . Replace 5000 with the port the API listens to. You might need a rewrite rule if you need to strip the “api” part. The / means that everything not prefixed by /api goes straight to webpack.

Important: you cannot use `localhost` here as we are inside a docker container network. To listen to the host port (your machine where webpack and the API listens to) you have to use host.docker.internal. If your services run via the docker-compose file, then you can access them via their name (e.g. http://api:5000 if you have an api entry in the docker-compose).

server {
listen 8080 default_server;
listen [::]:8080 default_server;

location /api {
proxy_pass http://host.docker.internal:5000;
}

location / {
proxy_pass http://host.docker.internal:3000;
}
}

Usage

just type make start to launch webpack, and the proxy.

If you are making a change to the nginx proxy config, type make proxy-stop. To watch the proxy logs, make proxy-logs-tail

--

--

--

Software Engineer @ London [https://www.linkedin.com/in/elvisciotti]

Love podcasts or audiobooks? Learn on the go with our new app.

The need to Program: What after your High School/Junior College?

Apache Kafka : Introduction

How to trade tokens on Ontology ?

VSCode-nGQL, nGQL extension for VSCode

The Best PDF Readers for Reading and Annotation on Windows, Mac and Mobile Devices.

Principles of Cache Design in Web Application

How to Onboard New Developers

AUDIT: Service Agreement Signed With CERTIK.IO

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elvis Ciotti

Elvis Ciotti

Software Engineer @ London [https://www.linkedin.com/in/elvisciotti]

More from Medium

Reactive programming in action — part 1

Authentication — the bare minimum

Adding Amplify Auth to your Ionic/Angular projects.