React App을 build하여 Docker NGINX에 배포하기

yarn build 명령어를 통해서 React를 통해 만든 app을 Docker에 build한다.

 

yarn : 패키지 관리자

 

classic.yarnpkg.com/en/

Yarn

 

book-todo 폴더아래에 build 폴더가 생성된다.

 

 

 

1. Docker의 상태 확인

 

cmd 창을 열고 docker --version으로 docker의 상태를 확인한다.

docker images 의 명령을 통해 docker에 다운로드 되어진 images를 확인하고, docker ps (= docker container ls )명령어를 통해 container의 현재상태를 확인한다.

 

 

2. Docker hub repository에서 제공되는 이미지를 활용해 nginx서버 생성

 

원하는 이미지를 다운받기 위해서는 docker pull <이미지>:<태그> 의 명령어를 통해 이미지를 다운받는다.

이미지의 생성과 동시에 실행할 수 있는 docker run --name <컨테이너이름> -dt <이미지> 명령어를 통해 이미지를 다운받고 컨테이너를 실행해보겠다.

 

docker run --name web -p 80:80 -dt nginx 

-p : port 80번 포트를 80번으로 받아온다.

-dt : 데몬, 터미널

 

이미지가 생성되어있다면 docker create --name <컨테이너이름> -p <받아올port>:80 nginx 명령어로 container을 생성한다.

create는 생성만 하므로 docker ps로 확인하면 실행되는 container만 보이므로 create로 생성된 container는 보이지 않고, docker ps -a로 확인해야 실행하지 않는 모든 container가 보인다.

 

생성된 컨테이너를 실행시키기 위해서는 docker start <컨테이너이름> 명령어를 작성한다.

create할 때에 이미 port를 주었으므로 자동으로 create 명령어에 작성한 port로 start 되어진다.

이제 docker ps 에서 모두 확인할 수 있다.

 

* 아래의 web2는 다시 만들었기에 ID가 다르다.

3. Docker web container에 web-application 배포

 

cmd창에서 현재 위치는 배포할 web-application을 가지고 있는 폴더의 위치이다.

 

docker exec -it <컨테이너이름> bin/bash 명령어를 통해 web컨테이너의 bash쉘의 root로 들어간다.

exec : 실행

-it : interactive, 터미널

 

ls 명령어를 통해 디렉토리와 파일들을 확인한다.

 

cat /etc/nginx/conf.d/default.conf 명령어 실행결과이다.

 

 

다음은 cat /etc/nginx/nginx.conf 이다.

 

exit 명령어를 통해 빠져나온다.

 

참고 gonna-be.tistory.com/20

[NGINX] 꼭 알아야 할 configuration 기초 개념!

 

find 명령어를 통해 web2의 container과 IPAddress 정보를 확인한다.

dir 명령어를 통해 파일이름과 디렉토리를 확인한다.

현재 위치에 존재하는 default.conf 의 내용은 type default.conf 로 확인 가능하다.

server {
        listen 80 default_server; // IP4
        listen [::]:80 default_server; // IP6

        root /var/www/html/; // root를 /var/www/html로 하겠다.
}

 

 

 

root에서 /var/www/html 였기에 web2의 var디렉토리 아래에 www디렉토리를 만들어준다.

 

root에서 확인했던 default.conf를 docker의 container web2에 복사하기 전 위에서 /bin/bash를 통해서 web2에서 가지고 있던 default.conf 파일을 다른 이름으로 저장한다.

저장한 후, 지금 현재 위치에 존재하는 (dir로 확인된) default.conf 파일을 web2의 원래 default.conf 파일이 존재했던 자리로 복사한다.

docker exec web2 ls /etc/nginx/conf.d 명령어로 해당 파일에 잘 전달되어지고, 원래의 default.conf의 파일의 이름도 잘 바뀌어 졌는지 확인한다.

 

현재 위치에 존재했던 (위에서 dir로 확인된) build 디렉토리를 docker로 build하여 docker의 이미지 nginx를 기반으로 생성된 container web2를 통해 배포하는 것이 목적이므로, 위에서 변경된 default.conf 파일에서의 root위치인 /var/www/html의 자리로 해당 디렉토리인 build를 복사한다. 

복사후, 잘 복사되어졌는지 docker exec web2 ls /var/www/html 명령어로 확인한다.

 

chown은 소유권을 변경하기 위한 명령어이다.

chown -R <owner>:<group> <파일or디렉토리>

아래의 명령어로 nginx의 이름을 가진 owner과 group이 rweb2의 root인 /var/www/html을 -R : 읽을 수 있는 권한을 준다.

그리고 다시 web2를 reload한다.

이제 localhost를 새 창에 입력한 후 해당 App이 Docker의 web2에 잘 build가 되어졌는지 확인하면 된다.

아래의 사진처럼 잘 로드되어졌다.

 

 

마지막으로, 지금까지 진행한 web2를 commit하여 스냅샷을 찍고, Docker Hub에 push 해보도록 하겠다.

 

Mouted가 완료된 후, Docker Hub에 로그인한 후, 확인하면 잘 되어졌음을 볼 수 있다.

 

 

이렇게 React를 통해 만든 front-App을 Docker에 build하여 NGINX 이미지를 이용해 성공적으로 배포해보았다.