🚀

create-cloudflare-cli(C3)を使ってみる

2023/12/27に公開

Cloudflare

tech

はじめに

この記事では create-cloudflare-cli(C3) について紹介します。

create-cloudflare-cli(C3) とは

create-cloudflare-cli(C3) は Cloudflareへの新しいアプリケーションのセットアップとデプロイを支援するために設計されたコマンドラインツールです。

主な特徴は以下の通りです。

GitHubと連携することでデプロイを自動化できる
Nuxt・Hono・React・Vue・Angular・Svelteなどのフレームワークをサポートしている
コマンドを実行すると、Cloudflare Pagesでホストされる新しいアプリケーションの作成からデプロイまでを行ってくれる
３ページまでなら無料プランで利用可能

create-cloudflare-cli を使ってみた

今回のサンプルは Hono をセットアップしてデプロイしてみます。

$ npm create cloudflare@latest

using create-cloudflare version 2.8.4

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./hono-cloudflare-c3-sample
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Hono
│
╰ Continue with Hono via `npx create-hono\@0.3.2 hono-cloudflare-c3-sample --template cloudflare-workers`

Need to install the following packages:
  create-hono@0.3.2
Ok to proceed? (y) y

create-hono version 0.3.2
✔ Using target directory … hono-cloudflare-c3-sample
cloned honojs/starter#main to /Users/naoki.haba/Documents/hono-cloudflare-c3-sample
✔ Copied project files

╭ 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 command scripts for development and deployment
│ added commands to `package.json`
│
├ Do you want to use git for version control?
│ yes git
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Navigate to the new directory cd hono-cloudflare-c3-sample
│ Run the development server npm run dev
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

3つ・4つの質問に答えるだけで、Honoのセットアップが完了しました。

なお、今回はGitHubと連携してデプロイするので、Do you want to deploy your application? で no を選択しています。

ローカルでの動作確認

npm run dev を実行すると、Hello World! が表示されることを確認できます。

$ cd hono-cloudflare-c3-sample
$ npm run dev

> dev
> wrangler dev src/index.ts

 ⛅️ wrangler 3.22.1
-------------------
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8787
[wrangler:inf] GET / 200 OK (8ms)
[wrangler:inf] GET /favicon.ico 404 Not Found (10ms)
[wrangler:inf] GET / 200 OK (7ms)
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                                │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

GitHub連携〜デプロイ

最後にGitHubと連携してデプロイを自動化してみます。

ここまでの手順で作成されたファイルをGitHubにアップロードします。

$ git init
$ git remote add origin https://github.com/<your-gh-username>/<repository-name>
$ git add .
$ git commit -m "Initial commit"
$ git branch -M main
$ git push -u origin main