As the title says, I’m looking to serve a React app whose lifecycle is managed by Vite that is in turn part of a Docker Compose.
The nginx does successfully reverse proxy and I can see the index.html in the console, but the Vite files that kick off the app are 404-ing. Here are the components:
nginx.conf
location /myapp {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
Dockerfile
# Node.js image as base
FROM node:latest
WORKDIR /app
# Copy package.json and package-lock.json
COPY package.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application files
COPY . .
# Expose port 3000 (or the port your React app is running on)
EXPOSE 3000
# Now we are built - how do we serve?
# Start the React app using npm run dev
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "3000", "--debug"]
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.html"></script>
</body>
</html>
Here are the errors: