Welcome! Log In Create A New Profile

Advanced

How to serve React from subpath using Nginx

Posted by 5starkarma 
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 example.com *.example.com;
deny 143.198.76.27;

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`:
```
ReactDOM.render(
<Provider store={store}>
<BrowserRouter basename="/v2">
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
```
And for testing purposes I have made 3 routes:
```
function App() {
return (
<Routes>
<Route path="/" element={<CounterPage/>}/>
<Route path="/v2" element={<CounterPage/>}/>
<Route path="/v2/test" element={<CounterPage/>}/>
</Routes>
);
}
```
My nginx build process for the Docker image looks like this (and the files are verified to be there):
```
FROM ghcr.io/digibrainllc/example/frontend:latest 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/nginx.prod.conf /etc/nginx/conf.d
```
`example.com/v2`:
> 404 Not Found

I need all `example.com/v2` 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: 59
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