리액트 정적페이지를 도커 빌드

리액트 정적페이지를 도커 빌드

React example

React 애플리케이션을 구축할 때 JS 코드(일반적으로 JSX), SASS 스타일시트 등을 정적 HTML, JS 및 CSS로 컴파일하려면 Node 환경이 필요합니다. 서버 측 렌더링을 수행하지 않는 경우 프로덕션 빌드를 위한 노드 환경도 필요하지 않습니다. 정적 nginx 컨테이너에 정적 리소스를 전달할 수 있습니다.

FROM node:18 AS build WORKDIR /app COPY package* ./ RUN npm install  COPY src ./src COPY public ./public RUN npm run build  FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html
FROM node:18 AS build
WORKDIR /app
COPY package* ./
RUN npm install
COPY src ./src
COPY public ./public
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html

리액트 정적페이지를 node로 빌드하고 nginx로 배포를 도커로 하려면 다단계 빌드를 해야한다 (Multi-stage builds)

정적페이지build해주기위해 노드이미지를 빌더로써 가져온다 AS BUILD

로컬에서 package 를 * 전부 workdir ./ 에 복사해준다

로컬에서 하듯이 의존성 설치해주고 src와 public 폴더를 복사해준다

nginx로 배포해주기위해 이미지를 가져온다

COPY —from 지침에 따라

--from=build는 이전 스테이지에서 빌드된 이미지를 참조한다는 의미입니다. build는 이전에 정의된 스테이지의 이름이며, 해당 스테이지에서 생성된 파일들을 현재 스테이지로 복사합니다.

여기서 --from=build는 이전 스테이지에서 빌드된 이미지를 참조한다는 의미입니다. build는 이전에 정의된 스테이지의 이름이며, 해당 스테이지에서 생성된 파일들을 현재 스테이지로 복사합니다.

이 구문을 통해 node:18 이미지에서 빌드한 애플리케이션의 결과물을 가져와서, nginx:alpine 이미지에 포함시키는 것이 가능합니다. 이렇게 하면 최종적으로 생성되는 이미지는 nginx:alpine을 기반으로 하되, 애플리케이션의 정적 파일은 node:18 이미지를 통해 빌드된 것을 사용합니다. 이는 이미지 크기를 최소화하면서 필요한 파일만을 최종 이미지에 포함시킬 수 있는 장점을 제공합니다.

As build 라고 작성했기때문에 copy —from=build 다른 단어가 들어가도 똑같이 맞춰주면 된다

App/build 폴더를 nginx에 넣어준다

출처

https://docs.docker.com/get-started/09_image_best/#react-example

gpt