React를 Container로 연동하기

1. React App 세팅하기 (Typescript)

create-react-app testproject --typescript  	// React App 만들기
cd testproject								// React App 폴더 접근
npm run build								// React App Build

React App 메인폴더에 Build 폴더가 생성되 있다면 성공이다.

이렇게 Build폴더가 생성됬다면 준비 끝이다

 

2. Dockerfile & Nginx.conf 파일 생성

Dockerfile 생성

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

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

# 80 포트 오픈
EXPOSE 80

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

Dockerfile에 대한 자세한 Reference는 아래 공식 사이트를 이용하도록 하자

docs.docker.com/engine/reference/builder/

Dockerfile reference

 

Nginx.conf 생성

server {
    listen 80;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

 

결과적으로 아래와 같이 생성되었다면 성공

 

 

3. Docker Image 생성

Docker Image 생성

docker build -t nginx-react:0.1 .

 

생성여부를 확인하기위해 Docker Image 목록 확인

Docker Images

nginx-react라는 이름의 이미지가 확인된다

 

 

 

4. Docker Container 실행

docker run -d --name my-react-app -p 8300:80 nginx-react:0.1

실행후 docker ps -a 명령어로 해당 Container의 Status가 Up인지 확인

 

 

5. 최종결과물 확인

 

참고사이트

hello-bryan.tistory.com/169

[Docker] react + nginx + Dockerizing 따라하기