노드 및 nginx를 사용하여 React 앱을 Docker화하고 Docker Hub에 이미지를 푸시하는 방법

안녕, 개발자!

도커화된 React 앱과 생성할 이미지를 Docker Hub에 푸시하는 방법을 살펴보겠습니다.



먼저 기본 Docker 명령을 검색해야 하는 경우 다음을 확인하십시오. https://docs.docker.com/engine/reference/commandline

메시지가 표시되지 않도록 하려면 쓰기, 읽기 및 삭제 권한이 있는 특정 사용자를 한 명 생성해야 합니다. 일반적인 오류는 다음 메시지입니다. 리소스에 대한 요청된 액세스가 거부되었습니다. 보라https://docs.docker.com/docker-hub/access-tokens/

Docker 허브에서 액세스 토큰을 생성한 후:

docker login -u <username>

다음을 사용하여 React 앱 만들기:

npx create-react-app my-app

https://hub.docker.com/_/node 을 사용하여 src 폴더에 Dockerfile을 만들고 이 명령을 복사할 수 있습니다.

FROM node AS prod
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# RUN npm test - if you want to test before to build
RUN npm run build

FROM nginx:alpine AS prod
WORKDIR /usr/share/nginx/html
COPY --from=prod /app/build .
EXPOSE 80
# run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

src 폴더에 .dockerignore를 만들고 추가할 수 있습니다.

/node_modules

Docker 이미지 빌드를 실행합니다.

docker image build -t react:v1 .

이미지를 빌드한 후 실행하여 작동하는지 확인하겠습니다.

docker run -dit -p 3300:80 --name react react:v1

컨테이너 ID를 얻으려면 다음을 수행하십시오.

docker container ls 

컨테이너 ID를 얻은 후 이를 사용하고 컨테이너를 커밋할 수 있습니다.

docker container commit <id-container> react:v1

이전에 빌드한 이미지를 찾아 ID를 가져오겠습니다.

docker images

docker images 명령의 출력을 보면 리포지토리 이름, 태그 및 이미지 ID를 볼 수 있습니다. 태그를 만들어야 합니다.

docker tag <image-name:tag> <your-repository>/image-name:image-name-repository

docker tag react:v1 luizcalaca/react:react

마지막은 푸시입니다.

docker push <repository>/<tag>

docker push luizcalaca/react:react

콘택트 렌즈
이메일: [email protected]
인스 타 그램:
링크드인:
트위터: