Cloudflare Pages Functionsを使ってみた

Cloudflare Pages Functionsとは？

Cloudflare静的ページホスティングサービスのPagesで使えるサーバーレスファンクションです。内部的にはCloudflare Workersが動くようです。

Functions | Cloudflare Pages

どういう感じで使うかというと、

1. 基本はSSG（静的サイトジェネレータ）で静的サイトを出力
2. リアルタイムな情報だけFunctionsにAPIを仕込んでJSでロード

という感じです。こうすることで、静的サイトでありながら動的な表示も可能になります。

静的ページと動的ページの良いとこ取りですね。夢が広がります。

Gridsomeでやってみる

今回はVue.jsベースの静的サイトジェネレータであるGridsomeで試してみます。

まず、プロジェクトを作成します。

gridsome create test-functions

cd test-functions

APIとなるスクリプトを用意する

Cloudflare Pages Functionsは、プロジェクト直下の「functions」ディレクトリ内のスクリプトを自動でWorkerとして認識して待機してくれるので、ファイルを用意します。

mkdir functions

touch functions/test.js

ちなみに、WorkersはTypescriptにも対応しているので、Typescriptでも書けます。

Functionsに書くスクリプトは、Workersと同じ独自のV8ベースのJavaScriptエンジンになります。

今回は、単純に外部APIからデータを拾って・返すだけのAPIを建ててみます。

// test.js


export async function onRequestGet({ params }) {
  const apiUrl = 'APIのURL';

  if(params.id !== undefined){
    const res = await fetch(apiUrl);
    const data = await res.json();
    return new Response(JSON.stringify(data));
  }
}

これだけだと、「普通にVue.jsのコードでfetchすりゃいいじゃん？」という感じなんですが、APIのURLを秘匿したい場合や、複数のAPIからのデータを統合したい時なんかに役立ちますね。

本来はCloudflare WorkersのNoSQLであるWorkers KVに保存したデータなんかを取り出すの使う前提のようです。

ちなみに、Cloudflareは、MySQLデータベースなどにCDNエッジから直接アクセスできる「Relational Database Connectors」というサービスをリリース予定なので、今後はAPIすら不要で、Functions（Workers）が本当にAPIになるかもしれません。

Gridsomeでロードする

APIが用意できたら、Gridsome側でロードします。

<template>
  <Layout>
    <div class="">
      <h1>{{article.title}}</h1>
      <p>{{article.description}}</p>
      <div v-html="article.text"></div>
    </div>
  </Layout>
</template>

<script>

export default {
  data: () => ({
    article: [],
  }),
  created(){
    if (!process.isClient) {
      return;
    }
    this.fetchData();
  },
  methods: {
    async fetchData(){
      this.article = await fetch('/test')
      .then(response => response.json())
    }
  }
}
</script>

こんな感じです。

大事なのは「!process.isClient」でクライアント以外では動作させないことです。そうしないとビルド時にエラーを吐きます（APIがないから当然ですね）。

テストする

APIはWorkersで動くなら開発時にテストできないのでは？と思いますが、CloudflareはwranglerというCLIツール内にローカル環境も用意してくれています。

npx wrangler pages dev -- gridsome develop

で、ライブ・プレビューが可能です。「–」のあとは好きなコマンドを入れることができるので、Gridsome以外でも使えます。

デプロイする

あとは本番環境にアップして完了です。ここはCloudflare Pagesの通常のやり方と一緒なので省略します。

アップされたプロジェクトをみると、普通にAPI経由でデータをとってきていることがわかります。

といういうことで、ざっくりとですが、Cloudflare Pages Functionsを使ってみたのでまとめました。

アイデア次第で静的サイトの表現力がグッと上がること間違いなしですね。