Docker 사용기(feat. React, Nginx, nodejs)
도커를 이용해서 배포를 해볼 것인데, 2가지를 배포해볼 것이다.
첫번째는 React와 Nginx를 묶어서 이미지화 하고 컨테이너화 해서 클라이언트를 배포할 것이고,
두번째는 node 서버를 배포해볼 것이다.
그리고 환경은 우분투이다.
1. Docker를 이용해 React와 Nginx를 묶어서 이미지화 하고 컨테이너화 하기
내가 만든 React 프로젝트에 dockerfile을 생성해야 한다. package.json과 같은 경로에 Dockerfile-prod라고 파일을 하나 생성해주자.
여기서 파일명은 무엇으로 해도 상관없는데, prod라고 표시해두면, Dockerfile, Dockerfile-prod, Dockerfile-dev 등 배포 환경에 따라서 관리하기가 편하다.
그리고 해당 파일을 아래처럼 채워주자.
FROM node:latest as builder
# 작업 폴더를 만들고 npm 설치
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent
# 소스를 작업폴더로 복사하고 빌드
COPY . /usr/src/app
RUN npm run build
FROM nginx:latest
# nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
# 위에서 생성한 앱의 빌드산출물을 nginx의 샘플 앱이 사용하던 폴더로 이동
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
# 80포트 오픈하고 nginx 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]Node, react-script, nginx 등 원하는 버전을 설정하면 된다.
이미지를 생성할 Dockerfile-prod는 만들었으니, 이 파일에서 사용하는 nginx설정 파일을 만들어 줘야한다.
Dockerfile-prod와 같은 경로에 conf/conf.d 파일을 만들어주자.
그리고 해당 파일을 아래처럼 채우자. proxy_pass는 여기를 참고하자.
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://[서버 url];
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}위 내용은 Nginx의 설정 파일이다. 이제 준비는 다 끝났다. 프로젝트 root 경로, 즉 Dockerfile-prod 파일이 있는 경로에서 터미널을 열고 아래 명령으로 이미지를 생성하자.
$ sudo docker build -f Dockerfile-prod -t [이미지 이름] .- -f Dockerfile-prod : 해당 파일을 기반하여 docker image를 생성한다.
- -t [이미지 이름] : 생성할 이미지를 지정한다.
마지막에 .(dot)이 찍혀있는데 반드시 찍어주어야 한다. PATH가 . 임을 지정해주는 것인데, 로컬 디렉토리의 모든 파일이 tar를 가져와 Docker 데몬으로 보내준다. (공식문서)
위 명령어 실행이 다되면 아래의 명령어로 현재 images를 볼 수 있다.
$ sudo docker images다음 명령어로 내가 만들어준 이미지를 컨테이너화 하고 실행시키자.
$ sudo docker run -it -p 80:80 [이미지 이름]
# 백그라운드에서 컨테이서 실행
$ sudo docker run -it -p 80:80 -d [이미지 이름]잘 실행되는지 확인하고 싶다면 다른 터미널을 하나더 킨다음
$ sudo docker ps위 명령어를 실행해주면 현재 실행되고 있는 이미지를 볼 수 있을 것이다.
2. Docker로 Node 서버 배포하기
위의 방법과 많이 비슷하다.
package.json과 같은 경로에 Dockerfile을 생성한다.
FROM node:latest
#이미지 안에 애플리케이션 코드를 넣기위한 디렉터리 생성
WORKDIR /usr/src/app
#앱 의존성 설치
#가능한 경우(npm@5+) package.json과 package-lock.json을 모두 복사하기 위해 와일드카드를 사용
COPY package*.json ./
RUN npm install
# 앱 소스 추가
COPY . .
EXPOSE 80
# 여기서는 서버를 구동하도록 node app.js을 실행하는 기본 npm start을 사용할 것이다.
# 서버가 구동되는 파일명 app.js
CMD [ "node", "app.js" ]그리고 Dockerfile과 같은 경로에 .dockerignore 파일을 다음 내용으로 만들어주자.
node_modules
npm-debug.log이는 Docker 이미지에 로컬 모듈과 디버깅 로그를 복사하는 것을 막아서 이미지 내에서 설치한 모듈을 덮어쓰지 않게 한다.
이제 Dockerfile이 있는 경로로 가서 Docker 이미지를 빌드하는 명령어를 실행해주자.
$ sudo docker build -f Dockerfile -t [이미지 이름] .다 만들어 졌다면 실행해주자.
$ sudo docker run -p 80:80 -d [이미지 이름]앱 로그 출력
# 컨테이너 아이디를 확인
$ sudo docker ps
# 앱 로그를 출력
$ sudo docker logs <container id>
# 예시
$ sudo Running on <http://localhost:80>참고 사항
Docker를 이용해 React와 Nginx를 묶어서 이미지화 하고 컨테이너화 하기 참고링크
React와 Nginx를 Dockerizing하는 방법 참고링크
[Docker] react + nginx + Dockerizing 따라하기 참고링크
Node.js 웹 앱의 도커라이징 참고링크
