✅ 리액트 설치

1. node 설치
2. npx create-react-app ./ 명령을 통해 리액트를 설치

위의 순서대로 설치해주면 되는데.. 진행하다가 아래와 같은 에러가 발생하였다.
(처음부터 에러 ㅡ.ㅡ)

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

위에 말대로 uninstall을 해주었지만 계속 같은 문제 발생... 구글링해보니까 깃허브에 이슈가 등록되어 있긴 한데 여기서 하라는 대로 캐시 삭제 등등 해봐도 그대로였다.

그래서 그냥 구글링해서 yarn 이용해 react 환경 구축을 하였다. 👉🏻 환경 구축 참고 사이트

개발 환경

✅ Dockerfile로 이미지 생성

1. Dockerfile 작성 후 도커 이미지 생성
2. 이미지를 이용해 컨테이너 만들기
3. 컨테이너 안에서 앱 실행

Dockerfile은 개발, 배포를 나눠서 작성하는 것이 좋다. 따라서 Dockerfile.dev 파일을 작성하도록 한다.

#베이스 이미지
FROM node:alpine

#work directory 설정
WORKDIR /usr/src/app

#도커 이미지 실행 전 실행될 쉘 명령어
COPY package.json ./

RUN npm install 

COPY ./ ./

#컨테이너 시작시 실행될 명령어 
CMD ["npm", "run", "start"]

-f 옵션을 이용해 이미지를 빌드할때 쓰일 도커파일을 임의로 지정해주고, -t 옵션을 이용해 이미지 이름을 지정해준다.

docker build -f Dockerfile.dev -t jym3263/docker-react-app .

도커 환경에서는 npm install로 모든 모듈들을 도커 이미지에 다운 받기 때문에 삭제해도 좋다.

✅ 생성된 도커 이미지로 리액트 실행

docker run -it -p 3000:3000 jym3263/docker-react-app

• -it: 상호 입출력, tty를 활성화하여 bash쉘을 사용
• p: 포트 매핑

🔗 도커 볼륨 이용

• Copy: 로컬 파일을 도커 컨테이너에 복사
• Volume: 도커 컨테이너가 로컬에 있는 파일을 참조

docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app jym3263/docker-react-app

• -v /usr/src/app/node_modules: 호스트 디렉토리에 node_modules은 없기에 컨테이너에 맵핑을 하지 말라고 하는 것
• -v $(pwd):/usr/src/app: pwd 경로에 있는 디렉토리 혹은 파일을 /usr/src/app 경로에서 참조

✅ docker-compose 이용

도커 볼륨 이용한 docker run 명령은 너무 길어서 docker compose를 사용하도록 한다.

version: '3'
services:
  react:
    build:
      context: . #docker compose와 dockerfile은 같은 디렉토리에 있다.
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000" #로컬 포트: 컨테이너 포트
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app #현재 디렉토리 : /usr/src/app에서 참조한다.
    stdin_open: true

# 도커 컴포즈 명령어 실행
docker-compose up 

✅ docker 환경에서 테스트

docker build -f dockerfile.dev .
docker run -it jym3263/docker-react-app npm run test

명령이 복잡해지므로 docker-compose로 작성할 수 있다.

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true
### 추가 부분 
  tests:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    command: ["npm", "run", "test"]

실행시키면서 빌드도 하는 명령을 해주면 된다.

docker-compose up --build

운영 환경

✅ nginx

🔗 개발 환경에서 리액트가 실행되는 과정

개발 서버를 통해서 브라우저가 요청한 정적 파일을 제공 받을 수 있는데, 운영 환경에서는 개발 서버가 없어진다. 운영 환경에서는 개발 서버 대신 nginx 서버를 사용한다.

🔗 운영 환경에서 리액트가 실행되는 과정

빌드된 파일들을 nginx가 제공하도록 한다.

🤔 왜 개발환경 서버와 운영환경 서버를 다른 것을 써야 할까?

• 개발에서 사용하는 개발 서버는 개발 환경을 위한 특별한 기능이 있다. 예를 들어 소스를 변경한다면 리액트 개발 서버에서 전체 앱을 다시 빌드해서 변경 소스를 알아서 반영해 준다.
• nginx는 소스가 변경되었다고 해서 바로 반영되는 기능은 없다. 따라서 개발에 필요한 기능들이 필요하지 않기에 더 깔끔하고 빠른 Nginx를 웹 서버로 사용한다.

✅ 운영 환경에 맞는 Dockerfile 작성

1. 빌드 파일 생성

FROM node:alpine as builder
WORKDIR /usr/src/app
COPY package.json .
RUN npm install
COPY ./ ./
RUN npm run build

2. Nginx를 가동 후, 첫 번째 단계에서 생성된 빌드 폴더의 파일들을 웹 브라우저의 요청에 따라 제공

FROM nginx

#builder 파일을 nginx가 제공해줄 수 있는 파일 경로에 복사 
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

3. 명령어로 실행

#이미지 생성
docker build -t jym3263/docker-react-app .  

#nginx의 기본 포트인 80에 매핑해 실행
docker run -p 8080:80 jym3263/docker-react-app