Koyeb을 사용하여 10분 이내에 정지된 React/TS 응용 프로그램을 배치하는 방법

안녕하세요!
만약 당신이 이곳에 로그인한다면, 아마도 기능이 완비된 React 프로그램을 배치하는 것이 얼마나 고통스럽고 지루한지 너무 잘 알고 있기 때문일 것이다.
코드를 작성하는 것은 매우 쉽지만, 처음 그것을 실천에 옮기는 것은 아마도 매우 무서워 보일 것이다.
나는 일단 읽기가 끝나면 서비스와 배치가 더 이상 문제가 되지 않기를 바란다.
스포일러 알림: 저는 게으르기 때문에 기본적인 뜻을 지킬 것입니다. create-react-app 위에서 저희 프로그램을 구축할 것입니다. 저는 모든 선결 조건이 검사되었다고 가정할 것입니다(docker 개념, npm와 npx 설치 등)
소오, 우리 오늘 뭐 할 거야?
어플리케이션 배포에 집중할 수 있도록 다음과 같은 단순한 목표를 유지합니다.

기본 유형 스크립트 응용 프로그램 팝업

저희 dockerfiles

를 작성하고 이해합니다.

dockerhub

에 저희 프로그램 그림 발표

사용 Koyeb 어플리케이션 배포

요구 사항

A dockerhub account

Docker running on your machine

A koyeb account

코예브에 관한 몇 줄

비록 보조 프로젝트 (AWS와 GCP) 를 완성할 수 있지만, Heroku를 사용하는 것은 이미 지겨워졌다.너무 많아, 늘 똑같아.
대체 방안을 찾다가 우연히 Koyeb을 발견했습니다. Koyeb은 낮은 설정, 자동 확장, 전역 범위 (즉, 우리는 여기서 대량의 기능을 필요로 하지 않음) 의 응용 프로그램을 배치할 수 있는 서버 플랫폼을 제공합니다.💥)
우리끼리 보자.

1) 애플리케이션을 엽니다!

간단한 완두콩.만약 나처럼 네가 이미 천 번을 했다면 이 부분을 뛰어넘어라:).
typescript 템플릿을 사용하여 프로젝트를 만듭니다.

yarn create react-app my-app --template typescript

이 이름은 모든 것을 설명합니다. 이것은 모든 의존 항목을 설치한 언제든지 사용할 수 있는 Typescript 프로젝트를 생성합니다. (그렇지 않으면 프로젝트의 루트 디렉터리에 설치하는 것을 잊지 마십시오. yarn 또는 npm install다시, 평소처럼 (세상에, 더 이상 못 참겠어)😄), rapidyarn run start 응용 프로그램은 http://localhost:3000에서 기묘한react 응용 프로그램 마이크로프로세서로 응용 프로그램을 시작해야 한다.없으면 알려주세요.😅.
이 때 필요한 코드를 자유롭게 작성할 수 있습니다.그러나 본문에서 우리는 어떠한 인코딩도 토론하지 않을 것이다.

2) EMC 애플리케이션을 Dockerize

본고의 첫 번째 버전에서 우리는prod-ready 환경에 직접 들어갈 것이다.하지만 저는 신들 앞에서 다섯 명이 넘는 사람들이 댓글에 핫가재 개발 환경을 요구할 경우를 맹세합니다...나는 내 자신을 처형할 것이다.
우리는 하나하나 dockerfile을 만들 것입니다.처음부터 쉽지 않았다. 특히 응용 프로그램 개발에 전념하고 싶을 때, 나는 우리가 무엇을 원하는지, 우리가 무엇을 하는지 이해하는 것이 중요하다고 생각한다.
먼저 프로젝트의 루트 디렉토리에 Dockerfile 파일을 만듭니다. 이 파일은 아래와 같이 만들어야 합니다. 그렇지 않으면 부정행위를 할 수 있습니다.

잘했어!(여기 도움이 필요합니다. 코드 블록에 경로를 추가하는 방법을 모르겠습니다)
빠른 알림.생산에서 우리는 모듈화된 코드만 실행하는 것이 아니다.우리는 먼저 우리의 응용 프로그램을 구축해야 한다. (사용 npm run buildindex.html 입력 파일은 정적으로 제공됩니다.이것이 바로 현지 환경에서 생산이 까다로워진 곳과 원인이다.
이 점을 감안하여 우리는 우리가 해야 할 일을 두 부분으로 나눌 수 있다.

어플리케이션 구축

우리를 위한 구축 서비스(우리는 게으름을 기억하기 위해nginx를 사용할 것이다)

로컬에서 실행 중인 프로젝트npm run build를 구축할 수 있습니다.이를 Dockerfile로 전환하는 방법에 대해 살펴보겠습니다.

# 1st step: The build

# Here we state that we will be using the node 16.10 version as the base image
FROM node:16.10 as build
# We define /app as our working directory -where our incoming commands will be executed-
WORKDIR /app

# We copy our package.json and yarn.lock (adapt if you are using npm to package-lock.json) into our workdir
COPY package.json ./
COPY yarn.lock ./

# We install our dependencies
RUN yarn
# We install react-scripts globally to avoid any bad surprise
RUN yarn add [email protected] -g

# COPY our app
COPY . ./

# And we build! -yarn comes with the node:16.10 image-
RUN yarn run build

네, 우리의 건설은 이미 시작되었고 운행이 없습니다.우리가 말한 바와 같이 다음 단계에는 웹 서버를 설치해서 서비스를 제공하는 것이 포함될 것이다.과고고!
이제 곧 출시될 서버를 먼저 구성해 보겠습니다.새 폴더 nginx/nginx.conf 에 다음 프로필을 추가하기만 하면 됩니다.나는 세부 사항을 깊이 토론하지 않을 것이다. 당신이nginx에 대한 깊이 있는 이해에 달려 있다😄 따라서 다음과 같은 작업 구성을 직접 공유합니다.

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;
  }

}

