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

2023. 8. 12. 01:37ㆍ초기 과업/DevSecOps

작성자ㆍ알 수 없는 사용자

728x90
반응형

 

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

오늘은 도커를 이용해 리액트 앱을 설치해볼게요

 

 

일반적으로 리액트 설치

1. npm -v 를 통해 노드 설치확인

2. 사용할 폴더 만들기

 

 

 

3. 현재 디렉토리에 리액트 설치

$ npx create-react-app [리액트 설치하고자 하는 디렉토리 이름]

내 현재 위치에서 설치!

 

 

(윈도우 Desktop 사용시 )

getaddrinfo EAI_AGAIN~~ 에러발생시 

▼더보기

 

 

 

설치가 완료가 되면 빈 디렉토리에 뭔가 많이 생긴게 보여집니다.

 

 

 

npm을 실행해보자

npm run start

 

 

 

자동으로 리액트에 접속되는것을 볼수 있습니다.

 

 

테스트 단계

npm run test

테스트의 기반이 되는 js 는 /src/App.test.js 에 있습니다. 

 

test 성공적으로 작동됐나 확인해볼게요

 

 

 

build (배포해보기)

npm run build

에러 코드 

$ sh: react-scripts: command not found

 

package.json 내 모든 dependency를 다운로드하지 않아서 package.json 내 script를 제대로 일어오지 못하여 발생한 에러입니다.

 

다시 npm install을 해줍니다.

 

 

build 파일이 생성된게 보여집니다. 

 

 

 

 

도커를 이용해서 리액트 앱 실행하기

 

도커파일을 생성해 볼게요

Dockerfile.dev

FROM node:10

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm", "run", "start"]

 

에러발생

에러이유 : 도커는 기본적으로 Dockerfile 을 찾는데 우리는 "Dockerfile.dev" 라는 이름을 사용했기 때문이다

 

그래서 build ./ 로 하는게 아니라

-f 옵션을 줘야합니다. (f : find 옵션 )

 

docker build -f 도커파일명 -t 이미지이름 ./ 

설치가 완료됐다

 

추가 팁! 

모든 모듈들이 담겨있는 node_modules 라는 파일이있는데, 

필요없는 파일들을 가져와서 다운받아야하니까 굉장히 오래걸리게됩니다. 

우리가 도커에서 실행하는거지 로컬에서 사용할 필요가 없게됩니다.

 

우리가 Dockerfile에서 

npm install을 하는데 

여기서 한번 node_modules  라는 파일을 도커 내부에서도 생성하게됩니다.

 

그렇기 때문에 중복이 계속되니  빌드시 굉장히 느려집니다.

node_modules 파일은 삭제합니다

리액트 실행

 

빌드된 컨테이너를 실행해볼겠습니다. 

docker images 로 확인하고 

 

실행해볼게요!! 

docker run 이미지이름

 

 

에러발생 ㅜㅜ 

/usr/src/app/node_modules/eslint-webpack-plugin/node_modules/jest-worker/build/index.js:110
  _ending;

 

▼더보기

 

 

 

리액트의 기본 포트는 3000포트에서 실행됨으로 

localhost:3000번으로 들어가볼게요

 

 

 

 

왜 연결이안되나?

IP 매핑이 안돼서 실행이 불가합니다ㅜ

$ docker run -p -it 3000:3000 이미지이름

 

성공입니다!! 

도커 컴포즈를 이용한 간편하게 앱실행하기

 

docker-compose.yml 파일을 생성해줍니다

# 도커 컴포즈의 버전
version: "3"
# 실행하는 컨테이너들을 정의
services:
# 서비스 이름
  react:
  # 현 디렉터리에 있는 Dockerfile 사용
    build: 
    # 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치
      context: .
      # 도커 파일 어떤 것인지 지정
      dockerfile: Dockerfile.dev
    # 포트 매핑 로컬 포트 : 컨테이너 포트
    ports:
     - "3000:3000"
    # 로컬 머신에 있는 파일들을 매핑
    volumes:
    # 얘는 매핑하지 않겠다는 뜻
     - /usr/src/app/node_modules
     - ./:/usr/src/app
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true

 

 

파일이 생성됐다면

실행해볼게요

우선 확인을 해볼게요

localhost:3000으로 들어가면 

짜잔! 

 

볼륨이 잘 설정 되었는지 확안해볼게요

/src/App.js를 수정해봅니다.

 

 

 

바로 수정이 되는것을 확인 할 수 있습니다.

 

도커환경에서 앱 테스트 하기

 

Test환경에서 테스트 해볼게요.

$ docker run -it jjwdocker/docker-react-app npm run test

node_module이 없다고 나옵니다.

Test환경에서 바로 반영이 안되기 때문입니다.

 

tests컨테이너에 Dockerfile을 지정하고 볼륨을 설정해줄게요

 

# 도커 컴포즈의 버전
version: "3"
# 실행하는 컨테이너들을 정의
services:
  # 서비스 이름
  react:
    # 현 디렉터리에 있는 Dockerfile 사용
    build:
      # 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치
      context: .
      # 도커 파일 어떤 것인지 지정
      dockerfile: Dockerfile.dev
    # 포트 매핑 로컬 포트 : 컨테이너 포트
    ports:
      - "3000:3000"
    # 로컬 머신에 있는 파일들을 매핑
    volumes:
      # 얘는 매핑하지 않겠다는 뜻
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
  # 서비스이름
  tests:
    stdin_open: true
    # 현 디렉터리에 있는 Dockerfile 사용
    build:
      # 도커 이미지를 구성하기 위한 파일들이 있는 위치
      context: .
      # 도커 파일이 어떤 것인지 지정
      dockerfile: Dockerfile.dev
    # 로컬 머신에 있는 파일을 매핑
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    #  테스트 컨테이너가 시작될 때 실행되는 명령어
    command: ["npm", "run", "test"]

 

 

다시 빌드해줄게요

docker-compose up --build

 

다시 test해보면

$ docker run -it jjwdocker/docker-react-app npm run test

 

잘 반영이 됩니다. 

다음엔 운영환경을 위한 Nginx를 사용해볼게요

 

 

 

 

💡 참고 사항
DNS... 프록시 서버..

참고자료

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

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'초기 과업 > DevSecOps' 카테고리의 다른 글

[Docker] 간단한 어플을 개발 환경에서 Test해보기 (Travis-CI)  (0) 2023.08.14
[Docker] 리액트 앱 개발하고 운영환경을 위한 Nginx 사용해보기  (0) 2023.08.13
[Docker] 도커컴포즈 Redis  (0) 2023.08.10
[Docker] Node.js 앱만들기  (0) 2023.08.10
[Docker] 도커 이미지 만들기-기본  (0) 2023.08.08

관련글

댓글 0

티스토리툴바