CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축

Serverless Computing은 소프트웨어 개발, 배포 및 DevOps를 단순화했습니다. 이 자습서는 CloudFlare Workers를 사용하여 전체 스택 서버리스 애플리케이션을 구축하는 것을 보여줍니다. 스케일링 및 인프라를 추상화하는 플랫폼입니다. 이 프로젝트 인 "Repo Hunt"는 제품 헌트와 레딧에서 영감을 얻은 오픈 소스 프로젝트의 일일 리더 보드입니다. 완성 된 사이트는 여기에서 사용할 수 있습니다.

CloudFlare의 글로벌 네트워크를 활용하는 CloudFlare Workers는 사용자 위치에 관계없이 대기력이 매우 낮은 성능을 제공합니다. Wrangler CLI 도구는 건물, 업로드 및 출판을 단순화합니다. 이 자습서는 "라우터"템플릿을 사용하여 URL 기반 라우팅을 가능하게합니다. 소스 코드는 github [링크--github-repo]에서 사용할 수 있습니다.

환경 설정

Wrangler 설치 :

 npm install -g @cloudflare/wrangler

라우터 템플릿을 사용하여 새 프로젝트를 만듭니다.

 Wrangler는 repo-hunt https://github.com/cloudflare/worker-template-router를 생성합니다
CD repo-hunt

라우터 템플릿은 웹 팩을 사용하여 NPM 모듈을 포함시킬 수 있습니다. Router 클래스는 URL 라우팅을 처리합니다. 기본 예 :

 // index.js
const router = require ( './ router');

addeventListener ( 'fetch', event => {
  event.respondwith (handlerequest (event.request));
});

비동기 함수 handlerequest (요청) {
  노력하다 {
    const r = 새로운 라우터 ();
    r.get ( '/', () => 새 응답 ( "Hello, World!"));
    const resp = r.route (요청);
    resp resp;
  } catch (err) {
    새로운 응답을 반환 (ERR);
  }
}

근로자는 fetch 이벤트에 응답하여 Response 반환합니다. 이 튜토리얼은 홈페이지 ( / ), 제출 양식 ( /post ) 및 제출 처리 ( /repo )에 대한 경로를 사용합니다.

라우팅 및 템플릿

홈페이지 ( / ) 경로는 제출 된 저장소 목록을 렌더링합니다. 간단한 HTML 응답으로 시작하겠습니다.

 // index.js
const router = require ( './ router');
const index = require ( './ 핸들러/색인');

// ... (index.js의 나머지)

// 핸들러/index.js
const 헤더 = { 'content-type': 'text/html'};
const handler = () => {
  새로운 응답을 반환합니다 ( "Hello, World!", {Headers});
};
module.exports = handler;

wrangler preview 사용하여 테스트하십시오. 다음으로 더 정교한 템플릿을 만들 것입니다.

 // 핸들러/index.js
const 헤더 = { 'content-type': 'text/html'};
const template = require ( '../ templates/index');

// ... (나머지 핸들러/index.js)

// templates/index.js
const 레이아웃 = 요구 사항 ( './ Layout');
const 템플릿 = () => 레이아웃 (`<h1 id="안녕하세요-세상"> 안녕하세요, 세상!</h1> `);
module.exports = 템플릿;

// templates/layout.js
const layout = body =>` $ {body} `;;
Module.Exports = 레이아웃;

일관된 스타일을위한 레이아웃 템플릿을 사용합니다 (Bulma CSS가 포함되어 있습니다).

작업자 KV와의 데이터 지속성

Workers KV는 데이터 지속성을위한 키 가치 저장소를 제공합니다. 저장소 (키 : repos:${id} ) 및 일일 목록 (키 : $date )을 저장합니다. 참고 : 근로자 KV에는 유료 계획이 필요합니다.

기본 KV 운영 :

 repo_hunt.put ( "Mystring", "Hello, World!"); // 값을 설정합니다
const string = repo_hunt.get ( "mystring"); // 값을 검색합니다

리포 및 데이 데이터 관리를위한 클래스를 만들 것입니다.

 // Store/Repo.js
const uuid = 요구 ( 'uuid/v4');

클래스 repo {
  // ... (Repo 클래스 구현)
}
module.exports = repo;

// store/day.js
const today = () => new date (). tolocaledatestring ();

module.exports = {
  추가 : Async 함수 (id) {// ...},
  getRepos : Async 함수 () {// ...}
};

Repo 클래스는 검증 및 지속성을 처리합니다. Day 매일 리포지토리 목록을 관리합니다.

사용자 제출물 처리

양식 (get /post )을 통해 사용자는 저장소를 제출할 수 있습니다. 게시물 /repo 핸들러 프로세스 제출 :

 // 핸들러/create.js
const qs = 요구 사항 ( 'QS');
const repo = require ( '../ store/repo');
const day = require ( '../ store/day');

// ... (핸들러 구현 생성)

qs 라이브러리를 사용하여 데이터를 구문 분석하고, Repo 객체를 생성하고, KV에 저장하고, ID를 Daily List에 추가합니다.

홈페이지의 데이터 렌더링

이제 홈페이지는 리포지토리 데이터를 검색하고 렌더링합니다.

 // 핸들러/index.js
// ... (업데이트 된 인덱스 핸들러)

// templates/index.js
// ...

Day Module의 getRepos 기능은 Repo 객체를 가져 와서 인스턴스화합니다. 템플릿은 각 저장소를 렌더링합니다.

전개

근로자 청구 .dev subdomain :

 Wrangler subdomain my-subdomain

응용 프로그램 배포 :

 Wrangler Publish

CloudFlare 대시 보드에서 KV 네임 스페이스를 만들고 네임 스페이스 ID로 wrangler.toml 업데이트하십시오.

 [[kv-namespaces]]
바인딩 = "repo_hunt"
id = "$ yournamespaceid"

KV 네임 스페이스를 wrangler.toml 에 추가 한 후 다시 게시하십시오. 응용 프로그램은 이제 라이브입니다!

추가 개발

이 튜토리얼은 서버리스 애플리케이션의 기초를 제공합니다. 향후 향상에는 업 투 투어, 의견 및보다 정교한 기능이 포함될 수 있습니다. 추가 개발 아이디어는 작업자 문서 및 템플릿 갤러리를 탐색하십시오.

위 내용은 CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!