コンテンツにスキップ

REST API

Pages APIは、あなたが自動化を構築し、Pagesを開発ワークフローに統合することを可能にします。高レベルでは、APIエンドポイントを使用してデプロイメントやビルドを管理し、プロジェクトを構成できます。Cloudflareは、ヘッドレスCMSデプロイメントのためにDeploy Hooksをサポートしています。オブジェクトタイプやエンドポイントの詳細については、APIドキュメント ↗を参照してください。

APIの使用方法

APIトークンの取得

APIトークンを作成するには：

  1. Cloudflareダッシュボード ↗にログインします。
  2. ダッシュボードの右上にあるユーザーアイコンを選択 > My Profile。
  3. API Tokens ↗ > Create Tokenを選択します。
  4. Edit Cloudflare Workersテンプレートに移動してUse templateを選択するか、Create Custom Token > Get startedに進みます。カスタムトークンを作成する場合は、Cloudflare Pagesの権限をEditアクセスで追加する必要があります。

リクエストの送信

トークンを作成した後、リクエストヘッダーにAPIトークンを使用してAPIに認証し、リクエストを送信できます。例えば、プロジェクト内のすべてのデプロイメントを取得するAPIリクエストは以下の通りです。

Terminal window
curl 'https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments' \
--header 'Authorization: Bearer <API_TOKEN>'

{account_id}、{project_name}、<API_TOKEN>を置き換えて、あなたのプロジェクトで試してみてください。詳細については、Find your account IDを参照してください。

例

APIはCloudflare Workersと組み合わせることでさらに強力になります。Cloudflareのグローバルネットワーク上でサーバーレス関数をデプロイする最も簡単な方法です。以下のセクションでは、Pages APIの使用方法に関する3つのコード例を示します。これらのサンプルを構築してデプロイするには、Get started guideを参照してください。

毎時新しいビルドをトリガーする

ライブソースからデータを取得して静的出力をコンパイルするCMSがあると仮定します。APIを使用して定期的に新しいビルドをトリガーすることで、静的コンテンツをできるだけ新しく保つことができます。

const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";


export default {
  async scheduled(_, env) {
    const init = {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
        // APIトークンは、Workersダッシュボードを使用するか、ここに記載されているようにWranglerを使用して秘密として保存することをお勧めします: https://developers.cloudflare.com/workers/wrangler/commands/#secret
        "Authorization": `Bearer ${env.API_TOKEN}`,
      },
    };


    await fetch(endpoint, init);
  }
}

JavaScript Workerをデプロイした後、このスクリプトを定期的に実行するためにWorker内にcronトリガーを設定します。詳細については、Cron Triggersを参照してください。

1週間後に古いデプロイメントを削除する

Cloudflare Pagesは、すべてのプロジェクトデプロイメントをプレビューリンクでホストおよび提供します。プロジェクトをプライベートに保ち、古いデプロイメントへのアクセスを防ぎたいと仮定します。APIを使用して、デプロイメントを1か月後に削除することで、オンラインで公開されなくなります。ブランチの最新デプロイメントは削除できません。

const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const expirationDays = 7;


export default {
  async scheduled(_, env) {
    const init = {
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
        // APIトークンは、Workersダッシュボードを使用するか、ここに記載されているようにWranglerを使用して秘密として保存することをお勧めします: https://developers.cloudflare.com/workers/wrangler/commands/#secret
        "Authorization": `Bearer ${env.API_TOKEN}`,
      },
    };


    const response = await fetch(endpoint, init);
    const deployments = await response.json();


    for (const deployment of deployments.result) {
      // デプロイメントが上記の`expirationDays`で定義されたx日以内に作成されたかどうかを確認します
      if ((Date.now() - new Date(deployment.created_on)) / 86400000 > expirationDays) {
        // デプロイメントを削除します
        await fetch(`${endpoint}/${deployment.id}`, {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "Authorization": `Bearer ${env.API_TOKEN}`,
          },
        });
      }
    }
  }
}

JavaScript Workerをデプロイした後、このスクリプトを定期的に実行するためにWorker内にcronトリガーを設定できます。詳細については、Cron Triggers guideを参照してください。

プロジェクト情報の共有

あなたがPagesを使用してウェブサイトを構築する開発チームで作業していると想像してください。デプロイメントプレビューリンクやビルドステータスをCloudflareアカウントを共有せずに簡単に共有したいと思うでしょう。APIを使用することで、デプロイメントステータスやプレビューリンクを含むプロジェクト情報を簡単に共有し、このコンテンツをCloudflare WorkerからHTMLとして提供できます。

const deploymentsEndpoint =
  "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const projectEndpoint =
  "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}";


export default {
  async fetch(request, env) {
    const init = {
      headers: {
        "content-type": "application/json;charset=UTF-8",
        // APIトークンは、Workersダッシュボードを使用するか、ここに記載されているようにWranglerを使用して秘密として保存することをお勧めします: https://developers.cloudflare.com/workers/wrangler/commands/#secret
        "Authorization": `Bearer ${env.API_TOKEN}`,
      },
    };


    const style = `body { padding: 6em; font-family: sans-serif; } h1 { color: #f6821f }`;
    let content = "<h2>Project</h2>";


    let response = await fetch(projectEndpoint, init);
    const projectResponse = await response.json();
    content += `<p>Project Name: ${projectResponse.result.name}</p>`;
    content += `<p>Project ID: ${projectResponse.result.id}</p>`;
    content += `<p>Pages Subdomain: ${projectResponse.result.subdomain}</p>`;
    content += `<p>Domains: ${projectResponse.result.domains}</p>`;
    content += `<a href="${projectResponse.result.canonical_deployment.url}"><p>Latest preview: ${projectResponse.result.canonical_deployment.url}</p></a>`;


    content += `<h2>Deployments</h2>`;
    response = await fetch(deploymentsEndpoint, init);
    const deploymentsResponse = await response.json();


    for (const deployment of deploymentsResponse.result) {
      content += `<a href="${deployment.url}"><p>Deployment: ${deployment.id}</p></a>`;
    }


    let html = `
      <!DOCTYPE html>
      <head>
        <title>Example Pages Project</title>
      </head>
      <body>
        <style>${style}</style>
        <div id="container">
          ${content}
        </div>
      </body>`;


    return new Response(html, {
      headers: {
        "Content-Type": "text/html;charset=UTF-8",
      },
    });
  }
}

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings