리액트 빌드(Build)

리액트 빌드 및 배포

STEP1. 빌드 관련 스크립트 생성

  "scripts": {
    "build": "react-scripts build",
  },

STEP2. 빌드

npm run build


tree
.
├── package.json
├── package-lock.json
├── bck # 리액트 앱 CREATE 한 프로젝트
│   ├── build  # 이 폴더가 생겼다 ! 
│   ├── README.md
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
└── node_modules

build라는 디렉토리가 새로 생긴다. 즉, 실제 서비스할 때는 build 안에 있는 파일들을 사용하면 된다.

이 명령어를 사용하는 이유)

• F12 창에서 페이지 갱신하고 확인해보면 디폴트 생성 상태임에도 리소스가 많이 잡아먹는다. (예를들면 hello react라는 문자만 넣었다고 가정하면 1.8MB나 된다.)
• 현재 리액트는 개발의 편의성을 위해서 여러 가지 기능들을 추가해놓은 상태이기 때문에, 상당히 무거운 편이다.
• 이 파일을 그대로 유저가 이용하게 된다면 상당히 느려질 것이다.
• 빌드 결과물 안에 index.html을 열어보면 이상하게 나온다. 원래 사용했던 index.html 의 내용 등에서 불필요한 공백들과 같이 용량을 차지하는 녀석들을 전부 다 제거한다.

STEP3. 서버 설정 (빌드 결과를 참조시키기)

• Node.js(Express) 백앤드 환경에서 사용하기

    // 정적 파일이 모인 build 폴더를 static 으로 설정
    app.use(express.static(path.join(__dirname, '../cth-front/build')));
      
  

  React 앱이 빌드된 정적 파일이 모인 build 폴더를 static 으로 설정 하면 끝이다.
  Express 서버에서 /cth-front/build URL 경로로 요청이 들어오면 cth-front/build 디렉토리에 있는 파일들을 클라이언트에게 제공하게 된다. 이를 통해 React 앱이 빌드된 정적 파일들을 Express 서버에서 호스팅할 수 있다.

• 스프링-부트 백앤드 환경에서 사용하기

    # 백앤드설정을 수정하여 프론트엔드 리액트 애플리케이션을 호스팅할 수 있도록 설정한다.
    # (리액트 정적 파일들의 경로를 매핑하여 서빙)
  
    # (application.properties)
    spring.resources.static-locations=classpath:/webapp/cth-front/build/
  
  

  동일한 개념이다.

빌드 환경 분리하기 (개발/운영)

STEP1. 빌드 관련 스크립트 생성

  "scripts": {
    "build": "react-scripts build",
    "purge": "rm -rf ../blang-react-pages/static && cp -fR ./build/* ../blang-react-pages/",
    "deploy": "npm run purge"
  },

STEP2. 빌드

npm run build

STEP3. 디플로이

npm run deploy

디플로이 동작과정)

1. 운영 디렉토리 기존내용 삭제

    # prod 폴더의 빌드내용 미리 제거
    rm -rf ../blang-react-pages/static 
    
   

2. 빌드한 개발 디렉토리 내용을 운영 디렉토리에 복사

    # dev 폴더의 ./build 안에 있는 모든 파일과 디렉토리를 (아까 빌드한 결과)
    # prod 폴더로 복사
   
    cp -fR ./build/* ../blang-react-pages/ 
    
   

3. 개발서버 빌드 > 운영서버 반영 완료

serve 패키지 (간단한 정적 웹서버 만들기)

웹 애플리케이션을 디테일하게 만드는 웹서버(Express 패키지) 도 있지만, 간단한 정적 파일을 전용의 웹서버(serve 패키지)도 있다.

• Node.js로 작성된 정적 파일 서버로, 특정 디렉토리에 있는 정적 파일들(HTML, CSS, JavaScript, 이미지 등)을 웹 브라우저에 제공하는 역할.
• Serve는 주로 정적 웹 페이지 또는 단순한 웹 사이트를 호스팅할 때 사용한다.
• Node.js와 연관된 구성 요소를 전혀 사용하지 않고 간단한 개발 서버를 실행할 수 있다.

STEP1. serve 설치

npm insatll serve

STEP2. 실행

npx serve -s build   # 한번만 실행

# 기본 5000 포트를 사용한다.
 
  ┌──────────────────────────────────────────┐
  │                                                                  │
  │   Serving!                                                       │
  │                                                                  │
  │   - Local:    http://localhost:3000                              │
  │   - Network:  http://192.168.0.10:3000                           │
  │                                                                  │
  └──────────────────────────────────────────┘

HTTP  2023. 4. 20. 오후 5:56:52 223.62.22.82 GET /
HTTP  2023. 4. 20. 오후 5:56:52 223.62.22.82 Returned 200 in 227 ms
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 GET /static/js/main.ae67edd3.js
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 GET /static/css/main.f2eabf11.css
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 Returned 200 in 17 ms
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 Returned 200 in 26 ms
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 GET /static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 GET /logo192.png
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 Returned 200 in 8 ms
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 Returned 200 in 7 ms
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 GET /favicon.ico
HTTP  2023. 4. 20. 오후 5:56:53 223.62.22.82 Returned 200 in 4 ms
  

npx serve -s build
‘serve’ 라는 웹 서버를 다운받아서 실행시킬 때 build 라는 디렉토리를 ‘document root로 하겠다!’ 는 뜻이다. 명령어를 실행시켜보면 다음과 같이 주소를 알려준다