프로젝트 설정

이 문서는 Rakkas에서 제공하는 최첨단 React 프레임워크인 Vite을 사용하여 Twitter 복제본을 만드는 연습입니다. 우리가 ublog라고 부르는 Twitter 클론은 다음을 수행합니다.

Cloudflare Workers ,

에서 실행

은 Cloudflare Workers KV,

에 데이터를 저장합니다.

인증을 위해 GitHub를 사용합니다.

프로젝트 설정

⚠️ Rakkas itself works on Node 14.20 or later but we'll need at least Node 16.7 for this tutorial

create-rakkas-app 패키지를 사용하여 상용구를 만듭니다. 다음 옵션은 데모 앱을 제외한 모든 기능을 활성화합니다.

npx create-rakkas-app@latest ublog -y --no-demo

두 번째 단계는 프로젝트 디렉토리로 변경하고 종속성을 설치하는 것입니다.

cd ublog && npm install

이 시점에서 개발 서버를 시작하여 모든 것이 올바르게 설정되었는지 빠른 확인을 수행해야 합니다.

npm run dev

그러면 localhost:5173에서 개발 서버가 시작됩니다. 해당 주소를 방문하면 "Hello World"메시지를 볼 수 있습니다.

이제 파일src/routes/index.page.tsx을 편집하여 빠른 새로 고침 지원으로 다시 로드되는 Rakkas의 핫 모듈을 확인할 수 있습니다. 편집 내용은 브라우저에 즉시 반영됩니다.

커스터마이징

package.json 파일의 패키지 이름은 변경해야 함을 상기시키기 위해 -TODO-입니다. 따라서 ublog 로 변경하겠습니다.

생성된 상용구는 널리 사용되는 코드 포맷터인 Prettier 구성을 위한 .prettierrc 파일과 함께 제공됩니다. 생성된 구성은 비어 있지만 "useTabs": true 를 추가하여 들여쓰기에 탭을 사용하도록 약간 사용자 지정하는 것이 좋습니다. 물론 자신의 취향을 가질 수 있습니다. 편집 후 다음 명령을 실행하여 소스를 다시 포맷합니다.

npm run format

이제 .gitignore 파일을 만들고 node_modules 및 dist를 추가해야 합니다.

node_modules
dist

...그리고 Git 저장소를 초기화합니다.

git init && git checkout -b main

Cloudflare 작업자를 위한 설정

Rakkas documentation Cloudflare Workers에서 wrangler.toml 파일을 생성해야 한다고 합니다. 이것은 프로젝트 이름을 제외하고 거기에서 그대로 복사됩니다.

name = "ublog"
compatibility_date = "2021-11-01"
compatibility_flags = [
  "streams_enable_constructors",
]
main = "dist/server/cloudflare-workers-bundle.js"
usage_model = 'bundled'
workers_dev = true

[site]
bucket = "./dist/client"

그런 다음 Cloudflare Workers용 HatTip 어댑터를 설치해야 합니다. HatTip은 Node.js, Cloudflare Workers, Vercel, Netlify, Deno 등과 같은 많은 플랫폼에서 실행되는 HTTP 서버 애플리케이션을 구축하기 위한 JavaScript 라이브러리 세트입니다. Rakkas는 서버리스 지원을 위해 이를 사용합니다.

npm install -S @hattip/adapter-cloudflare-workers

이제 vite.config.ts 파일에서 Rakkas Vite 플러그인에 전달된 옵션을 업데이트하여 Cloudflare 작업자용으로 빌드하도록 Rakkas를 구성합니다. 결국 다음과 같이 보일 것입니다.

import { defineConfig } from "vite";
import rakkas from "rakkasjs/vite-plugin";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [
        tsconfigPaths(),
        rakkas({
            adapter: "cloudflare-workers",
        }),
    ],
});

이제 npm run build 를 실행하여 애플리케이션을 빌드할 때 모든 것이 작동하는지 확인할 수 있습니다. 모든 것이 잘 작동하면 Rakkas는 dist/server/cloudflare-workers-bundle.js에 Cloudflare Workers 번들을 빌드했다고 알려줍니다.

Cloudflare Workers에는 miniflare라는 로컬 에뮬레이터가 있습니다. 번들을 로컬에서 테스트하는 데 사용할 수 있습니다.

npm install -D miniflare
npx miniflare --modules dist/server/cloudflare-workers-bundle.js

이렇게 하면 localhost:8787에서 로컬 작업자 에뮬레이터가 시작됩니다. 방문하면 "Hello World"메시지가 표시됩니다.

배포 중

지금까지 모든 것이 잘 작동했다면 (아직 쓸모가 없는) 애플리케이션을 wrangler CLI를 사용하여 Cloudflare Workers에 배포할 수 있습니다. Cloudflare Workers 계정이 없거나 로그인하지 않은 경우 다음 명령을 실행하면 애플리케이션을 게시하기 전에 로그인하거나 무료 계정을 만들 수 있도록 브라우저가 열립니다.

npm install -D wrangler
npx wrangler publish

모든 것이 제대로 작동하면 응용 프로그램이 Cloudflare 작업자에서 실행되고 wrangler 사용할 수 있는 URL이 인쇄됩니다. 계속해서 방문하면 "Hello World"메시지가 표시됩니다.

마지막으로 변경 사항을 커밋하기 전에 몇 가지 바로 가기를 만들어 보겠습니다. scripts 파일의 package.json 섹션에 다음을 추가해 보겠습니다.

"scripts": {
    // ... existing scripts ...
    "local": "miniflare --modules dist/server/cloudflare-workers-bundle.js",
    "deploy": "wrangler publish"
}

이제 npm run local 로컬에서 테스트하고 npm run deploy 배포할 수 있습니다.

이제 변경 사항을 커밋할 수 있습니다.

git add . && git commit -m "chore: initialize boilerplate for Cloudflare Workers"

무엇 향후 계획?

다음 기사에서는 Cloudflare Workers KV을 사용하여 개발 중인 모의 KV 저장소를 만드는 방법을 포함하여 데이터를 저장하는 방법을 알아봅니다.

GitHub에서 현재까지의 진행 상황을 확인할 수 있습니다.