I'm trying to configure production Docker and nginx based API. My front-end is in React 17+ with Vite, while API is ASP.NET 6. I have successfully created docker-compose for local development where front-end is running on http://localhost:3000, API is on https://localhost:8001 and everything worked normally. I tried to add production settings with nginx combined with front-end and I'm getting error after error (solved some of them, while API and DB docker containers are working without any issues). So, I'll post my related config files here:
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
host: '0.0.0.0',
port: 3000,
},
});
React Dockerfile.prod
FROM node:18-alpine3.15 as build
WORKDIR /app
ENV PATH=/app/node_modules/.bin:$PATH
COPY package.json /app/
COPY yarn.lock /app/
RUN yarn --silent
COPY ./ /app
CMD ["yarn", "build"]
FROM nginx:1.21.6-alpine
COPY --from=build /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 3000
CMD [ "nginx", "-g", "daemon off;"]
Main docker-compose.production.yml
version: '3.7'
networks:
personal-money-tracker-network:
driver: bridge
services:
personalmoneytracker.api:
container_name: personal-money-tracker-api
image: ${DOCKER_REGISTRY-}personalmoneytrackerapi
environment:
- ASPNETCORE_ENVIRONMENT=Development
- ASPNETCORE_CONNECTION_STRING=PersonalMoneyTrackerDbDocker
- ASPNETCORE_URLS=https://+:443;http://+:80
networks:
- personal-money-tracker-network
build:
context: .
dockerfile: PersonalMoneyTracker.API/Dockerfile
depends_on:
- personalmoneytracker.db
ports:
- "8000:80"
- "8001:443"
volumes:
- ${APPDATA}/Microsoft/UserSecrets:/root/.microsoft/usersecrets:ro
- ${APPDATA}/ASP.NET/Https:/root/.aspnet/https:ro
personalmoneytracker.client:
container_name: personal-money-tracker-client
stdin_open: true
image: ${DOCKER_REGISTRY-}personalmoneytrackerclient
networks:
- personal-money-tracker-network
build:
context: ./PersonalMoneyTracker.Client/personal-money-tracker
dockerfile: Dockerfile.prod
ports:
- "3000:3000"
depends_on:
- personalmoneytracker.api
personalmoneytracker.db:
container_name: personal-money-tracker-db
image: ${DOCKER_REGISTRY-}personalmoneytrackerdb
ports:
- "1401:1433"
networks:
- personal-money-tracker-network
build:
context: .
dockerfile: DevOps/SQL/Dockerfile
env_file:
- DevOps/SQL/SqlServer.env
volumes:
- sqlsystem:/var/opt/mssql/
- sqldata:/var/opt/sqlserver/sqldata
- sqllog:/var/opt/sqlserver/sqllog
- sqlbackup:/var/opt/sqlserver/sqlbackups
volumes:
sqlsystem:
sqldata:
sqllog:
sqlbackup:
And finally, the config which is probably wrong and causing all issues:
upstream personalmoneytrackerapi {
server personalmoneytrackerapi:8001;
}
server {
listen 80;
listen 8001;
server_name localhost;
gzip on;
gzip_comp_level 6;
gzip_vary on;
gzip_min_length 1000;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_buffers 16 8k;
client_max_body_size 256M;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
default_type application/octet-stream;
location / {
try_files $uri $uri/ /index.html =404;
}
location /api {
proxy_pass https://localhost:8001;
proxy_redirect off;
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;
proxy_set_header X-Forwarded-Host $server_name;
}
}
If you ask "What is this nginx, this is totally wrong" - it's totally possible, this is my first encounter with it so I don't even know where to start. Sorry for the very long post and thanks for help in advance