Zenn
🦁

Workers と Pages への統合の向けて　C3 (Create-Cloudflare CLI) を試す

2024/05/28に公開
Cloudflare
tech

Cloudflare のDeveloper Platformには多くのサービスが存在しこのBlogでは１個ずつ機能を取り出し触れています。その中でもWorkers と Pages はそれぞれプログラムの実行基盤とWebのホスティングサービスとして中核に位置しています。昨今のアップデートではマネージメントコンソールが統一されるなどCloudflare側では将来的なWorkers と Pages への統合に向けていろいろなアップデートが行われています。

PagesにはPages Functionという機能が存在し、functionディレクトリに配置したスクリプトはWorkersが起動することで単純な静的なサイトのホスティングだけではなく、スクリプトの実行を可能とすることでより高度なサイトのホスティングを可能としています。

従来WorkersとPagesの開発ではwranglerを用いていますが、C3はクラウドフレアが出した新しい開発用CLIです。

C3 と スキャルフォールド

スキャルフォールドとはアプリケーションの実行環境の足場を指し、同時にその足場を作成する機能のことを言います。従来のwranglerではWorkersやPages、その他Cloudflareサービスの操作に問題はありませんでしたが、標準的なJavaScript用ウェブフレームワークのCLIを操作する機能はありませんでした。このため複数の開発CLIを使う必要があったのですが、C3はそれを統一します。C3からまとめてWorkers、Pages、そして対応する以下のフレームワークの初期状態（ここから開発を進めるための足場)を作ることが出来ます。

  • Analog
  • Angular
  • Astro
  • Docusaurus
  • Gatsby
  • Hono
  • Next
  • Nuxt
  • Qwik
  • React
  • Remix
  • Solid
  • Svelte
  • Vue

さっそくやってみる

初回の今回はシンプルにWorkersのHello Worldの作成、次にPages で Reactサイトの構築をやっていきます。

まずはC3のインストールです。

mkdir c3
cd c3
npm create cloudflare@latest

入力パラメータなどは以下を参考にして下さい。

using create-cloudflare version 2.21.3

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./workers
│
╰ What type of application do you want to create?
  ● "Hello World" Worker
  ○ "Hello World" Worker (Python)
├ What type of application do you want to create?
│ type "Hello World" Worker
│
├ Do you want to use TypeScript?
│ no typescript
│
├ Copying template files 
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Retrieving current workerd compatibility date 
│ compatibility date 2024-05-24
│
├ Do you want to use git for version control?
│ no git
│
╰ Application configured 

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account more than one account available
│
├ Which account do you want to use?
│ account Harunobukameda Demo account
│
├ Deploying your application
│ deployed via `npm run deploy`
│
├  SUCCESS  View your deployed application at https://workers.harunobukameda.workers.dev
│
│ Navigate to the new directory cd workers
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers        
│ Stuck? Join us at https://discord.cloudflare.com
│
├ Waiting for DNS to propagate
│ DNS propagation complete.
│
├ Waiting for deployment to become available 
│ deployment is ready at: https://workers.harunobukameda.workers.dev      
│
├ Opening browser
│
╰ See you again soon!


マネージメントコンソールでもWorkersがDeployされていることが確認できます。

出来上がったWorkers環境はいつも通りwranglerで操作ができます。

では次にPagesのプロジェクトをReactで作成してみます。コマンドは先ほどと同じです。

npm create cloudflare@latest

入力パラメータは以下を参考にしてください。今度は"Hello World" WorkerではなくWebsite or web appを選んでいます。

using create-cloudflare version 2.21.3

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./pages
│
╰ What type of application do you want to create?
  ○ "Hello World" Worker
  ○ "Hello World" Worker (Python)
  ○ "Hello World" Durable Object
  ● Website or web app
  ○ Example router & proxy Worker
├ What type of application do you want to create?
│ type Website or web app
│
╰ Which development framework do you want to use?
  ○ Analog
  ○ Angular
  ○ Astro
  ○ Docusaurus
  ○ Gatsby
  ○ Hono
  ○ Next
  ○ Nuxt
  ○ Qwik
  ● React
  ○ Remix
  ○ Solid
  ○ Svelte
  ○ Vue

├ Which development framework do you want to use?
│ framework React
│
├ Continue with React via `npx create-react-app@5.0.1 pages`
│

Creating a new React app in C:\Users\HarunobuKameda\c3\pages.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...       


added 1489 packages in 54s

258 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 67 packages, and changed 1 package in 5s

262 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1556 packages in 2s

262 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created pages at C:\Users\HarunobuKameda\c3\pages
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files  
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd pages
  npm start

Happy hacking!

╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers 
│ installed via `npm install wrangler --save-dev`
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts 
│ updated `package.json`
│
╰ Application configured 

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account more than one account available
│
├ Which account do you want to use?
│ account Harunobukameda Demo account
│
├ Creating Pages project
│ created via `npx wrangler pages project create pages --production-branch
 master`
│
├ Verifying Pages project
│ verified project is ready for deployment
│
├ Deploying your application
│ deployed via `npm run deploy`
│
├  SUCCESS  View your deployed application at https://pages-9au.pages.dev 
│
│ Navigate to the new directory cd pages
│ Run the development server npm run dev
│ Preview your application npm run preview
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.cloudflare.com
│
├ Waiting for DNS to propagate
│ DNS propagation complete.
│
├ Waiting for deployment to become available
│ deployment is ready at: https://pages-9au.pages.dev
│
├ Opening browser
│
╰ See you again soon!

途中でC3がReactをスキャルフォールドし`以下のようにReac環境をインストールしていることがわかります。

Creating a new React app in 
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

出来たサイトを見るとReactが起動していることがわかります。

通常PagesはファイルのダイレクトアップロードのほかにGitと連携しGithub ActionsをイベントとしてDeployを再実行させる機能がついています。Gitと連携させるためのProjectは以下のように指定することで可能です。

npm create cloudflare@latest --type web-framework --framework astro --template git@github.com:user/repo

https://developers.cloudflare.com/pages/get-started/c3/

Discussion