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?