React 애플리케이션을 Docker화하면 개발 워크플로를 간소화하고 다양한 개발 단계에서 일관된 환경을 보장하며 배포 프로세스를 단순화할 수 있습니다. 이 가이드는 Docker 환경 설정부터 Docker 이미지 구축 및 실행까지 React 애플리케이션을 Dockerize하는 단계를 안내합니다.
Docker: Docker가 컴퓨터에 설치되어 있는지 확인하세요. Docker 공식 홈페이지에서 다운로드 받으실 수 있습니다.
React 애플리케이션: create-react-app 또는 다른 방법을 사용하여 생성된 React 애플리케이션이 있어야 합니다. 없으면 create-react-app을 사용하여 기본 앱을 생성할 수 있습니다.
npx create-react-app my-react-app cd my-react-app
Dockerfile은 애플리케이션용 Docker 이미지를 빌드하는 방법에 대한 일련의 지침이 포함된 스크립트입니다. React 애플리케이션의 루트 디렉터리에 다음 콘텐츠가 포함된 Dockerfile이라는 파일을 만듭니다.
# Use an official node runtime as a parent image FROM node:16-alpine # Set the working directory WORKDIR /app # Copy the package.json and package-lock.json files to the working directory COPY package*.json ./ # Install the dependencies RUN npm install # Copy the rest of the application code to the working directory COPY . . # Build the React app RUN npm run build # Install a simple server to serve the React app RUN npm install -g serve # Set the command to run the server CMD ["serve", "-s", "build"] # Expose port 3000 EXPOSE 3000
.dockerignore 파일은 Docker 이미지에 파일을 복사할 때 무시해야 하는 파일과 디렉터리를 지정합니다. 이렇게 하면 이미지 크기를 줄이고 빌드 프로세스 속도를 높일 수 있습니다. 다음 내용으로 루트 디렉터리에 .dockerignore 파일을 만듭니다.
node_modules build .dockerignore Dockerfile .git .gitignore
React 애플리케이션용 Docker 이미지를 빌드하려면 애플리케이션의 루트 디렉터리로 이동하여 다음 명령을 실행하세요.
docker build -t my-react-app .
이 명령은 Docker에게 현재 디렉터리(.)를 컨텍스트로 사용하여 my-react-app 태그가 있는 이미지를 빌드하도록 지시합니다.
Docker 이미지가 빌드되면 다음 명령을 사용하여 컨테이너에서 실행할 수 있습니다.
docker run -p 3000:3000 my-react-app
이 명령은 로컬 시스템의 포트 3000을 컨테이너의 포트 3000에 매핑하여 브라우저의 http://localhost:3000에서 React 애플리케이션에 액세스할 수 있도록 합니다.
여러 컨테이너를 관리하거나 더 많은 구성을 추가하려는 경우 Docker Compose를 사용할 수 있습니다. 다음 내용으로 루트 디렉터리에 docker-compose.yml 파일을 만듭니다.
version: '3' services: react-app: build: . ports: - "3000:3000"
docker-compose.yml 파일에 정의된 서비스를 시작하려면 다음 명령을 실행하세요.
docker-compose up
이러한 단계를 따르면 React 애플리케이션이 성공적으로 도커화되었습니다. 애플리케이션을 Docker화하면 다양한 환경에서 일관성이 보장될 뿐만 아니라 배포 프로세스가 단순화되어 애플리케이션을 더 쉽게 관리하고 확장할 수 있습니다.
프로젝트의 특정 요구 사항에 따라 Dockerfile 및 Docker Compose 구성을 자유롭게 맞춤설정하세요. Dockerizing을 즐겨보세요!
위 내용은 React 애플리케이션을 Dockerize하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!