Docker로 Nginx 개발환경 구축 및 React 앱 실행

1. Docker 설치하기

https://www.docker.com/

Docker: Accelerated, Containerized Application Development

# 터미널로 설치하기

brew install --cask docker

 

2. nginx 설치하기

docker pull nginx

nginx server가 생성된 것을 Docker Desktop에서 확인할 수 있다.

3. nginx 실행

docker run --name nginx-server -d -p 80:80 nginx

** 3-1) address already in use 오류가 발생하는 경우docker: Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:80 -> 0.0.0.0:0: listen tcp 0.0.0.0:80: bind: address already in use.

 

→ 80포트가 어디에선가 실행중이라는 의미이다. Kill Process를 해주자

(1) 80포트 사용하고 있는 프로세스 확인하기

sudo lsof -i:80

(2) 프로세스 죽이기

sudo kill -i "PID Number"

(3) 그래도 해결이 안된다면? 80포트말고 다른 포트를 사용하자.. (필자는 81포트로 사용)

 

4. 127.0.01로 접속해본다.

실행화면

 

5. Docker Compose 설치

(* 참고사항 23년 6월 부터 compose v1이 Docker Desktop에서 삭제된다고 함, v2 설치를 권장함)

 

#1. Docker Desktop 사용하는 경우 (설정 > General에서 Compose 버전 확인 가능)

 

"Docker Desktop에는 Compose 필수 구성 요소인 Docker Engine 및 Docker CLI와 함께 Docker Compose가 포함되어 있습니다." - Docker 공식 문서

 

 

 

#2. Compose 플러그인 사용

https://docs.docker.com/compose/install/linux/#install-using-the-repository

Install the Compose plugin

(공식 문서를 참고해주세요)

docker-compose --version   //정상 설치 확인하기

 

6. Dockerfile 생성

React 프로젝트 내 루트 경로에 Dockerfile을 생성한다.

# node 이미지 사용.
FROM node:latest as builder
# 루트 경로에 app 생성.
RUN mkdir /usr/src/app
# work dir로 지정.
WORKDIR /usr/src/app

# package.json을 work dir에 복사.
COPY package*.json ./
RUN npm install
# 이미지 안에 소스코드 넣기. (. . : 지정한 work dir를 의미함)
COPY . .
# npm 빌드.
RUN npm build

# nginx 이미지를 사용.
FROM nginx:latest
# nginx 의 default.conf 를 삭제.
RUN rm /etc/nginx/conf.d/default.conf

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

# 81 포트 오픈.
EXPOSE 81

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

 

7. Docker Image 빌드

docker build -t "새로 생성되는 이미지 이름" "Dockerfile 경로"

//ex)
docker build -t nginx-react .

8. Docker Container 생성

docker run -d -p 3000:81 nginx-react

-d : detached 옵션. 백그라운드에서 실행. 실행결과로 컨테이너 id를 출력한다.

-p : hostPort:ContainerPort 옵션. 포트포워딩를 명시한다.