[6] 도커로 간단한 앱 배포하기

[1] 리액트 앱 설치하기

- npx create-react-app ./

- npm run start : 실행

- npm run test : test 실행

- npm run build: react app을 운영 환경에 배포하려면 build를 하고 배포해야 함 -> 운영 환경에서 build 파일로 react 앱 실행함

 

[1-2] docker로 react앱 실행

dockerfile도 개발 환경을 위한 도커파일(dev) & 운영 환경을 위한 도커파일(prod)로 나누는 게 좋다.

1) Dockerfile.dev 파일

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm","run","start"]

문제) 이후 docker build ./ 명령어하면 unable to evaluate symlink 에러가 난다.

해결) 이미지로 옵션을 줘서 도커에게 이미지를 빌드할 때 참조해야되는 파일의 이름명이 무엇인지를 의미로 알려줘야 함

: docker build -f Dockerfile.dev . (-f는 이미지를 빌드할 때 쓰일 도커 파일을 임의로 지정해준다.)

이후 이미지 이름 짓기: docker build -f Dockerfile.dev -t jangmj80/docker-react-app ./

 

Tip! ) 로컬에 node_modules라는 파일이 있다. 

1) COPY package.json ./  -> package.json을 도커 컨테이너 안으로 복사

2) RUN npm install → 컨테이너 내부에서 npm install 실행해서 node_modules 생성

3) COPY ./ ./ → 소스 코드(index.js, server.js)만 도커 컨테이너에 복사됨

즉, 도커 컨테이너 안에서 npm install이 실행되면서, node_modules가 도커 내부에 생성됨!

-> 굳이 로컬에 node_modules가 필요가 없음

 

[1-3] 생성된 도커 이미지로 리액트 앱 실행하기

 문제) 위에 이름 지은 대로 docker run jangmj80/docker-react-app해서 앱을 실행하려고 하면 안된다

이유) 포트 매핑

해결) docker run -p -it 3000:3000 jangmj80/docker-react-app

 

[1-4] 도커 볼륨으로 실시간으로 소스 코드 변경

복습) volume을 이용해 어플리케이션 실행하는 법

1) 명령어: docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app jangmj80/docker-react-app

2) App.js에서 글씨를 바꾸면 이미지를 다시 build하지 않아도 반영돼서 나온다.

 

[1-5] 도커 컴포즈로 간단하게 앱 실행하기

docker-compose.yml 파일

version: "3"

services:

  react:

    build:

      context: . //도커 이미지를 구성하기 위한 파일과 폴더가 있는 위치, Dockerfile.dev랑 docker-compose.yml이 같은 파일에 있으므로 . 처리

      dockerfile: Dockerfile.dev

    ports:

    - "3000:3000"

    volumes:

      - /usr/src/app/node_modules

      - ./:/usr/src/app

    stdin_open: true

이렇게 구성해주면 docker run -it -p 3000:3000 ... 명령어가 필요 없이 docker-compose up 으로 바로 실행 가능

이렇게 잘 되는 걸 알 수 있다.

 

[1-6] 리액크 앱 테스트 하기

명령어) docker run -it jangmj80/docker-react-app npm run test

궁금) 테스트도 소스 추가 시 바로 반영되면 좋겠다 !

해결) volume을 docker-compose에다 넣어준다

이후 docker-compose up --build로 2개의 컨테이너 모두 실행시키기

 

[2] 운영 환경을 위한 Nginx

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

2) 운영 환경에서 리액트가 실행되는 과정 -- 개발 서버가 없어짐 -> NGINX가 정적 파일을 제공함

 

개발 환경과 운영 환경을 분리하는 이유)

개발에서 사용하는 서버는 소스 변경 시 자동으로 전체 앱을 rebuild해서 소스를 반영하는 것과 같이 특화된 기능이 있음 

운영에서 사용하는 서버는 소스 변경 시 다시 반영해줄 필요 X

따라서 NGINX를 운영 서버에서 따로 사용해준다.

 

[3] 운영환경 도커 이미지를 위한 Dockerfile 작성하기

[3-1]

Dockerfile.dev -- 리액트 개발환경에서 필요한 이미지 생성

Dockerfile -- 리액트 운영환경에서 필요한 이미지 생성

개발 서버 -- public에 있는 파일을 사용함

운영 서버 -- build에 있는 파일을 사용함 -> dockerfile만들 때도 "build"가 추가됨

Nginx를 시작하고 (index.html + js, css 파일)을 이용해서 정적인 파일들을 제공함

정리)

1) build 파일들을 생성

2) Nginx를 가동하고 1단계에서 생성된 빌드 폴더의 파일들을 웹 브라우저의 요청에 따라 제공함 (run stage)

1)builder stage

FROM ... as builder -- 여기 from 부터 다음 from이 builder stage라는 것을 명시함

이렇게 생성된 파일들은 /usr/src/app/build로 들어간다

2)run stage

working directory에 있는 build 파일들(/usr/src/app/build에 있는 것)을 /usr/share/nginx/html에 복사해준다

 

-> builder stage에서 생성된 파일들이 build 폴더에 들어가며 이걸 run stage에서 복사해줘서 nginx가 웹 브라우저의 http 요청이 올때마다 알맞은 파일을 전달하게 된다.

 

[3-2] 생성된 Dockerfile 파일

FROM node:alpine as builder

WORKDIR '/usr/src/app'

COPY package.json .

RUN npm install

COPY ./ ./

RUN npm run build

 

FROM nginx

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

[3-2] 이후 명령어

- docker build .

- docker run -p 8080:80 jangmj80/docker-react-app

Nginx는 80번이 기본 포트이다. 컨테이너 안에 포트를 매핑할 때 80번으로 해줘야 함

- localhost:8080하면 react가 잘 돌아감