Docker React Docker 컨테이너에서 React 앱 실행

npm install create-react-app --global

create-react-app react-docker-app

cd react-docker-app && yarn start

계속하기 전에 무슨 일이 일어나고 있는지 설명하겠습니다Dockerfile.

라인 1-4는 빌드의 첫 번째 단계입니다. 이 단계에서는 모든 소스 코드를 컨테이너에 복사하고 최적화된 프로덕션 빌드를 생성하는 실행yarn run build을 실행합니다.

라인 6-10은 빌드의 두 번째 단계입니다. serve package을 설치하고 9행에서 폴더/app/build의 빌드 첫 번째 단계의 출력을 컨테이너(/app의 현재 폴더로 복사합니다. 이는 WORKDIR /app 명령에 의해 설정됩니다. Dockerfile ).

About multi-stage builds: If you're wondering about two FROM statements in the Dockerfile. This is because you want to use a multi-stage build. In the first stage of the build, you copy the source code to the container and run the build command. In the second build stage, you copy only the built artifacts (HTML, JS, ...) to the container. Using multi-stage build results in a significantly smaller Docker image. The first image in the example is ~198MB, while the second one is only 86.7 MB.

마지막 줄에서 serve 명령을 실행하여 포트80에서 현재 폴더의 내용을 제공합니다.

Instead of serve, you could also use Nginx; however that might require a bit more config.

이미지를 빌드하려면 프로젝트 루트 폴더에서 다음 명령을 실행할 수 있습니다. 여기서 Dockerfile는 다음과 같습니다.

docker build -t react-docker-app .

-t로 이미지 이름을 지정하고 .로 빌드 컨텍스트(예: 현재 폴더)를 지정합니다. 빌드가 완료되면 마지막 줄은 다음과 같아야 합니다.

Successfully tagged react-docker-app:latest

마지막으로 이제 이 컨테이너를 실행해 보겠습니다. 로컬에서 실행하려면 이미지 이름과 React 앱에 액세스할 수 있는 포트를 제공해야 합니다. serve 명령에서 포트80를 사용했으므로 다음과 같이 컨테이너 포트를 지정할 때 반드시 80를 사용해야 합니다.

docker run -it -p 8080:80 react-docker-app

컨테이너가 실행되면http://localhost:8080 컨테이너를 열 수 있으며 Docker 컨테이너 내에서 실행 중인 React 앱에 액세스할 수 있습니다.

🔥 If you want to learn more about Kubernetes, Istio, Docker, and cloud-native in general, check out the my Learn Istio ebook 📖. You can get a free preview of the book at 👉 https://learnistio.com 👈