react Proxy에 관한 질문드립니다

react-scripts를 사용하여 프록시를 설정할 때, 개발 모드에서는 setupProxy.js 파일이 사용되지만 빌드 프로세스에서는 무시됩니다. 따라서 프로덕션 환경에서 프록시를 설정하려면 다른 방법을 사용해야 합니다. 이 경우, 실행 단계에서 사용되는 Nginx를 이용해 프록시를 설정할 수 있습니다. Nginx 설정 파일을 수정하여 클라이언트 요청을 API 서버로 리디렉션할 수 있습니다. 1. 프로젝트 루트 디렉토리에 nginx.conf 파일을 생성합니다 2. 생성한 nginx.conf 파일을 Dockerfile에 복사합니다 이제 React 애플리케이션에서 axios.get('/api/items')와 같은 요청을 보낼 때 Nginx가 API 서버로 리디렉션해 줍니다. 이렇게 하면 프로덕션 환경에서도 프록시를 설정할 수 있습니다.

1#1:
2
3http {
4  server {
5    listen 80;
6
7    location / {
8      root /usr/share/nginx/html;
9      index index.html index.htm;
10      try_files $uri $uri/ /index.html;
11    }
12
13    location /api/ {
14      proxy_pass http://api_server_ip:9990/;
15      proxy_http_version 1.1;
16      proxy_set_header Upgrade $http_upgrade;
17      proxy_set_header Connection 'upgrade';
18      proxy_set_header Host $host;
19      proxy_cache_bypass $http_upgrade;
20    }
21  }
22}
23
24
25
26#2:
27# 빌드 단계
28FROM node:16.15.0-alpine AS build
29
30WORKDIR /app
31COPY package*.json ./
32RUN npm install
33COPY . .
34RUN npm run build
35
36# 실행 단계
37FROM nginx:1.21.3-alpine
38COPY --from=build /app/build /usr/share/nginx/html
39COPY nginx.conf /etc/nginx/nginx.conf
40EXPOSE 80
41CMD ["nginx", "-g", "daemon off;"]