[26.02.04] React 재직자 교육 5 - 배포방법, 도커 Docker 컨테이너 빌드

배포

 

배포방식 

node.js 서버 배포

 

ssr이 기본이다

csr로 바꿔서 빌드 해야되는 경우 있다.

 

하나라도 오류가 있으면 빌드가 안된다.

 

package.json에 script에 있는

npm run build

명령어로 빌드를 한다.

기본은 ssr로 빌드이다.

 

빌드에 성공하면 .next폴더에 빌드가 된다.

 

 

다음 디렉토리와 파일을 Node.js가 설치 된 운영 서버의 임의 폴더로 옮기기

[docker 폴더]

– .next 폴더

– public 폴더

– package.json

– package-lock.json

 

서버에 올리고 npm install을 한번 해줘야된다.

modules는 사이즈가 크니 서버에 올리고 해준다.

 

빌드를 다 하고 빌드 잘됐는지 보고싶다.

 

npm run start

를 해주면 빌드 된걸로 서버를 띄운다.

속도가 아주 빠르다.

 

 

Docker Container

패키지.제이쓴

수정 해도 되고 안해도 된다. 놔둬도 무방함

 

Docker컨테이너 배포

 

Docker runtime이 있다.

도커런타임이 도커 안에서 만든다...

 

Dockerfile 생성 및 내용작성

[docker 폴더] / Dockerfile
# Node의 이미지를 가져옴
FROM node:22.14.0
# 작업 디렉토리 설정
WORKDIR /app
# 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에 복사
COPY . .
# 의존 패키지 설치(node_modules 폴더 생성)
RUN npm install
# 3000번 포트 노출
EXPOSE 3000
# npm start 스크립트 실행
CMD ["npm", "run", "start"]

 

 Docker 이미지생성(readme.md 파일에서명령어복사)

– $ cd docker

– $ docker build-t front-end-react-ssr .

 

app안에서 도커 명령어 친다.

도커 안에서 만들겠다는 소리임

 

  Docker 컨테이너생성및실행(readme.md에서명령어복사)

– $ docker run --name front-end-react-ssr-d -p 3000:3000 front-end-react-ssr

 

리눅스 서버에 도커를 원래 만든다..

DockerFile이다.

FROM node:22.14.0

Node를 깔아준다.

 

# npm start 스크립트 실행

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

npm run start를 해준다.

반드시 package.json에 start명령어가 있어야한다.

 

# Docker 이미지 생성

docker build -t front-end-react-ssr .

# Docker 컨테이너 생성 및 실행

docker run --name front-end-react-ssr -d -p 3000:3000 front-end-react-ssr

 

 

D:\react-course\projects\front-end-react-ssr-full>npm install -g serve

added 86 packages in 1s

25 packages are looking for funding
  run `npm fund` for details

D:\react-course\projects\front-end-react-ssr-full>serve out

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:    http://localhost:53866             │
   │   - Network:  http://192.168.1.143:53866         │
   │                                                  │
   │   This port was picked because 3000 is in use.   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │

 

 

터미널에 이렇게 뜸

도커 컨테이너 잘 띄웠음.