How to serve React from subpath using Nginx
March 02, 2022 10:58PM
My setup is a Django application served with gunicorn and Nginx. I am adding React one page at a time so therefore I need to only serve specific pages from React. To make it easier to route using Nginx I decided to make every React route start with `/v2/`.

Therefore the Nginx conf file looks like this right now:

upstream backend_server {
server backend:8000;

server {
listen 443 ssl;
listen [::]:443 ssl;
server_name *;

location /v2/ {
alias /usr/share/nginx/html;
try_files $uri /index.html;

location / {
proxy_pass http://backend_server$request_uri;
In the `package.json` I added the homepage:

"name": "frontend",
"homepage": "/v2",
I have also tried adjusting my `BrowserRouter`'s `basename`:
<Provider store={store}>
<BrowserRouter basename="/v2">
<App />
And for testing purposes I have made 3 routes:
function App() {
return (
<Route path="/" element={<CounterPage/>}/>
<Route path="/v2" element={<CounterPage/>}/>
<Route path="/v2/test" element={<CounterPage/>}/>
My nginx build process for the Docker image looks like this (and the files are verified to be there):
FROM as build

# Create production build
RUN npm run build

# Production Nginx image with frontend build files
# to be served by Nginx
FROM nginx:1.21-alpine

# Copy the frontend build files over to the directory
# which Nginx serves from
COPY --from=build /frontend/build /usr/share/nginx/html

# Remove the default Nginx settings
RUN rm /etc/nginx/conf.d/default.conf
COPY /nginx/conf/ /etc/nginx/conf.d
> 404 Not Found

I need all `` routes serving React and the rest routed to Django.

How can I accomplish this?
Sorry, only registered users may post in this forum.

Click here to login

Online Users

Guests: 118
Record Number of Users: 6 on February 13, 2018
Record Number of Guests: 421 on December 02, 2018
Powered by nginx      Powered by FreeBSD      PHP Powered      Powered by MariaDB      ipv6 ready