삽질러

[실습목표]

이번 강의는 이전강의와 같이 React를 Nginx에서 실행하도록하는 목표를 공유하고있다.

차이점은 이전강의에서는 직접 build해줬지만 이번 강의에서는 build조차 자동으로 되도록 하고자 한다.

(이러한 차이점으로 인해 내 로컬에 nodeJs 환경이 없어도 도커로 빌드까지해서 실행까지 될수 있는 환경이 구축된다.)

[실습 전 준비사항]

이번 강의 실습을 위해 window에서 코딩한 my-app 프로젝트(react)를 docker가 있는 H2 서버로 옮겨주도록하자.

이전 강의와 구별되도록 ex09 / my-react-app-auto-build 라는 디렉토리를 만들어서 옮겨주었다.

(node_moudules는 COPY를 하지 않는다. npm install을 할 때 package.json을 참조하여 필요한 라이브러리들이 node_modules에 자동으로 생기기 때문.)

총 5개의 파일만 H2 서버로 옮겨주었다.

[Dockerfile 작성하기]

FROM node:alpine as build
WORKDIR /app
COPY package.json /app
RUN npm install --silent
COPY . /app
RUN npm run build

FROM nginx
#--from=build는 위에있는 FROM으로 부터 이미지가 구워지는데 그 결과로 나온 것을 의미한다.
# 위에서 나온 결과물인 /app/build 를 /usr/share/nginx/html로 복사하라는 의미이다.
COPY --from=build /app/build /usr/share/nginx/html
ENTRYPOINT ["nginx","-g","daemon off;"]

설명을 덧붙이자면

위의 FROM은 npm run build를 해서 build폴더에 build된 파일들을 생성하기 위함이고, 

아래의 FROM부터는 이전 실습내용과 같이 build된 폴더를 서비스할 nginx를 위한 코드들이다.

  COPY package.json /app      #node_modules를 만들기 위해 먼저 복사

 RUN npm install --silent  #이때 node_modules가 생긴다., --silent는 터미널 출력을 최소화하는 명령어이다.

#src, public 등의 파일을 /app으로 복사한다. (이미 있는 package.json, node_moduels는 덮어쓰기 하지 않아서 복사가 되지 않는다.)
COPY . /app

RUN npm run build   #해당 명령어까지 실행시키면 build파일이 생긴다.

신기한 것은 하나의 Dockerfile안에 2개의 FROM을 사용해서 컨테이너를 2개 만드는 것과 비슷한 효과를 낼 수 있다는 점인데... 인터넷 검색을 해보니 멀티 스테이지 빌드라고 한다.

※ 멀티 스테이지 빌드 

컨테이너 이미지를 만들면서 빌드 등에는 필요하지만, 최종 컨테이너 이미지에는 필요 없는 환경을 제거할 수 있도록 단계를 나누어 이미지를 만드는 방법

멀티스테이지 빌드를 사용하면 빌드에는 필요하지만 최종 배포시에는 필요없는 파일들은 모두 삭제된 상태로 컨테이너가 실행되므로 좀 더 가벼운 실행환경을 만들 수 있다는 장점이 있다.

[Docker 빌드 및 실행하기]

#빌드하기
docker build -t react-app-auto-build ./

#확인하기
docker images

#실행하기
docker run -d -p 9011:80 react-app-auto-build

끝!

※ React는 윈도우에서 코딩하고 Docker는 H2서버(우분투)에 있기 때문에 강의와 좀 다르게 실습했다.

[학습목표]

React를 Nginx에서 서비스 되도록 하기

실습 디렉토리 : ex09 / my-react-app

1. React 앱 Build 하기 (Window)

25강에서 실습했던React앱에서 npm run build를 통해  build파일들을 만들어야한다.

#25강에서 실습한 윈도우에 있는 react 실습 폴더(my-app)로 이동한다.
#윈도우 터미널에 실습 폴더로 이동한 후 build 실행.
npm run build

build란? 간단히 말하면 배포할 코드들을 만드는 것.

빌드 폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.

빌드가 축소되고 파일 이름에 해시가 포함됩니다.

npm run build를 실행하면 프로젝트 폴더에 build파일이 생긴다.

해당 폴더의 내용들을 docker가 설치되어있는 H2 서버로 옮겨주도록 하자.

SFTP를 통해서 ex09 / my-react-app 으로 옮겨주었다.

2. Dockerfile 생성 (Ubuntu)

이전 13강, 28강 내용과 별반 다를것이 없다. Nginx를 실행하기 위한 Dockerfile을 만들어주면 된다.

FROM nginx

COPY build /usr/share/nginx/html

ENTRYPOINT ["nginx", "-g", "daemon off;"]

다만, copy하는 대상이 방금 window에서 옮겨준 build 폴더를 통째로 /uar/share/nginx/html로 옮겨주면 된다.

3. Docker build 및 실행하기

이전 강의 와 같이 docker build하고 실행해주자.

$docker build -t react-app ./
$docker run -d -p 9011:80 --name=react-app react-app

실행된 컨테이너에 접속해보면 전에 실습한 React앱이 잘 뜨는것을 볼 수 있다.

[실습목표]

React를 npm start로 실행하는 것은 NodeJs를 이용한 방법이고, 이번 강의에서는 해당 방법을 이용하지 않고, Nginx로 실행하는 방법을 알아보자.

React를 어렵게 생각하지 말고 JS로 화면을 그리는 라이브러리로 생각하자.

React -> build -> html로 만들고,

웹서버(Nginx)를 이용해서 해당 html을 전달하게 하는 것이 최종 목적이다.

[실습 하기 전]

예전 16강에서 ex03에 Dockerfile을 이용한 Nginx구축을 한 적이 있다. 해당 강의가 기억나지 않으면 한번 리마인드 하고 오자.

https://ilikecoding.tistory.com/98

실습 디렉토리 : ~/ex09 (27강에서 이미 생성하였다.)

생성 디렉토리 : ex09$ mkdir -p nginx/webapp (nginx -> webapp 디렉토리를 생성해준다.)

1. index.html 생성 (ex09 -> nginx -> webapp)

> ~/ex09/nginx/webapp$ vi index.html

#vi 에디터에서 아래와 같이 작성 후 저장해준다.
<h1>My nginx</h1>

2. Dockerfile 생성 (ex09 -> nginx)

ex09/nginx$ touch Dockerfile

16강 때와 다르게 현재 시점에서 설정파일은 별로 중요하지 않다.

Dockerfile

FROM nginx
WORKDIR /usr/share/nginx/html
COPY webapp .

ENTRYPOINT ["nginx","-g", "daemon off;"]

3. Dockerfile 빌드 및 nginx 컨테이너 실행

docker build -t nginx-app ./

빌드하기

docker run -d -p 9011:80 --name=nginx-test nginx-test

이미지 실행하기

4. 접속해보기

[서버IP]:9011 로 접속해보면 설정한 index.html이 제대로 전달되는지 확인하면 된다.