Cloudflare Workers에서 Nuxt3 사용 시도

Nuxt 3의 특징 중 하나는 Nitro의 렌더링입니다.
CDN의 Serverless Function을 사용하면 SSR은 물론 다양한 환경에서 ISG(증분 정적 페이지 생성)를 사용할 수 있습니다.
배경은 Serverless Archeitecture의 보급으로 Jamstack이 콘텐츠를 제공하고 사이트 개발을 진행할 수 있는 기반을 갖췄다.
Nitro와 Nuxt의 장점은 Netlify와 Vercel 등 Nuxt가 익숙한 환경에 국한될 뿐만 아니라 다른 많은 환경에서도 매우 적게(또는 제로) 설정된다.
베타 발표 시 문서에 기재된 환경은 다음과 같다.
Azure , Cloudflare Workers , Firebase Hosting , Netlify , PM2 , Vercel , AWS Lambda , Node.js server (default) , Node.js function , Service worker

Cloudflare Workers에서 해봤어요.

나는 이 기회를 빌려 지금까지 시도하지 않았던 클라우드 플레이어 워커스를 이용했다.
엣지사이드 렌더링이란 단어가 있지만 엣지사이드라고 하면 AWS뿐만 아니라 대형 CDN의 클라우드플레이어를 연상하는 사람이 많죠.
보통 200밀리초도 안 돼 썰렁해지기 시작하는 클라우드 플레이어 워커스는 클라우드 플레이어의 장점을 이용해 다른 회사들이 따라할 수 없는 서비스다.

계정 획득 및 계정 ID 확인

운영하는코바킨스 통마오장시 코-에토사이트는Cloudflare의DNS를 사용합니다.
클라우드 플러스 워커스도 같은 계정을 사용하기 때문에 이번에는 계정을 다시 취득할 필요가 없다.
Cloudflare Workers를 사용하려면 계정 ID가 필요하지만 대시보드 오른쪽 열에 있는 "Workers"링크가 마이그레이션된 페이지의 오른쪽 열에서 계정 ID를 확인할 수 있습니다.*.workers.dev의 하위 도메인을 설정할 수 있습니다. 원하는 도메인을 설정하십시오.
다음 URL을 사용할 수 있습니다.
project-name.your-sub.workers.dev

CLI 도구 설치

Cloudflare Workers용 CLI 도구wrangler가 준비되어 있습니다.
어디서나 사용할 수 있도록 옵션-g이 설치되어 있습니다.

npm i @cloudflare/wrangler -g

Cloudflare 인증을 계속합니다.

wrangler login

브라우저를 열고 [Wrangler を認証] 단추를 눌러 로그인한 후 화면 지원에 따라 접근 권한을 부여합니다.

Nuxt3 시작

일반적으로 npx nuxi init Nuxt3에 가입합니다.
최근 여러 차례 환경을 만들었기 때문에 쉽게 시작할 수 있는 이니시에이터 템플릿을 준비했기 때문에 그것을 이용한다.
Nuxt3에 VueUse 및 Windi CSS가 포함된 간단한 템플릿입니다.

git clone [email protected]:monsat/nuxt3-starter.git nuxt-cloudflare-app
cd nuxt-cloudflare-app
yarn

필요에 따라 Giit 환경을 교체하십시오.

git remote rename origin template  # origin → template に変更
gh repo create                     # 自分の GitHub リポジトリを作成
git push -u origin main            # main ブランチをプッシュ

이렇게 되면 template:mainclone의 원래 원격 지점origin:main이 자신의 GiitHub 계좌에 있는 원격 창고 지점이 된다.gh는 GitHub CLI의 명령입니다.
반대로 git remote add origin ~~~ 자신의 원격 창고를 설치할 수 있다

Nuxt3 작업 확인

다음 명령이 개발 환경에서 실행되는지 확인하십시오.

yarn dev

http://localhost:3000에 전면 및 후면 Nuxt3의 안전한 이동을 표시합니다.

wrangler.Toml 만들기

Nuxt3의 공식 문서에 따라 프로젝트 폴더의 바로 아래에 wrangler.toml를 만듭니다.
아이디 이외에 아래와 같이 보실 수 있습니다.
wrangler.toml

name = "playground"
type = "javascript"
account_id = "<アカウントIDをここに>"
workers_dev = true
route = ""
zone_id = ""

[site]
bucket = ".output/public"
entry-point = ".output"

[build]
command = "NITRO_PRESET=cloudflare yarn nuxt build"

[build.upload]
format = "service-worker"

구축wrangler dev을 통해 Cloudflare Workers와 같은 환경에서 작동하는지 확인합니다.

NITRO_PRESET=cloudflare yarn build
wrangler dev

http://localhost:8787에서도 앞 페이지의 표시 여부를 확인할 수 있을 것이다.
절차는 다음과 같다.
업데이트

NITRO_PRESET=cloudflare yarn build
wrangler publish

package.json하면 편리합니다.
package.json

  "scripts": {
    "deploy": "NITRO_PRESET=cloudflare yarn build && wrangler publish",
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },

https://your-sub-domain.workers.dev/에 이전 페이지가 표시되면 프로그램이 순조롭게 완성됩니다.
디자인 속도가 빠르고 페이지 그리기 속도가 빨라서 둘 다 경미한 충격을 받았다.

/server/api/hello.ts로 API 생성하기

오랜만에 /api/hello 방문해서 JSON에 답장하는 API를 만들어 보세요.
Nuxt3은 다음 JavaScript 파일/server/api/을 통해 API를 간단하게 생성할 수 있습니다.
server/api/hello.ts

import type { IncomingMessage, ServerResponse } from 'http'

export default (req: IncomingMessage, res: ServerResponse) => {
  return {
    message: 'Hello World',
  }
}

http://localhost:3000/api/helloJSON 취득 가능하죠.
애플리케이션fetch도 마련한 곳이다.
components/GetHello.vue

<script setup lang="ts">
const { data } = await useFetch('/api/hello')
</script>

<template>
  <div>
    <p>{{ data.message }}</p>
  </div>
</template>

pages/hello.vue

<template>
  <div>
    <GetHello/>
  </div>
</template>

디버깅 후 보안 표시 Hello World 가 완료되었습니다.🎉
Cloudflare Pages를 사용하면 관리가 용이하기 때문에 따로 시도해 보고 싶습니다.

GiitHub Action을 통한 자동 디버깅(현재 실행되지 않음)

GiitHub Actions를 사용하여 자동 디버그 환경을 구축하는 방법도 공식 문서에 기재되어 있습니다.
제 프로필API 토큰부터[トークンを作成する]GiitHub의ActionssecretsCF_API_TOKEN에 등록하면 공식 문서를 직접 이용하는 것.github/workflows/cloudflare.yml입니다.
하지만 현재 디버깅에 실패했습니다.
마지막 Publish to Cloudflare에 다음 정보가 표시됩니다.

yarn run v1.22.15
$ /github/workspace/node_modules/.bin/nuxt build
[log] Nuxt CLI v3.0.0-27258467.4e424d0
Error:  Unexpected token '.'
  at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Build failed! Status Code: 1

원인을 알면 메모하고 싶은데 해결 방법을 아는 사람이 있으면 꼭 알려주세요.