React 애플리케이션 일시 중지

ReactJS 프로그램을 만들 때, 프로그램을 배치하는 방법을 너무 많이 고려할 필요가 없을 수도 있습니다.ReactJS 프로그램은 간단한 HTML, CSS, 자바스크립트 파일로 구성된 폴더에 쉽게 묶을 수 있습니다.S3 메모리 통에 업로드하고 Github Pages에 위탁 관리하며 Netlify 또는 Zeit 등 우수한 서비스를 통합하여 신속하고 자동화된 배치를 실현할 수 있을 만큼 간단해야 한다.
그러나 이번 주, 나의 임무는 하위 도메인 아래의 VPS에 create-react-app 로 만든 React 프로그램을 배치하는 것이다.나는 석기시대의 FTP를 사용하고 싶지 않다. 나는 내 응용 프로그램에 자동화된 docker 용기를 가지고 싶다. 거기에서 나는 어느 곳에서든 배치할 수 있고, 너무 많은 설정이 필요하지 않다.
이 글에서 상세하게 설명한 모든 설정이 있는 프레젠테이션 프로그램을 만들었습니다.전화 번호code is available here

Dockerfile 준비

먼저 프로젝트 루트 폴더에 다음을 포함하는 Dockerfile를 만듭니다.

# This image won't be shipped with our final container
# we only use it to compile our app.
FROM node:12.2.0-alpine as build
ENV PATH /app/node_modules/.bin:$PATH
WORKDIR /app
COPY . /app
RUN npm install
RUN npm run build

# production image using nginx and including our
# compiled app only. This is called multi-stage builds
FROM nginx:1.16.0-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

위의 코드 세션에서 우리는 multi-stage builds라는 기능을 사용했다.그것은 Docker 17.05 이상의 버전이 필요하지만, 이 기능의 장점은 매우 크다. 나는 아래에서 설명할 것이다.스크립트의 앞부분에서, 우리는 node:12.2.0-alpine 을 바탕으로 Docker 이미지를 구축하고 있습니다. 이것은 노드를 포함하는 아주 작은 linux 이미지입니다.지금 첫 줄 끝의 as build에 주의하세요.이것은 우리의 의존항을 포함하고 구축 후에 버릴 수 있는 중간 이미지를 만들 것입니다.얼마 후, 우리는 npm install 내 React 응용 프로그램의 모든 의존 항목을 설치한 다음, 실행 npm run build 을 실행하여 생산 최적화된 React 응용 프로그램으로 컴파일했다.
코드의 후반부에 우리는 nginx:1.16.0-alpine를 바탕으로 새로운 Docker 이미지를 만들었습니다. 이것은 또한 소형 linux입니다. nginx를 포함하여 우리의React 응용 프로그램에 서비스를 제공하는 고성능 웹 서버입니다.우리는 명령COPY을 사용하여 이전 이름build의 이미지에서 내용을 추출하여 /usr/share/nginx/html에 복사합니다.다음은 기본nginx 프로필을 삭제하고 nginx/nginx.conf에 사용자 정의 프로필을 추가합니다. 내용은 다음과 같습니다.

# To support react-router, we must configure nginx
# to route the user to the index.html file for all initial requests
# e.g. landing on /users/1 should render index.html
# then React takes care of mouting the correct routes
server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

이 구성은 React Router을 사용하는 애플리케이션에 매우 중요합니다.React 프로그램의 링크, 예를 들어 /users/1/profile 의 링크를 공유할 때마다, 이 링크는 브라우저가 웹 서버에서 이 경로를 요청하는 것을 알려 줍니다.웹 서버 설정이 올바르지 않으면, React 프로그램에서 초기 인덱스를 보여 줄 수 없습니다.React 애플리케이션이 포함된 html 파일입니다.
사용자 정의 설정을 사용하면, Google은nginx에 모든 요청 루트를 루트 폴더 /usr/share/nginx/html 로 알려 줍니다. 이것은 이미지 구축 기간에 React 프로그램을 복사한 디렉터리입니다.우리는 React 프로그램이 한 페이지 프로그램이라는 것을 잊어서는 안 된다. 이것은 첫 번째 요청을 할 때 한 페이지만 보여야 하고, 나머지 작업은 브라우저의React가 책임진다는 것을 의미한다.

부두 노동자의 이미지를 만들다

Docker 이미지 구축에 필요한 모든 코드가 있습니다.Docker 명령을 실행하여 구성합니다.

# Make sure to be on the same folder of your React app
# replace 'my-react-app' with whatever name you find appropriate
# this is the image tag you will push to your Docker registry
docker build -t my-react-app .

이미지를 구성할 때 다음 명령으로 방금 생성한 이미지의 크기를 확인합니다.

# List all the images on your machine
docker images
# You should see something like this:
REPOSITORY     TAG       IMAGE ID        CREATED          SIZE
my-react-app   latest    c35c322d4c37    20 seconds ago   22.5MB

자, 우리 Docker 이미지는 Docker 등록표에 들어갈 준비가 되어 있습니다.이 사진의 흥미로운 점은 크기가 25.5MB에 불과하다는 것이다.작은 그림이 다운로드, 이미지 구축, 업로드 기간에 자동 파이프를 더 빨리 실행하기 때문에 배치에 정말 좋습니다.

docker compose를 사용하여 React 응용 프로그램을 실행합니다.

현재 필요한 것은 Docker 이미지를 실행하는 방법입니다.로컬에서 테스트를 수행하기 위해 다음을 포함하는 docker-compose.yml라는 파일을 만듭니다.

version: '3.7'

services:
  my_react_app:
    build:
      context: .
    ports:
      - '8000:80'

Docker Compose는 이미지가 존재하지 않는 상황에서 이미지를 구축하고 로컬 기기의 포트8000를 용기에 연결된 포트80를 책임진다.
다음 명령을 사용하여 컨테이너를 회전합니다.

docker-compose up

현재 localhost:8000 에서 브라우저를 열고 React 프로그램이 실행되고 있는지 확인하십시오.너는 반드시 이런 물건을 보아야 한다.

결론

Docker로 React 프로그램을 실행하는 것은 가장 좋은 배치가 아닐 수도 있지만, 나처럼 Docker를 실행하려면 매우 간단하고 효과적일 수 있습니다.이것은 많은 자동화 파이프를 열어 프로젝트에 연결할 수 있습니다. 예를 들어 Github Actions 또는 Gitlab CI/CD, 자동화 배치 과정을 사용할 수 있습니다.찾을 수 있다the code of this post here.