It actually isn't too bad, just use an nginx config like this:
events {}
# assuming you want to serve your app on localhost:8080
# and assuming your webpack dev server runs on port 3000
http {
include /etc/nginx/mime.types;
server {
# assuming you want to serve the app on localhost:8080
listen 8080;
client_max_body_size 50m;
# webpack dev server
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
# use your port for your webpack dev server
proxy_pass http://host.docker.internal:3000/;
}
# this is specifically needed for hot reload with webpack dev server
location /sockjs-node {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
# 'host.docker.internal' is a docker dns record for your host machine's localhost,
# and '3000' should be the port of your webpack dev server
proxy_pass http://host.docker.internal:3000;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
access_log /etc/nginx/access.log;
error_log /etc/nginx/error.log debug;
}
And run nginx with a ./nginx.sh that looks like this:
#!/usr/bin/env bash
# path to your app's build directory
APP_BUILD_DIR=/path/to/my-app/build
# path of dir containing your nginx config
NGINX_CONF_DIR=$(pwd)
# name of your nginx conf file, relative to NGINX_CONF_DIR
NGINX_CONF_FILE=nginx.conf
# port at which nginx is serving your app
PORT=8080
# docker run docs: https://docs.docker.com/engine/reference/run/
# this will run an nginx container named 'nginx' as a daemon,
# and will mount NGINX_CONF_DIR in the container
docker run -d --name nginx \
-v=$NGINX_CONF_DIR:/etc/nginx \
-v=$APP_BUILD_DIR:/opt/base/my-app \
-p=$PORT:$PORT nginx \
nginx -c /etc/nginx/$NGINX_CONF_FILE -g "daemon off;"
And also a mime.types file in that directory that looks like this one.
So your directory structure should look like:
dir/
-- nginx.sh
-- nginx.conf
-- mime.types
-- ...
I'm assuming you're running your webpack dev server on your machine, not in a docker container? In my experience, I'd recommend that honestly. npm (or yarn) does its job so well that I haven't found a need to run my React apps in a container locally, even though I serve them through an nginx container.
Bonus: here's an nginx config if you want to run the same app, but serve the static bundle instead of the webpack dev server:
events {}
http {
include /etc/nginx/mime.types;
server {
# assuming you want to serve the app on localhost:8080
listen 8080;
client_max_body_size 50m;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
root /opt/base/my-app;
try_files $uri /index.html;
}
# matches things like http://localhost:8080/build/static/js/2.d63c51de.chunk.js
location /build/static/ {
alias /opt/base/my-app/static/;
try_files $uri $uri/;
}
}
access_log /etc/nginx/access.log;
error_log /etc/nginx/error.log debug;
}
Reference: this SO post
