Azure Docker 배포 시 Web App Crash issue RCA

FE/BE 따로 배포하다가 하나의 앱으로 합치고 FE앱에 .env 를 설정하는 구조로 변경함.

 

일단 앱은 이와 같은 구조로 되어있다. NginX reverse proxy로 포트 호스팅을 해주니 정상적으로 배포를 하는듯 보였음

 

 

 

Issue 4: Frontend image fails to load with its proper layouts
This issue occurred because I selected the amd64 architecture on deployment, which is compatible with Azure but not with Mac M3 (arm64). As a result, the app initially worked perfectly only on Chrome. However, when I checked again a couple of days later, it started working on Safari as well.

 

 

그리고, 배포 후 새로운 subroute를 추가했을 경우 배포 전 체크할 부분
1) .env에 새로운 route 추가했는지 (react route)와 해당 스크립트에서 이 변수를 사용하게끔(하드코딩 no) - 안그럼 axios error 남
2) 애져 환경 변수에 해당 변수 등록
3) FE app build 다시
4) 그 후 도커 이미지 만들고 다시 배포

 

 

Issue 5: Resolving nginx Default Page Instead of React App IssueProblem

1. nginx welcome page shown instead of React app
2. Static resources (images, CSS, JS) not loading
3. 404 errors in browser console

Root Cause Analysis:

1. nginx Cannot Find React Build Files

• Build files missing or incorrectly placed in /usr/share/nginx/html

• Issues with build file copying process in Dockerfile

1. Incorrect nginx Configuration for React App

• Missing MIME type configurations for static files

• No SPA (Single Page Application) routing handling

정리하자면,

1. MIME 타입이 제대로 설정되지 않아 정적 파일들이 올바른 Content-Type으로 제공되지 않음
2. 정적 파일 경로와 디렉토리 구조가 맞지 않음

Solution:
static 파일들의 경로와 MIME 타입 설정을 보완

1. Dockerfile Modification

빌드된 react앱이 nginx 서빙 디렉토리에 제대로 복사되지 않음(멀티스테이지 빌드에서 빌드 결과물 복사 방식이 부적절. nginx 서빙 디렉토리 구조가 없거나 잘못됐을 가능성)

# Create nginx serving directory
RUN mkdir -p /usr/share/nginx/html

# Copy build files to correct location
WORKDIR /usr/share/nginx/html
COPY --from=frontend-build /app/frontend/build/ .

2. nginx.conf Modifications

  # MIME 타입 명시적 정의 추가
  types {
      application/javascript  js;
      text/css               css;
      image/png              png;
      image/jpeg             jpg jpeg;
      image/svg+xml          svg;
      font/ttf               ttf;
      font/woff             woff;
      font/woff2            woff2;
  }

  # 정적 파일 위치별 설정 추가
  location /static/ {
      alias /usr/share/nginx/html/static/;
      expires 1y;
      add_header Cache-Control "public, immutable";
  }

  location /fonts/ {
      alias /usr/share/nginx/html/fonts/;
      expires 1y;
      add_header Cache-Control "public, immutable";
  }

 

Key Learnings:

1. Careful attention needed for file copy paths in Docker multi-stage builds
2. Understanding essential nginx configurations for serving SPAs
3. Importance of proper MIME type and path configurations for static files

---

한국어 정리

 

 

1. nginx 설정 관련 문제

• 문제: 기본 nginx 페이지만 표시되고 React 앱이 로드되지 않음

• 원인:

1. MIME 타입이 제대로 설정되지 않아 정적 파일들이 올바른 Content-Type으로 제공되지 않음
2. 정적 파일 경로와 디렉토리 구조가 맞지 않음

• 해결: nginx
   

   

    # MIME 타입 명시적 정의 추가

    types {

        application/javascript  js;

        text/css               css;

        image/png              png;

        image/jpeg             jpg jpeg;

        image/svg+xml          svg;

        font/ttf               ttf;

        font/woff             woff;

        font/woff2            woff2;

    }

   

    # 정적 파일 위치별 설정 추가

    location /static/ {

        alias /usr/share/nginx/html/static/;

        expires 1y;

        add_header Cache-Control "public, immutable";

    }

   

    location /fonts/ {

        alias /usr/share/nginx/html/fonts/;

        expires 1y;

        add_header Cache-Control "public, immutable";

    }

   
  
  
  2. Dockerfile 구조 문제

• 문제: 빌드된 React 앱이 nginx 서빙 디렉토리에 제대로 복사되지 않음

• 원인:

1. 멀티스테이지 빌드에서 빌드 결과물 복사 방식이 부적절
2. nginx 서빙 디렉토리 구조가 없거나 잘못됨

• 해결: dockerfile
   

   

    # nginx 디렉토리 생성 보장

    RUN mkdir -p /usr/share/nginx/html

   

    # 작업 디렉토리 변경으로 정확한 경로에 복사

    WORKDIR /usr/share/nginx/html

    COPY --from=frontend-build /app/frontend/build/ .

   

   

   

   
  
  
  3. 프록시 설정 불일치

• 문제: package.json의 프록시 설정(3001)과 실제 백엔드 포트(5001) 불일치

• 원인: 개발 환경과 프로덕션 환경의 포트 설정 차이

• 해결: package.json의 프록시 설정을 실제 백엔드 포트에 맞게 수정
   

   

    "proxy": "http://localhost:5001"
  
  
  4. 정적 파일 경로 문제

• 문제: React 앱의 정적 파일(CSS, JS)을 찾지 못함

• 원인:

1. homepage 설정이 부적절
2. 빌드된 파일의 경로가 nginx 설정과 불일치

• 해결: package.json의 homepage 설정 수정
   

   

    "homepage": "/"
  
  
  5. Docker 이미지 아키텍처 문제

• 문제: 로컬(ARM64)과 Azure(AMD64) 환경의 아키텍처 차이

• 원인: M3 맥에서 빌드된 이미지가 Azure의 AMD64 환경과 호환되지 않음

• 해결: 명시적으로 AMD64 플랫폼 지정
   

   

    docker build --platform linux/amd64 -t barotalent-allinone:latest .

주요 교훈:

1. 프론트엔드 빌드 결과물의 디렉토리 구조를 정확히 이해하고 nginx 설정에 반영해야 함
2. 개발 환경과 프로덕션 환경의 차이(포트, 경로 등)를 주의 깊게 관리해야 함
3. 컨테이너화 시 호스트와 타겟 환경의 아키텍처 차이를 고려해야 함
4. nginx의 정적 파일 서빙 설정과 MIME 타입 설정이 중요함