2018년에 Cloudflare는 Cloudflare Workers(CFW)를 발표했는데 이것은 V8과Service Workers API standard를 바탕으로 하는 FaaS 플랫폼이다.그 해에는 세부 사항이 별로 없었다.오늘 나는 이 점을 바꿀 것이다.

Cloudflare Workers란 무엇입니까?

CFW는 AWS Lambda와 유사한 FaaS 플랫폼이지만 Lambda와 많은 차이점이 있다.그들은 브라우저의 서비스 담당자와 같지만, 그들과는 다르다.

CFW와 AWS Lambda는 어떻게 다릅니까?

Lambda는 AWS Fire 폭죽을 기반으로 구축된 것으로 매우 빠르고 작은 클라우드 가상화이다.이것은 서로 다른 운행을 불러올 수 있고, 심지어는 자신의 운행시via를 Lambda층으로 사용할 수 있으며, 당신이 좋아하는 방식으로 함수를 실행할 수 있습니다.
CFW는 Chrome 브라우저를 지원하는 JavaScript 엔진인 Google V8에 구축되었습니다.V8은 한 프로세스 내에 여러 개의 샌드박스를 만들 수 있도록 하여 lower cold-start delays drastically 의 많은 비용을 줄일 수 있다.
이것은 CFW의 첫 번째 제약을 끌어낸다.너는 Lambda층을 사용하는 것처럼 스스로 운행할 수 없다.그러나 V8은 WebAssembly를 지원하기 때문에 한 언어가 WebAssembly를 컴파일 목표로 지원한다면 이것은 이 제한을 우회하는 방법이다.
CFW도 더 가까워요.Lambda@EdgeCFW는 항상 Cloudflare 네트워크의 가장자리에 배치되고 CFW는 Lambda처럼 추가 API 스위치가 필요하지 않기 때문에 일반적인 Lambda보다 더욱 우세하다.
내부 용례에 대해서는 lambda를 직접 호출할 수 있지만, 공공 API에 대해서는 그 앞에 API 스위치가 있어야 합니다.이것은 지연, 원가, 복잡성을 증가시켰다.대신 CFW는 URL에 직접 배치됩니다.
CFW에도 약간의 제한이 있다.그들은 10ms의 CPU 시간(비용 지불 계획에서 50ms)과 128MB의 메모리만 사용할 수 있다.CFW 스크립트는 최대 1MB까지 가능하며 계정당 30개만 허용됩니다. 예를 30x1MB에 넣지 못하면 CFW는 옵션이 아닙니다.
주의해야 할 것은 CFW가 어떤 것을 기다리고 CPU 시간을 사용하지 않는다면 무제한으로 실행할 수 있고, 심지어 요청에 응답한 후에 조작할 수 있다는 것이다.
CFW의 무료 계획은 매일 10만 건의 사형을 집행하고, 무제한 계획은 100만 건의 사형을 집행할 수 있으며, 비용은 0.50달러이다.CFW에 추가 API 게이트웨이가 필요하지 않다는 점을 감안하면 상당히 싸다.

CFW와 서비스 종사자는 어떻게 다릅니까?

CFW는 Service Worker API를 실현하지만 약간의 차이점이 있다. 분명히 브라우저에서 실행되는 것이 아니라 Cloudflare 서버에서 실행되는 것이다.서버 측의 실행은 서비스 인원보다 우수한 첫 번째 장점을 가져왔습니다. 크로스 사이트 스크립트를 실행할 수 있습니다.
CORS는 CFW의 문제가 아닙니다.실제로 CFW 에이전트를 사용하여 CORS가 활성화되지 않은 API를 사용하고 브라우저를 통해 직접 액세스할 수 있습니다.
서비스 종사자 API에 100% 부합하는 것은 아닙니다.보안상의 이유로 eval(), new Function 을 실행할 수 없습니다.그 밖에 Date.now() 실행 과정에서 변화가 없다는 것은 실행할 때 추가 코드를 불러오는 것이 작용하지 않는다는 것을 의미한다.
서비스 종사자와 마찬가지로 API 노드와 브라우저 사이의 에이전트로 사용할 수 있습니다.Cloudflare는 정의된 경로로worker를 실행하려고 시도합니다. 실패하면 요청을 원본으로 전파할 수 있습니다.
Service Worker API 준수를 통해 프런트엔드 개발자를 쉽게 사용할 수 있지만 Node와 다릅니다.js, 이로 인해 일부 라이브러리가 CFW 환경에서 작동하지 않을 수 있습니다.

배치

CFW를 사용하는 방법은 두 가지가 있습니다.

첫 번째이자 가장 간단한 것은 독립적인 단점으로 삼는 것이다.어떤 웹 서버와도 마찬가지다.
네가 너의 일꾼을 정의하고 그에게 길을 주는 것이 바로 이렇다.그것은 물건을 계산하고 사이트를 나타내며 제3자 API를 호출하여 네가 무엇을 좋아하든지 마음대로 한다.이런 상황에서 작업자는 자신의 URL을 가지고 오류가 발생했을 때 다른 웹 서버에 전달할 수 없습니다.
두 번째는 대리로서그것은 브라우저의 백엔드 프로세스에서 실행되지 않는 서비스 종사자와 같다.
웹 서버에 존재하는worker의 경로를 설정할 수 있습니다. Cloudflare는 실제 노드가 아닌worker를 실행합니다.그런 다음 CFW에서 끝점을 호출하여 응답을 클라이언트로 보내기 전에 처리할 수 있습니다.어떤 이유로 실행 제한이나 CFW 오류가 발생하면 요청을 끝점에 전달할 수 있습니다. 아무 일도 없었던 것처럼.
두 번째 용례는 Cloudflare가 소스 서버의 DNS를 처리하도록 요구합니다.

