Computer >> 컴퓨터 >  >> 프로그래밍 >> Redis

Fastly Compute에서 Upstash Redis 활용하기 — 엣지에서 페이지뷰 카운터 앱 만들기

개요

이 글에서는 Fastly Compute@Edge에서 실행되는 간단한 애플리케이션을 만들어 보겠습니다. 이 애플리케이션은 Upstash Redis에 접속해 페이지뷰 수를 기록하는 기능을 담당합니다.

참고: 이 예제는 구버전의 Fastly CLI를 사용합니다. 최신 버전은 관련 문서를 참고하세요.

왜 엣지 컴퓨팅인가?

엣지 컴퓨팅은 최근 몇 년간 가장 주목받는 기술 트렌드 중 하나입니다. Cloudflare, Fastly와 같은 CDN 서비스 업체들이 사용자가 자사의 엣지 인프라 위에서 직접 애플리케이션을 실행할 수 있도록 지원하기 시작했습니다. 덕분에 개발자는 전 세계 곳곳에 분산된 고성능 애플리케이션을 손쉽게 구축할 수 있게 되었습니다.

Compute@Edge는 Fastly가 제공하는 서버리스 플랫폼입니다. Rust, AssemblyScript, JavaScript로 코드를 작성하면 Fastly의 엣지 네트워크에서 바로 실행할 수 있습니다. 다만 Fastly Compute 함수는 상태를 저장하지 않는(stateless) 방식으로 동작하기 때문에, 개발자는 애플리케이션 상태를 외부 스토리지에 보관해야 합니다. 그런데 Fastly는 함수 런타임으로 WebAssembly를 사용하며 TCP 연결을 허용하지 않습니다. 이때 REST API, 글로벌 복제, 서버리스 요금제를 갖춘 Upstash Redis가 Fastly Compute 함수에 가장 적합한 솔루션이 됩니다.

완성된 코드와 데모는 하단의 참고 자료에서 확인할 수 있습니다.

프로젝트 설정

먼저 Upstash 콘솔에서 데이터베이스를 생성합니다. 엣지 위치에서 낮은 지연 시간을 얻으려면 Global Database를 선택하는 것이 좋습니다.

Fastly CLI를 설치합니다:

brew install fastly/tap/fastly

Fastly 계정으로 CLI를 설정합니다:

fastly configure

새 폴더를 만들고, 그 안에서 fastly compute init을 실행해 프로젝트를 초기화합니다:

➜  using-fastly-compute git:(master) ✗ fastly compute init

Creating a new Compute@Edge project.

Press ^C at any time to quit.

Name: [using-fastly-compute]

Description:

Author: [enes@upstash.com]

Language:

[1] Rust
[2] AssemblyScript (beta)
[3] JavaScript (beta)
[4] Other ('bring your own' Wasm binary)

Choose option: [1] 3

Starter kit:
[1] Default starter for JavaScript
    A basic starter kit that demonstrates routing, simple synthetic responses and
    overriding caching rules.
    https://github.com/fastly/compute-starter-kit-javascript-default
Choose option or paste git URL: [1]

✓ Initializing...
✓ Fetching package template...
✓ Updating package manifest...
✓ Initializing package...

Initialized package using-fastly-compute to:

	/Users/enes/dev/examples/using-fastly-compute

To publish the package (build and deploy), run:
	fastly compute publish
To learn about deploying Compute@Edge projects using third-party orchestration tools, visit:
	https://developer.fastly.com/learning/integrations/orchestration/
SUCCESS: Initialized package using-fastly-compute

upstash-redis와 flight-path 패키지를 설치합니다:

npm install @upstash/redis flight-path

webpack.config.js에 다음 플러그인을 추가합니다:

plugins: [
    // Polyfills go here.
    // Used for, e.g., any cross-platform WHATWG,
    // or core nodejs modules needed for your application.
    new webpack.ProvidePlugin({
        URL: "core-js/web/url",
    }),
],

fastly.toml 파일을 다음과 같이 수정합니다:

authors = ["enes@upstash.com"]
description = "Example of using Upstash with Fastly Compute@Edge"
language = "javascript"
manifest_version = 2
name = "fastly-upstash"
service_id = "PASTE_YOUR_SERVICE_ID"

[local_server.backends.upstash-db]
url = "https://eu1-liberal-cat-30162.upstash.io"

Fastly Compute Service를 생성한 뒤, 발급받은 Fastly Service ID를 위 파일에 붙여넣어야 합니다.

또한 Upstash REST URL을 백엔드(backend)로 Fastly Compute Service에 등록해야 합니다. Fastly Compute는 모든 외부 네트워크 연결을 반드시 백엔드로 등록하도록 요구하기 때문입니다. 서비스 화면에서 Edit Configuration > Clone version x to edit > Origins > Create a host 순서로 클릭합니다.

호스트를 추가한 후 편집 아이콘을 클릭해 호스트 이름을 지정합니다. 이름은 upstash-db로 설정하세요. 이 이름은 나중에 upstash-redis 클라이언트를 설정할 때 backend 옵션 값과 동일해야 합니다. URL에서 https:// 부분은 제거합니다. 마지막으로 우측 상단의 Activate 버튼을 클릭해 현재 배포 버전에 구성을 활성화합니다.

[local_server.backends.upstash-db] 항목은 함수를 로컬 환경에서 실행할 때 필요합니다. URL 값을 본인의 Upstash 데이터베이스 REST URL로 교체하세요.

구현

src/index.js가 서버리스 함수의 실제 구현 파일입니다. 아래와 같이 코드를 작성합니다:

import { Router } from "flight-path";
import { Redis } from "@upstash/redis/fastly";

const router = new Router();

const redis = new Redis({
  url: "PASTE_YOUR_UPSTASH_REST_URL",
  token: "PASTE_YOUR_UPSTASH_TOKEN",
  backend: "upstash-db",
});

router.get("/", async (req, res) => {
  const count = await redis.incr("count");
  res.send(`Fastly with Upstash! Count: ${count}`);
});

router.listen();

Upstash 콘솔에서 REST URL과 토큰을 복사해 코드에 붙여넣으면 됩니다.

코드의 동작은 단순합니다. upstash-redis 클라이언트로 Upstash에 연결한 뒤, 카운터 값을 증가(incr)시키고 그 결과를 응답으로 반환합니다.

주의할 점은 일반적인 Redis 클라이언트는 사용할 수 없다는 것입니다. 대부분의 Redis 클라이언트는 TCP 연결을 사용하는데, Fastly Compute는 이를 지원하지 않습니다.

또한 auth()로 인증할 때는 backend: upstash-db 옵션을 함께 전달해야 합니다. 앞서 언급했듯이 Fastly Compute는 모든 외부 네트워크 연결을 백엔드로 등록하도록 요구하기 때문입니다.

로컬에서 실행하기

다음 명령어로 함수를 로컬 환경에서 실행할 수 있습니다:

fastly compute serve

빌드 및 배포

다음 명령어로 함수를 빌드하고 배포합니다:

fastly compute publish

명령어를 실행하면 Fastly가 애플리케이션을 빌드하고 배포합니다. 완료 후 URL이 출력되므로, 해당 주소로 접속해 정상적으로 동작하는지 확인할 수 있습니다:

https://horribly-organic-spider.edgecompute.app

마무리

이번 글에서는 Upstash와 Fastly Compute를 활용해 엣지에서 실행되는 아주 간단한 애플리케이션을 만들어 보았습니다. 여러분의 피드백은 Upstash와 콘텐츠를 개선하는 큰 도움이 됩니다. Twitter 또는 Discord를 통해 의견을 남겨주세요.

참고 자료