이제 Dockerfile로 돌아가서 서버를 시작하겠습니다.

# ... Step 1

# Always good to repeat, we use nginx:stable-alpine as our base image
FROM nginx:stable-alpine
# Taking advantages from docker multi-staging, we copy our newly generated build from /app to the nginx html folder -entrypoint of the webserver-
COPY --from=build /app/build /usr/share/nginx/html
# We copy the nginx conf file from our machine to our image
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# We expose the port 80 of the future containers
EXPOSE 80
# And finally we can run the nginx command to start the server
CMD ["nginx", "-g", "daemon off;"]

속공

좋아요!아직도 읽고 있는 사람들에 대해 나는 네가 이 글을 읽는다면, 이것은 너와 나처럼 가상화 분야의 전문가가 아니라는 것을 의미한다고 생각한다.
그래서 내가 보기에 지금이야말로 모든 것이 예상대로 진행되는 정확한 시기를 확보해야 한다.
다음 명령docker build . -t frontend:prod을 실행하여 구축 또는 미러링할 수 있습니다.
커피 한 잔을 가지고 돌아온 후 성공적으로 운행된다면 용기를 돌리기 위해 다음 명령을 시도해 보세요. (마찬가지로 설명을 하기 위해서는 이번에 10번의 투표가 필요합니다.)docker run -it --rm -p 1338:80 frontend:prodDell은 다음을 사용합니다.

it 용기를 상호작용으로 운행

rm는 우리가 컨테이너를 떠난 후에 컨테이너를 정리하는 것이다

p 양호한 레거시 포트 바인딩yourmachine:yourcontainer

펑 하고 네비게이션 http://localhost:1338/ 이 왔습니다. 프로그램을 시작하고 실행해야 합니다. 로컬입니다. 축하합니다.🎉!

3) 이미지를 Dockerhub로 밀어넣기

⚠️ 이렇게 하면 이미지가 공용 저장소로 푸시되므로 불편한 점이 있으면 이 stackoverflow guidance에 따라 개인 정보를 유지할 수 있습니다.
나는 네가 docker 계정을 만들었다고 가정하고 네 DockerId 를 기억한다.docker login 명령을 사용하여 셸에서 docker 계정에 연결하고 필요한 절차를 완료합니다.
저희가 먼저 그림을 표시해 드릴게요.docker tag frontend:prod {YOUR_DOCKER_ID}/prod그리고 밀어주세요.docker push {YOUR_DOCKER_ID}/prod그럴 거야!

4) Koyeb을 사용한 배포

Koyeb은 아직 초기 단계입니다. 계정을 만들고 슬랙에 가입하면 몇 분 안에 활성화해야 합니다.
Dell은 고객의 dashboard를 사용하여 시간을 절약할 것입니다(CLI 투표 30회).
너는 반드시 다음 페이지에 로그인해야 한다

클릭하여 앱을 만들고 우리가 관심 있는 사이트에 로그인하세요.

이것은 우리에게 무슨 좋은 점이 있습니까?

docker 방법을 선택하고 가리키기docker.io/{YOUR_DOCKER_ID}/{IMAGE_TAG}

우리의 컨테이너 항구 노출80(Dockerfile 참조)

서비스에 대한 이름 선택

당신의 서비스를 만듭니다...그리고 타다!너는 커피 한 잔을 더 마실 시간이 없어야 한다. 너의 응용 프로그램은 활발해야 한다. 그래, 활발해야 한다. 나는 (어쨌든 너의 마지막 커피는 5분 전이다. 그것은 정말 건강하지 않다.) 라고 말했다.
이 글을 쓸 때 사용자 정의 영역이 Koyeb에서 실행되고 있습니다.그러나, 그들은 너에게 하위 도메인을 제공할 것이다. (네가 나에게 알려준 Heroku default처럼.)
URL에 따라 조작하고: 을 누르십시오.

결론

모든 이야기에는 결론이 있다.그럼 우리도 한잔 하자.
만약 당신이 이 모든 것을 겪었다면, 우선 고맙습니다!피드백은 항상 환영을 받기 때문에 망설이지 말고 개선할 점을 지적해라😄.
그러면 우리는 무엇을 배웠는가(나는):

create react app 명령 실행(확정, 계산하지 않음)

간단하지만 실용적인 Dockerfile을 써라. (우리는 이 점을 과소평가하지 마라. 가장 복잡한 것은 어디에서부터다)

docker

를 사용하여 생산성 있는React 응용 프로그램 구축

docker

로nginx 웹 서버 시작

Koyeb

로 docker 이미지 배포
와, 너무 많다.더 엄숙한 측면에서 볼 때 최초의 배치는 어려워 보일 수 있지만, 최종적으로 이를 더 작은 단계로 나누는 것은 그들의 신비로운 베일을 벗기는 데 도움이 된다.
특히 개발자로서 Koyeb 등 도구를 활용하면 전체 인프라 시설의 복잡성을 낮추고 전문적인 분야에 전념할 수 있습니다(코딩?)진정으로 중요한 것은 당신의 사용자입니다.
도움이 됐으면 좋겠어요!
존슨의 말을 인용하는 것은 정말 나쁜 여정이었다.