[Docker] 운영환경을 위한 Nginx 사용하기

 

 

안녕하세요, 쯀리입니다.

지난 시간에는 Docker를 이용해 리액트 앱을 설치, 실행 그리고 테스트 까지 해보았습니다.

이젠 운영환경에 배포 해봐야겠죠?

[Docker] 리액트 앱 배포

[Docker] 리액트 앱 배포-2

[Docker] 리액트 앱 배포-3

 

Nginx 를 사용할텐데 Nginx가 무엇이고 왜 필요한지를 살펴보겠습니다. 

 

 

---

 

Nginx란?

Nginx는 높은 성능과 안전성 그리고 현재 가장 많이 사용되는 웹서버 입니다.

 

웹서버란?

클라이언트의 요청에 따라 정적파일(Html,CSS, JS)등을 응답하여 제공하는 소프트웨어입니다.

 

https://blog.naver.com/gi_balja/223028077537

Nginx란 무엇인가?

 

---

왜 운영에서 Nginx가 필요할까?

개발 환경에서 리액트 컨테이너는 개발 서버를 따로 두지만

 

운영환경에서는 사라지게되고 그렇기에 Nginx를 사용하게 됩니다.

 

 

 

왜 운영환경 서버와 개발환경 서버를 다르게 사용해야 할까요?
개발서버 : 개발 환경을 위한 기능들이 있습니다. 한번 변경이 되면 전체 소스가 다시 빌드 됩니다.  

운영서버 : 운영환경은 개발서버에서 필요하지 않은 것들이 있습니다. 그렇기에 무거운 개발 서버를 사용하지 않아도 되겠죠?  

Nginx는 변경이되면 바로 빌드되거나 하는게 아니기 때문에 운영환경에 적합합니다.

 

---

운영환경 Nginx 사용을 위한 Dockerfile 작성하기

우선은 운영환경을 위한 Dockerfile을 생성해주겠습니다. 

 

원래는 Dockerfile.dev로 개발환경을 테스트 했었죠?

Dockerfile.dev

더보기 ▼

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

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

 

 

운영환경을 위한 Dockerfile을 작성해보겠습니다. 

 

운영환경을 위한 Dockerfile 중 builder stage

# ----------------- builder stage -------------------------
FROM node:alpine as builder

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

RUN npm run build

Builder Stage : 빌트파일들을 생성하고 생성된 파일과 폴더들은 /usr/src/app/build로 들어갑니다

정적파일들을 이용을 해서 Build폴더를 생성하기 위한 부분입니다. 

생성한 빌드 파일을 Nginx 서버가 브라우저에서 보여줄 수 있도록 해줍니다.

운영환경을 위한 Dockerfile중 run stage

# nginx를 위한 베이스 이미지
FROM nginx

# build파일들을 /usr/share/nginx/html 부분으로 복사해줍니다.
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

run stage : 빌드 파일들을 생성하는 것

 

 

 

Dockerfile 전체: 

# ----------------- builder stage -------------------------
FROM node:alpine as builder

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

RUN npm run build

# ----------------- run stage -------------------------

# nginx를 위한 베이스 이미지
FROM nginx

# build파일들을 /usr/share/nginx/html 부분으로 복사해줍니다.
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

 

 

docker build 를 통해 이미지를 생성해주겠습니다.

docker build -t jjwdocker/react-operations .

 

이미지가 생성되었는지 확인해보겠습니다. 

 

docker run -p 8080:80 jjwdocker/react-operations

 

에러발생 

Html Webpack Plugin ▼

 

 

node_modules를 제가 삭제하고 build를 해서 적용이 안되었나봅니다.

 

1. node_modules와 package-lock.json을 삭제하고

2. 다시 npm install 후에 build 해보겠습니다. 

 

 

 

운영환경에서 실행 성공입니다!!

---

오늘은 운영환경을 위해서 Nginx가 어떻게 실행되는지 확인해보았습니다. 

이제 간단한 어플을 실제로 배포해보려고 합니다

 

다음시간에 만나용!  

 

 

 

 

---

참조

※ 인프런 - 따라하며 배우는 도커와 CI 환경