Cloudflare サービスを使ってアプリを作ってみる

自分用 Slack に書き留めておいたメモ

給与計算アプリを Excel から Web アプリに移行したい！
そういえばと Cloudflare に話題のサービスがあったんだった。
Free ながらハイパフォーマンスな Web アプリケーションを開発できそうな Cloudflare の開発者向けサービス。
Cloudflare Pages
Cloudflare Workers
Cloudflare D1(alpha ver.)

20230302: nodejs は 16.x、npm は 8.x を使おう

えっつ

ついでに個人ブログをいつか立てたいと思ってたのでその足掛かりにもしたい。
Newt のアカウントが寝ているので CMS はこれ使う

えっつ

今年中で「あーなるほどね、とりあえずのものができたわ」まで進めたい

えっつ

いまいちわかってないけどこんなんだろ、を書いておく。シンプル構成からスタートしたい。

フロントエンド: Cloudflare Pages
- SvelteKit with TypeScript
バックエンド: Cloudflare Workers
- TypeScript or Rust
ソースホスティング: GitHub

えっつ

TypeScript も Rust も使うことで伸ばしていきたいので言語はこの 2 つどちらか。まずは一貫して使える TypeScript がいいかもしれない。

えっつ

Workers を API サーバとして使うか、さらに後ろに API サーバを立てて Workers がデータ運送専門にするか迷う

えっつ

20230225

何はともあれ、環境構築から Hello, World までしてみゆ

えっつ

作業記録

Cloudflare Pages で Hello, World 的なことをするリポジトリを作成して、デプロイまで体験する作業の記録。

最初、node v18 を使おうとしたけど、Cloudflare が v17.x までで、SvelteKit が v16.x もしくは v18.x までサポートしてたみたい。volta で node@16, npm@8 にして軌道修正してる。

Cloudflare アカウント準備

まずはアカウントが無いと始まらないので作成する。

Cloudflare のアカウントを作成
アカウントのメールアドレスを認証
Cloudflare のアカウント専用ページの言語を日本語に変更

新しいプロジェクトのセットアップ & GitHub リポジトリの作成

要するに Svelte アプリの準備になる。

GitHub にリポジトリを作成
作成したリポジトリを clone
次を参考に Svelte アプリを作成する

下記のように作成した。

clone したディレクトリで npm svelte@latest . を実行
- とりあえず、デモアプリをリンター等無しのシンプルな構成で。

$ npm init svelte@latest .

create-svelte version 3.0.4

Welcome to SvelteKit!

√ Where should we create your project?
  (leave blank to use current directory) ...
√ Directory not empty. Continue? ... yes
√ Which Svelte app template? » SvelteKit demo app
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Playwright for browser testing? ... No / Yes
√ Add Vitest for unit testing? ... No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: npm install (or pnpm install, etc)
  2: git init && git add -A && git commit -m "Initial commit" (optional)
  3: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

出来上がったら依存関係をインストールして実行してみる

npm install を実行
npm run dev を実行

キーボード q を押して quit したら GitHub リポジトリに push

SvelteKit の Cloudflare Pages 向けアダプタをインストール

先述の公式ガイドの通り実施しただけ。

Svelte 側のドキュメントにもアダプタの説明とインストール方法が書かれていた。こういう協力できてる感じなんか良いよね。

アダプタを npm install --save-dev @sveltejs/adapter-cloudflare でインストール
svelte.config.js でアダプタを指定

環境変数を使うつもりは無いので型サポートは特にしない。使うときは app.d.ts の interface PlatForm に書くようにとのこと。

Cloudflare Pages にデプロイ

GitHub と連携させて、Cloudflare Pages プロジェクトと GitHub リポジトリを紐づける。

「Git に接続」で GitHub アカウントを連携
さっき作ったリポジトリを選択
デプロイするブランチを選択
- main しか用意してないから main
フレームワークプリセットで SvelteKit を選択
環境変数に NODE_VERSION = 16 を設定
- ビルド時に使われる
「保存してデプロイする」をクリック

この辺で node バージョンを見直したので main に push したら自動デプロイされるのを見れた。怪我の功名。

出来上がるまで待ちまして......。

デプロイされたサイトにアクセス

特にドメインは割り付けないので Project の詳細開いて「ドメイン: xxx」の xxx をクリックすればいい

デモアプリはそのまま動いていた、簡単かよ。

えっつ

Hello, World チックなことでした作業をまとめとこう

GitHub リポジトリで Svelte(Kit) アプリを作成
Cloudflare Pages プロジェクト作成
Cloudflare Pages プロジェクトから GitHub リポジトリでデプロイ
問題が有ればデプロイ設定を見直したり、アプリを見直したりする

3 の時に下記を設定する。

フレームワークプリセットを SvelteKit で設定
- ディレクトリ等々自動入力される
ビルド時に node バージョン指定する為、環境変数 NODE_VERSION を 16 で設定
- Cloudflare Pages と SvelteKit の双方でサポートされる node バージョンで最新
自動デプロイで push を監視するブランチを設定

デプロイ方法はわかったので Next step は「段取り」だな。

えっつ

ConoHa で取得したドメインを Cloudflare に移行できるっぽいが、Free プランの制約をよく見てからってのと個人ブログの制作をスタートしてからだなぁ

えっつ

今、作りたいものは「給与計算・買い物管理アプリ」と「個人ブログ」になる。これの段取りを暇な時間と土曜日使って立てていく。

これを Cloudflare の無料枠でうまく作ることを検討。有料はもっと使いたくなってから。今はお試しなので。

2 作品をとりあえずできたぜレベルまで作れば、流石に永住したいかどうかわかると思う。

えっつ

開発サイクルは自動デプロイが有るし、GitHub 使った開発をしていれば良いだけと思う。

Cloudflare Workers は自動デプロイはないが、Wrangler という CLI ツールで Cloudflare Workers プロジェクトを作ったり更新したりできそうな雰囲気なので、特にやり方は変えず。自動化はしたければする。
ローカルで開発できる仕組みがちゃんとあるので、落ち着いて安心して開発できるね。

えっつ

20230302

代休なので、脱線して日付ライブラリ試して所感載せるところを作ってみよう。

えっつ

日付ライブラリ試すところというか、試した所感を載せるサイトを用意する、までとした。

SvelteKit のルーティングや環境変数など基本を学んだ。

その後、所感を載せる為にある程度同じ内容を別ライブラリで書きたい！と思った。そこで Newt を使ってみることにした。Newt はヘッドレス CMS である。

https://www.newt.so/

ブログの足掛かりになるのもあったので利用は確定。SDK が有ったので結構楽に実装できた。TypeScript の型定義もちゃんと使えるのでありがたい。

Newt のチュートリアルはフレームワークやホスティングサービスに対応して掲載されていて結構助かった。チュートリアルやガイドはそれぞれのサービスで掲載されていると、微妙に足りない部分が補えることもあるのでうれしい。

それで、ある程度作って Newt 利用した形になった。しかしながら、ローカルでは動くものの、Cloudflare Pages 上では 500 Internal Server Error となる。

えっつ

上記、解消できていなくて、環境変数かなと思い込んで原因探したけど見つからず。
環境変数を直打ちしたけど状況変わらずだったので原因が違うみたい。

依存関係でも見直すか。

と思ったけど、一気に作ったからわからんのではということで、機能ごとにコメントアウトしていってみる方が早そう。