React 배포 과정

 

React 애플리케이션을 배포하는 과정은 대체로 npm build 명령어를 사용하여 소스 코드를 번들링하고 최적화된 형태로 생성한 다음, 웹 서버(예: Nginx 또는 Apache)를 통해 제공하는 방식으로 이루어집니다. 다음은 일반적인 배포 과정입니다:

---

1. React 빌드 파일 생성

React 애플리케이션에서 npm build 또는 yarn build를 실행하면 src 폴더에 있는 코드를 다음과 같이 변환합니다:

• 모든 JavaScript, CSS, 이미지 파일 등이 번들링된 파일로 최적화됩니다.
• build 폴더가 생성되며, 여기에 필요한 파일들이 들어 있습니다:
  • index.html (React의 진입점)
  • 최적화된 JavaScript 파일 (예: main.js, runtime.js 등)
  • 필요한 정적 파일 (예: CSS, 이미지 등)

---

2. 웹 서버에 배포

웹 서버(예: Nginx, Apache)에 배포하려면, build 폴더의 내용을 서버의 HTTP 디렉토리로 복사합니다. 예를 들어:

• Nginx:
  • Nginx 설정 파일에서 root 디렉토리를 React build 폴더로 지정합니다.

    server {
      listen 80;
      server_name yourdomain.com;
    
      root /path/to/build;
      index index.html;
    
      location / {
        try_files $uri /index.html;
      }
    }
    

    React는 SPA(Single Page Application)이기 때문에 try_files를 통해 모든 요청을 index.html로 처리하도록 설정합니다.
• Apache:
  • Apache의 DocumentRoot를 React의 build 폴더로 설정합니다:

    DocumentRoot "/path/to/build"
    <Directory "/path/to/build">
      Options Indexes FollowSymLinks
      AllowOverride All
      Require all granted
    </Directory>
    

---

3. 파일 제공 및 접근

React 앱이 번들링된 결과는 정적 파일로 제공됩니다. 클라이언트(브라우저)는:

• index.html을 통해 애플리케이션을 로드합니다.
• JavaScript 파일을 로드하고 React 앱의 컴포넌트를 렌더링합니다.

---

요약

React 애플리케이션의 빌드는 다음과 같은 구조를 따릅니다:

1. 소스 코드는 npm build를 통해 번들링 및 최적화됩니다.
2. **번들링된 파일(build 폴더)**은 웹 서버(Nginx 또는 Apache)의 HTTP 디렉토리에 저장됩니다.
3. 웹 서버는 정적 파일을 제공하고, 클라이언트는 브라우저에서 애플리케이션을 실행합니다.