1. React App 세팅하기 (Typescript)
create-react-app testproject --typescript // React App 만들기
cd testproject // React App 폴더 접근
npm run build // React App Build
React App 메인폴더에 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
docs.docker.com
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
4. Docker Container 실행
docker run -d --name my-react-app -p 8300:80 nginx-react:0.1
실행후 docker ps -a 명령어로 해당 Container의 Status가 Up인지 확인
5. 최종결과물 확인
참고사이트
[Docker] react + nginx + Dockerizing 따라하기
Docker Nginx에 React 띄워서 배포 Dockerfile 을 이용해서 Docker image 를 만들고 container 를 실행해보겠습니다. Docker base 이미지는 nginx:latest React 는 build 후 build 폴더만 배포 0. 준비물 host pc..
hello-bryan.tistory.com