도커 설치부터 내 리액트 앱 배포까지 해보기. (로컬환경 윈도우)

 

 

친구와 같이 프로젝트를 진행하기로 했는데,

프론트엔드 배포를 도커로 해보기로 하였다. 우선은 내 로컬 환경인 윈도우에서 진행해보려 한다.

 

---

 

 

우선은 내 윈도우에 도커를 설치해보자.

아래 URL에서 쉽게 설치를 할 수 있었다.

 

https://www.docker.com/get-started

Get Started with Docker | Docker

 

설치를 마치고 Docker Desktop을 열어보았는데..

 

 

Docker Engine failed to start...

이런 메시지가 뜨며 도커가 정상적으로 실행이 되지 않았다.

 

 

나같은 경우에는 이 문제를 리눅스 커널 업데이트 패키지를 다운로드하고 

재시작하여 해결할 수 있었다.

 

설치 경로는 다음과 같다.

 

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

 

---

 

 

 

설치를 완료 했으면 cmd에서 확인해보자.

 

 

잘 된 것 같다! Docker Desktop도 확인해보면

 

출처: https://memostack.tistory.com/211

 

 

이와 같은 화면이면 성공적으로 설치가 된 것이다.

 

---

 

 

 

이제 내 리액트 앱을 도커에 배포하기 위해 루트 경로에 

Dockerfile, docker-compose.yml을 작성해보았다.

 

FROM node:14.17.6-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install 

CMD ["npm", "start"]

-- Dockerfile

version: "3.7"

services:
  sample:
    container_name: react-dockerize
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ".:/app"
      - "/app/node_modules"
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true

-- docker-compose.yml

 

• container_name : 컨테이너 이름
• dockerfile : 이미지를 만드는 과정을 정리해놓은 파일
• volumes : 내 호스트 파일 시스템에 마운트할 파일 (컨테이너를 삭제해도 유지된다)
• 포트를 지정하고 환경변수를 설정한다.

 

 

 

이와 같이 내 리액트 루트 경로에 파일을 추가했다.

 

 

---

 

 

 

그러면 이제 내 앱을 도커에 배포해보자.

 

다음과 같이 Terminal에 입력한다.

 

docker-compose up -d --build

 

정상적으로 배포가 되었다는 메시지가 뜬다면.. Docker Desktop을 확인해보자!

 

 

성공적으로 배포가 되어 컨테이너에 내 앱이 올라가고 실행 중에 있다.

 

도커로 배포 성공!

 

 

 

 

참고: https://helloinyong.tistory.com/271