[Docker] 리액트 앱 개발하고 운영환경을 위한 Nginx 사용해보기

 

안녕하세요. 기깔나는 사람들에서 DMSO를 맡고있는 정우입니다.

저난번에 리액트를 사용해서 앱을 개발했습니다.

[Docker] 리액트 앱 설치하고 배포하기

 

운영환경에 배포를 위해 Nginx를 사용해볼게요! 

---

Nginx가 왜 필요한가?

Nginx라는게 어떤것일까?

 

개발 환경에는 리액트 컨테이너에 

개발서버가 따로 존재합니다

 

하지만 운영환경에는 서버가 따로 존재하지 않는데,

그렇기에 Nginx를 사용하게 되는 것입니다. 

 

 

 

그럼 Nginx가 뭔가요?

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

 

웹서버가 또 뭔가요?

웹서버란 클라이언트 요청에 따라 HTML, Css, JS 등등 정적파일을 응답하여 제공하는 소프트웨어를 말합니다.

 

보통의 웹서비스는 클라이언트 -> 웹서버 -> WAS -> DB순으로 요청이 되고

DB -> WAS -> 웹서버 -> 클라이언트 순으로 응답됩니다.

 

 

 

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

Nginx란 무엇인가?

 

---

Nginx를 사용하는 Dockerfile을 작성할게요

리액트 개발환경 -> Dockerfile.dev를 사용했다면

운영환경 -> Dockerfile을 사용해보겠습니다.

 

dockerfile

# Builder Stage : 빌드파일들을 생성하는것
# 생성된 파일은 모두 /usr/src/app 으로 들어갑니다
FROM node:10 as builder
WORKDIR '/usr/src/app'
COPY package.json .
RUN npm install
COPY ./ ./
RUN npm run build

# Run Stage : Nginx를 가동하고
# 첫 번째 단계에서 생성된 빌드 폴더의 파일들을 웹 브라우저의 요청에 따라 제공하여 준다.
FROM nginx
EXPOSE 80

# --from : 1번째에서 생성된 builder슷 사용해서  nginx를 컨트롤 하겠다
# /usr/share/nginx/html: 
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

 

2번째 단계에서

- /usr/src/app/build : Builder Stage에서 생성한 파일은 /usr/src/app/build 에 생성되며, 이것을 브라우저에 Nginx를 알맞는  파일을 전달할 수 있도록 만들어줍니다.  

- /usr/share/nginx/html: 클라이언트의 요청이 들어올때마다 Nginx가 알맞는 정적 파일을 제공해주기 위해 파일을 복사합니다.

 

 

 

 

 

도커 이미지를 생성해주고 실행해보겠습니다.

$ docker build -t jjwdocker/react-app .

 

에러발생

internal/modules/cjs/loader.js:638
    throw err;

node_module에서 경로가 꼬인 경우인 경우가 있다고 합니다.

https://selfish-developer.com/entry/error-internalmodulescjsloaderjs883

rm -rf node_modules/

rm -f package-lock.json

npm cache verify

npm install

 

 다시 빌드해보겠습니다.

 

 

성공입니다.

 

nginx의 기본포트는 80 입니다.

run 할때 포트 매핑해주겠습니다

$ docker run -p 8080:80 [이미지 이름]

 

그럼 로컬에서 8080포트로 접속해보겠습니다.

 

 

 

 

---

Nginx를 통해 react 이미지를 만들고 실행해보았습니다.

어플을 실제로 배포해보겠습니다. 

 

 

 

---

참고자료

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