예: CORS 프록시 작업 스레드 만들기

이제 CFW가 무엇인지 알게 되었습니다. CFW가 어떻게 작동하는지 느끼기 위해 만들어 봅시다!

선결 조건

이 강좌에 대해 당신은 노드가 필요합니다.js v12와 aCloudflare account.

CLI 설치

CFW의 개발과 배치는 Wrangler라는 CLI의 도움으로 이루어졌습니다.우리는 NPM을 통해 그것을 설치할 것이다.

$ npm i @cloudflare/wrangler -g

항목 초기화

그런 다음 CLI를 사용하여 새 CFW 프로젝트를 생성할 수 있습니다.

$ wrangler generate cors-proxy
$ cd cors-proxy
$ npm i

Worker 스크립트 구현

우리는 randomfox API 을 사용할 것이다. 왜냐하면 그것은 무료이기 때문에 계좌도 필요 없고, CORS 지원도 포함되지 않기 때문이다.
새 프로젝트는 입구점으로 index.js 파일을 첨부합니다.파일 내용을 다음 코드로 바꿉니다.

const API_URL = "https://randomfox.ca/floof/";
const PROXY_ENDPOINT = "/cors-proxy";
const HTML = `
<!DOCTYPE html>

<h1>GET without CORS Proxy:</h1>
<code id='noproxy'>Waiting</code>

<h1>GET with CORS Proxy:</h1>
<img id="proxy" src="">

<script>
(async () => {
  try {
    await fetch('${API_URL}');
  } catch(e) {
    document.getElementById("noproxy").innerHTML = e;
  }
  const response = await fetch(window.location.origin + '${PROXY_ENDPOINT}')
  let { image } = await response.json();
  document.getElementById("proxy").src = image;
})()
</script>
`;

addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (!url.pathname.startsWith(PROXY_ENDPOINT))
    return event.respondWith(
      new Response(HTML, {
        headers: { "content-type": "text/html;charset=UTF-8" },
      })
    );

  if (event.request.method === "GET")
    return event.respondWith(handleRequest(event.request));

  return event.respondWith(
    new Response(null, { status: 405, statusText: "Method not allowed" })
  );
});

async function handleRequest(request) {
  const url = new URL(request.url);
  request = new Request(API_URL, request);
  request.headers.set("Origin", new URL(API_URL).origin);

  let response = await fetch(request);

  response = new Response(response.body, response);
  response.headers.set("Access-Control-Allow-Origin", url.origin);
  response.headers.append("Vary", "Origin");

  return response;
}

코드를 한 걸음 한 걸음 훑어봅시다.
우선, 우리는 세 개의 상수를 정의한다.

API_URL randomfox URL

PROXY_ENDPOINT 도메인에서 에이전트 역할을 하는 경로

HTML 브라우저

에서 작업자에 대한 액세스를 방지하기 위해 제공되는 예제 페이지입니다.
예시 페이지에서 두 개의 URL을 가져옵니다. 하나는 randomfox API입니다. 이 API는 CORS 헤더가 부족하여 실패하고 다른 하나는 우리의 에이전트에서 옵니다.그런 다음 이미지 요소의 src 을 API 제공 URL로 설정합니다.
다음으로fetch 이벤트를 위한 이벤트 탐지기를 정의합니다.그것은 PROXY_ENDPOINT 로 우리가 아닌 모든 경로에 응답할 것이다.GET 메소드를 사용하여 요청할 경우 HTML 함수를 호출합니다.PROXY_ENDPOINT 함수는 타사 API를 호출하고 응답을 클라이언트에게 보내기 전에 응답에 CORS 헤더를 추가합니다.이것은 클라이언트 JavaScript에 안전하게 사용할 수 있는 답을 브라우저에 알려 줍니다.
만약 누군가가 지원되지 않는 요청 방법을 사용하려고 시도한다면, 우리는 오류 상태로 응답할 것입니다.
이 작은 예는 this template 의 가상 버전을 바탕으로 한다.
CORS 헤더는 요청의 소스를 기반으로 동적입니다.보안상 정적 도메인을 사용하기 때문에 도메인에 접근하는 브라우저에서만worker에 접근할 수 있습니다.

보조 스크립트 배포

우리는 다시 Wrangler CLI를 사용하여 스크립트를 배포합니다.이를 위해 계정 ID를 handleRequest 파일에 추가해야 합니다. 이 파일은 Cloudflare dashboard의 메뉴 점 Workers에서 찾을 수 있습니다.
ID를 추가하면 다음 명령을 사용하여 비운영 배포를 수행할 수 있습니다.

$ wrangler publish

일꾼

만약 모든 것이 순조롭다면, 우리는 handleRequest 우리 직원에게 전화를 걸어 연락할 수 있다.

총결산

Cloudflare Workers는 백엔드 기능을 응용 프로그램에 추가하고자 하는 전방 개발자에게 좋은 도구입니다.변환 API 응답 또는 클라이언트에 대한 API 기밀 정보 숨기기PWAS 또는 JAMSTack 응용 프로그램을 구축하면 실제 백엔드가 필요 없이 CFW를 통해 전체 백엔드를 전달할 수 있습니다.
웹 표준에 대한 그들의 준수는 당신을 귀환처럼 느끼게 합니다. 몇 가지 명령만 있으면 즉시 시작하고 실행할 수 있습니다.
AWS Lambda가 유연하지 않다는 것을 명심해야 합니다. AWS Lambda는 더욱 전면적인 플랫폼으로 더 많은 설정을 허용하고 배치할 수 있는 스크립트 수량과 파일 크기에 대한 제한이 높습니다.

Reference

이 문제에 관하여(Cloudflare Workers 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fllstck/cloudflare-workers-introduction-14mo

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Cloudflare Workers 소개