ReactJS

server {
    listen ${PORT};
    server_name _;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # skip this block if you don't have a backend yet
    location /api/ {
        proxy_pass http://{BACKEND_HOST}:${BACKEND_PORT};
        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;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.git

# Stage 1: Base
# This stage is the first stage
FROM node:20-alpine AS base

# Switch to the app directory,
# this will be our app's root directory inside the container
WORKDIR /app

# Copy the manifest and lock file to the root
# Note: ./ refers to /app, since we switched context in the above step
COPY package.json package-lock.json* ./

# Install the dependencies
RUN npm ci

# Set the NODE_ENV to production
# to configure the application to build/run under production mode
ENV NODE_ENV=production

# Copy all the files from our machine to the container
COPY . .

# Run the build to create production assets
RUN npm run build

# Stage 2: Production
# Now we build a new stage from scratch to run the nginx server
# This won't include any images from the previous steps
FROM nginx:alpine AS production

# The port you'd like to use for Nginx
ENV PORT=3000
# The URL for the backend service. Skip if irrelevant to you.
ENV BACKEND_HOST=host.docker.internal
# Port for the backend. Skip if irrelevant to you.
ENV BACKEND_PORT=3001

# Copy the template we created earlier for nginx to the etc folder
# note the destination file name should be default.conf.template
# else the variables in the config won't work
COPY nginx.conf.template /etc/nginx/templates/default.conf.template

# Since we started a new stage, we need to copy the build from the
# build step to the nginx's html directory. Note we have configured
# this directory in the nginx config file
COPY --from=base /app/dist /usr/share/nginx/html

# Expose the port the nginx is running to the outside world
EXPOSE ${PORT}

# Start the nginx server
CMD ["nginx", "-g", "daemon off;"]