React Docker 배포

React 프로젝트를 Docker로 서버에 올려 배포하기

1. React app 생성

create-react-app으로 React app을 생성한다.

$ npx create-react-app <app_name>

생성한 app 디렉토리로 이동한다.

$ cd <app_name>

2. React 빌드

$ npm run build

build 폴더가 생성된다.

3. Dockerfile 파일 생성

Docker image를 만들기 위한 Dockerfile을 생성한다.

$ vi Dockerfile

Dockerfile에 다음 내용을 추가한다.

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

4. nginx.conf 파일 생성

nginx(웹서버) image에 복사할 파일을 생성한다.

$ vi nginx.conf

nginx.conf 파일에 다음 내용을 추가한다.
(80 포트에
/ 경로로 들어오면
/app/build 폴더에서
index.html 파일을 찾는다.)

server {
    listen 80;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

5. Docker image 생성

Docker image를 생성한다.

$ docker build -t <dockerhub_id>/<repo_name> .

image가 생성되었는지 목록을 확인한다.

$ docker images

Dockerhub에 생성한 image를 push한다.

$ docker push <dockerhub_id>/<repo_name>

6. Server 접속

배포할 서버(ubuntu) 접속한다.

$ ssh <hostname>@<hostip>

필요시 서버 ubuntu를 업데이트 한다.

$ sudo apt-get update

최초 Docker 시작시 로그인을 한다.

$ sudo docker login

7. Docker 컨테이너

Dockerhub에서 image를 pull한다.

$ sudo docker pull <dockerhub_id>/<repo_name>

Docker 컨테이너를 실행한다.

$ sudo docker run -d --name <image_name> -p 8300:80 <dockerhub_id>/<repo_name>

Docker 컨테이너 리스트를 확인한다.

$ sudo docker ps -a

서버 접속 종료한다.

$ exit

http://<server_ip>:8300 접속하여 확인

---

수정된 코드 업데이트하기

위 과정에서 다음 번호만 반복한다.

2. React 빌드

5. Docker image 생성

6. Server 접속

추가

실행중인 컨테이너를 정지시킨다.

$ sudo docker stop <image_name>

필요시 사용하지 않는 리소스 삭제한다.

$ sudo docker system prune -f

7. Docker 컨테이너

---

참조

https://hello-bryan.tistory.com/169
https://velog.io/@moorekwon/Django-2.2-%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95-%EB%B0%8F-%EC%97%B0%EA%B2%B0-Docker-%EC%9D%B4%EC%9A%A9%ED%95%B4-API-%EC%84%9C%EB%B2%84-%EB%B0%B0%ED%8F%AC