React + ASP.NET Core + Vite + Docker + Nginx setup

Viewed 399

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

0 Answers
Related