Compute@Edge컨텐트 사용

간단한 내용 결합의 실시 예와Compute@Edge개발 관련 단락.
본문에서 소개한 단락:

Developer Hub에 공개된 샘플 코드 소스 템플릿으로 사용Compute@Edge의 항목

정보Fastly Fiddle

그리고 이 보도는Compute@Edge한 번 시도해 본 사람을 구상하여 기재한 것이다.아직 없는 사람은 이쪽 기사를 확인해 주세요.
https://zenn.dev/hrmsk66/articles/74e2e890726e99

시나리오 및 구현 예

동시에 두 개의 백엔드 서버에 요청을 보내고 받은 응답의 주체를 조합하여 고객에 대한 응답을 생성한다.클라이언트가 받는 응답은 백엔드의 응답 순서에 달려 있습니다.

백엔드 서버로 httpbin.org의/base64/{value}를 이용하다.이 단점은 {value} 부분에서 지정한 Base64 문자열을 디코딩한 결과를 응답으로 되돌려줍니다.

Cat server: https://httpbin.org/base64/Q2F0

Dog server: https://httpbin.org/base64/RG9n

Rust의 코드 예

src/main.rs
main.rs

use fastly::{Error, Request, Response};

#[fastly::main]
fn main(_req: Request) -> Result<Response, Error> {
    // Cat server
    let req1 = Request::get("https://httpbin.org/base64/Q2F0")
        .send_async("origin_0")?;
    // Dog server
    let req2 = Request::get("https://httpbin.org/base64/RG9n")
        .send_async("origin_1")?;
    let pending_reqs = vec![req1, req2];

    let (resp, pending_reqs) = fastly::http::request::select(pending_reqs);
    let mut resp1 = resp?;
    let (resp, _pending_reqs) = fastly::http::request::select(pending_reqs);
    let mut resp2 = resp?;

    let resp = Response::from_body(format!(
        "{} responded first, {} responded next",
        resp1.take_body_str(),
        resp2.take_body_str()
    ));

    Ok(resp)
}

Rust 예에서 사용된 비동기 API의 동작은 SDK 문서에 기록됩니다.
https://docs.rs/fastly/latest/fastly/

JavaScript의 코드 예

src/index.js
index.js

addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));

async function handleRequest(_event) {
  const pending_reqs = [
    // Cat server
    fetch("https://httpbin.org/base64/Q2F0", { backend: "origin_0" }),
    // Dog server
    fetch("https://httpbin.org/base64/RG9n", { backend: "origin_1" }),
  ];

  const logs = [];
  const responses = [];
  await Promise.all(
    pending_reqs.map(async (req, idx) => {
      logs.push('REQ' + idx);
      const r = await req;
      const t = await r.text();
      logs.push('RESP' + idx);
      responses.push(t);
    })
  );
  console.log(logs.join(' '));

  return new Response(`${responses[0]} responded first, ${responses[1]} responded next`, {
    status: 200,
  });
}

이 예의 백엔드 요청 수는 2이다Compute@Edge최대 32개의 백엔드 요청을 보낼 수 있습니다. (10까지 무료 시험 실행)

샘플 코드에 따라 프로젝트 만들기

소개된 코드는 Developer Hub에 공개됩니다.대부분의 공개된 샘플 코드는 Fastly Fiddle 웹 애플리케이션을 사용하여 작성되었습니다.Compute@Edge프로젝트의 원본 템플릿으로 사용할 수 있습니다.
실질적으로 프로젝트를 하나 합시다.여기서 샘플을 열어 주세요.
https://developer.fastly.com/solutions/examples/async-requests

Fiddle에 적힌 샘플은 브라우저에서 RUN 버튼과 함께 실행할 수 있습니다.언어를 선택하고 INSTALL 버튼을 클릭하십시오.

빨간 상자 복사 명령.

적당한 디렉터리를 만들고 디렉터리에서 복사한 명령을 실행하십시오.항목은 견본으로 만든다.

생성된 파일을 확인해 보세요.src 디렉터리 아래의 파일에는 샘플과 같은 코드가 포함되어 있어야 합니다.
샘플 코드에 의존하는 매크로 패키지가 존재하면 이 정의는 지정한 파일에 포함됩니다.
(Rust는 Cargo.toml, JS는 package.json)
fastly.toml는 백엔드 서버의 정의를 포함합니다.이러한 정의도 샘플의 백엔드 서버 설정을 바탕으로 만들어진 것이다.

fastly computeserve 명령을 실행하면 테스트용 HTTP 서버가 로컬에서 시작됩니다.http://127.0.0.1:7676에 테스트 요청을 보내고 동작을 확인하세요.

Fastly로 프로젝트를 제출하려면 fastly compublish 명령을 실행합니다.

Fastly Fiddle 정보

FiddleFastly 서비스의 코드를 작성하고 실행하며 동작을 확인할 수 있는 도구로 Fastly 계정에 로그인하지 않아도 사용할 수 있다.

편집이 시작되면 파마 링크가 URL을 통해 코드를 공유할 수 있기 때문에 Fastly 검증을 통해 실행된 논리는 물론 Fastly에서 문제 코드 공유를 지원하거나 Fastly에서 해결 방안을 소개하는 예로도 사용될 수 있다.
Fiddle은 URL만 알면 누구나 액세스할 수 있으므로 API 토큰과 같은 개인 정보를 쓰지 않도록 주의하십시오.

Fiddle을 소스 템플릿으로 사용

자신이 기술한 Fiddle도 다음 명령을 사용하여 Developer Hub의 견본과 같다Compute@Edge프로젝트의 원본 템플릿으로 사용할 수 있습니다.

fastly compute init --from=(Fiddle の URL)

Fiddle의 록과 클론

Fiddle 기본값은 누구나 편집할 수 있는 OPEN 상태입니다.편집을 제한하려면 화면의 오른쪽 위 모서리에 있는 메뉴에서 Lock 또는 Freeze를 선택합니다.

Lock: 자체 편집 가능 상태

Freeze: 아무도 편집할 수 없는 상태

오른쪽 위에 있는 메뉴에서 Lock/Freeze를 편집할 수 있는 Fiddle 클론을 생성할 수도 있습니다.

Developer Hub에 공개된 Fiddle에서도 클론을 만들어 맞춤 제작할 수 있습니다.

Fiddle 지원 패키지

Compute@Edge그러면 임의의 포장을 의존 관계에 포함시킬 수 있지만,Fiddle에서 사용하는 것은 유한하다.사용 가능한 포장 명세서는 여기.에서 확인하세요.
Fiddle에 대한 자세한 내용은 이 문서에 나와 있습니다.활용하세요.
https://developer.fastly.com/learning/vcl/fiddle/