Cloudflare PagesとPython APIを連携！Jamstack構成でWebアプリを公開する手順

1. はじめに｜Cloudflare Pages × Python APIって何ができるの？

こんにちは！この記事では、Cloudflare PagesとPython APIを組み合わせて、最新のWebアプリを公開する方法をご紹介します。

最近よく聞く「Jamstack（ジャムスタック）」って言葉、知っていますか？これは、フロントエンド（見た目）を静的サイトで、バックエンド（中身の処理）をAPIで作るという新しいWeb開発の考え方なんです。

たとえば…

• WebページはCloudflare Pagesで超高速に配信！
• データの保存や計算などの裏側処理はPythonで作ったAPIにおまかせ！

というふうに、「表示」と「処理」をきれいに分けて動かせるのがJamstack構成のポイントです。

---

🔧こんな人におすすめ！

• PythonでAPI（裏側のプログラム）を作ったけど、公開方法がよくわからない…
• Cloudflare Pagesってよく聞くけど、どう使えばいいの？
• ReactやHTMLでフロントを作ったあと、バックエンドをPythonで連携したい！

---

🌟この記事でわかること

この記事では、次のようなことをステップごとにやさしく解説していきます！

• Cloudflare Pagesの基本とメリット
• PythonでAPIを作る方法（FastAPIを使います）
• 静的サイトとAPIを組み合わせて公開する手順

---

「サーバーを持たずにWebアプリを作りたい！」「Pythonで書いたコードをそのままWebに活かしたい！」
そんな方にぴったりの内容です。

それでは、Cloudflare Pages × Python APIの世界へ、いっしょに一歩踏み出してみましょう！

---

2. Jamstackとは？構成の基本をおさらい

「Jamstack（ジャムスタック）」って言葉、ちょっとカッコいいけど、なんだか難しそうですよね。でも、仕組みは意外とシンプルなんです。

---

💡Jamstackって何の略？

Jamstackは、3つの要素の頭文字からできた言葉です。

• JavaScript：動きをつける言語（ReactやVueなど）
• API：外部のデータや処理を呼び出す仕組み（今回はPythonで作る！）
• Markup：HTMLなどの静的なページ

つまり、「フロントエンドは静的（HTML）で高速に配信し、裏側の処理はAPIで別に用意する」というスタイルなんです。

---

🚀Jamstack構成のメリット

なぜこの構成が人気なのか？理由はとても魅力的です。

メリット	内容
速い！	静的サイトはCDNで爆速配信されます
安全！	サーバーがないので攻撃されにくい
スケーラブル！	アクセスが増えても自動で対応できる
柔軟！	フロントとバックエンドを自由に組み合わせられる

---

🔧よくあるJamstackの例

たとえば、次のような構成が人気です：

• フロントエンド：Next.js（Reactベース）を使ってCloudflare Pagesにホスティング
• バックエンド：FastAPI（Python）でAPIを用意し、Cloudflare Workersや他のサーバレス環境で公開

こんなふうに「見た目」と「処理」を分けて構築することで、モダンでメンテしやすいアプリが作れるんですね。

---

3. Cloudflare Pagesとは？無料で使える高速ホスティング

さて、ここからはJamstack構成の「見た目」部分、つまり静的サイトのホスティングを担う「Cloudflare Pages（クラウドフレア・ページズ）」について見ていきましょう。

---

🌀Cloudflare Pagesってなに？

Cloudflare Pagesは、静的なWebサイトをGitHubと連携して自動で公開できるサービスです。しかも無料プランでも十分すぎる機能が使えるので、個人開発や学習用途にもピッタリ！

できることはこんな感じ：

• GitHubにプッシュしたら自動でデプロイされる
• 世界中のCloudflare CDNから超高速で配信
• カスタムドメイン・SSL対応も無料！

---

🌟Cloudflare Pagesのメリットまとめ

特徴	内容
無料で始められる	個人開発や学習にも最適
GitHub連携が超かんたん	コードをpushするだけで公開できる
CDNで高速配信	世界中にキャッシュされてアクセスが速い
FunctionsでサーバレスAPIも使える	Node.jsベースの簡単なAPI処理ならこれでOK！

---

📂静的サイトってどんなもの？

静的サイトというのは、HTML・CSS・JavaScriptなどがすでに完成した状態のファイルです。Cloudflare Pagesでは、こういったファイルをまるごとアップロードするだけで公開できます。

たとえば…

• ReactやVueなどのフレームワークでビルドしたページ
• PelicanやHugoなどの静的ブログジェネレーターで作ったサイト
• 純粋なHTML/CSSの手書きサイト

これらすべてがCloudflare Pagesに対応しています！

---

🤔でも、Pythonのバックエンドはどうするの？

ここがポイント。Cloudflare Pagesは「静的サイト専用」なので、Pythonのようなサーバーサイドの処理はそのままでは動かせません。

じゃあどうするか？
答えは次のセクションで詳しく紹介しますが、Python APIを別の場所にホスティングして、それをフロントから呼び出すというスタイルにするんです。

---

4. PythonでAPIを作る｜FastAPIを例に解説

さて、ここからは「バックエンド」側のお話です。
Cloudflare Pagesで公開する静的なフロントエンドと連携するために、PythonでAPIを作っておく必要があります。

ここでは、近年大人気のフレームワーク「FastAPI（ファストエーピーアイ）」を使って、かんたんなAPIを作ってみましょう！

---

🐍FastAPIってなに？

FastAPIは、PythonでAPIを高速に作れる軽量フレームワークです。次のような特徴があります：

• 書き方がシンプルで初心者でもわかりやすい！
• 自動でAPIドキュメント（Swagger UI）を作ってくれる！
• 実行がめちゃくちゃ速い！

PythonでAPIを作るなら、まずこれを使っておけば間違いなしです。

---

🛠️準備するもの

まずは環境を用意しましょう。次の手順でOKです：

# 仮想環境の作成（任意）
python -m venv venv
source venv/bin/activate  # Windowsなら venv\Scripts\activate

# 必要なパッケージのインストール
pip install fastapi uvicorn

---

📦最小構成のAPIコードを書いてみよう

次に、main.py という名前で以下のようなコードを作ってみましょう。

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "こんにちは！FastAPIが動いています！"}

@app.get("/greet/{name}")
def greet(name: str):
    return {"message": f"こんにちは、{name}さん！"}

---

🚀ローカルで起動してみよう

APIを実行するには、以下のコマンドを使います：

uvicorn main:app --reload

起動したら、ブラウザで次のURLにアクセスしてみましょう：

• http://localhost:8000 → トップページ
• http://localhost:8000/greet/Taro → 「こんにちは、Taroさん！」と返してくれる！

---

🌐Swagger UIでAPIを試せる！

FastAPIは、http://localhost:8000/docs にアクセスすると、自動生成されたAPIドキュメント（Swagger UI）が表示されます。ここでAPIを直接試すこともできますよ！

---

5. Python APIをCloudflare Workersにデプロイする手順

前のセクションで作成したPythonのFastAPI。ローカルではバッチリ動きましたね！
でも、Webアプリとして誰でもアクセスできるようにするには「どこかに公開」する必要があります。

ここでは、Cloudflareが提供する**サーバーレス実行環境「Cloudflare Workers」**を使って、PythonのAPIを動かす方法を解説します。

---

😥 でもちょっと待って！Cloudflare WorkersってPython動くの？

正直に言うと、Cloudflare Workersは**Node.jsやWebAssembly（WASM）**ベースの環境なので、そのままPythonを動かすことはできません。

ですが、以下の方法でPython APIを「擬似的に」クラウドに公開することができます：

---

✅ Python API公開の3つの選択肢（Cloudflare Pagesと相性◎）

方法	説明	難易度
① Fly.ioやRenderでFastAPIをホスト	Pythonがそのまま動くクラウドにデプロイ	⭐⭐
② Cloudflare WorkersにHTTP経由でリバースプロキシ	WorkersでAPIを中継する	⭐⭐⭐
③ WASM化されたPython実行環境を使う	pyodideやmicropythonでJS上でPython実行	⭐⭐⭐⭐

ここでは、一番現実的でかんたんな「①FastAPIを別クラウドにデプロイ」してから「Cloudflare Pagesのフロントエンドとつなぐ」方法を紹介します！

---

🚀ステップ1：Render.comでFastAPIを公開しよう

1. GitHubにFastAPIのコードをアップ

1. GitHubに新しいリポジトリを作成
2. main.py や requirements.txt をpush

# requirements.txt
fastapi
uvicorn

2. Renderで新しいWebサービスを作成

1. https://render.com/ にアクセスして無料アカウント作成
2. Dashboard → 「New Web Service」→ GitHubを選んでリポジトリを選択
3. 設定値は以下を参考に：

項目	値
Runtime	Python
Build Command	pip install -r requirements.txt
Start Command	uvicorn main:app --host 0.0.0.0 --port 10000
Environment	Web Service
Region	Singapore（日本から近い）

3. 数分待つと、自動でAPIが公開されるURLが発行されます！

例：

https://my-fastapi-app.onrender.com/greet/Taro

これで、外部からもアクセスできる「公開されたPython API」が完成しました！

---

🔗ステップ2：Cloudflare Pagesの静的フロントと連携

Cloudflare Pages側のJavaScriptやHTMLから、このAPIを呼び出せばOKです。

例（JavaScript）：

fetch("https://my-fastapi-app.onrender.com/greet/Taro")
  .then(res => res.json())
  .then(data => console.log(data.message));

---

6. Cloudflare PagesとAPIを統合する

ここまでで、Cloudflare Pagesで静的なフロントエンドができて、Pythonで作ったAPIもクラウドに公開できました！

あとは、この2つを組み合わせて、ユーザーが操作するとAPIが動き、結果が表示されるようにすれば、JamstackなWebアプリの完成です！

---

🎨ステップ1：フロントエンドを作成しよう

まずは、Cloudflare Pagesにアップする**静的Webページ（HTML/JS）**を作成します。ここでは、APIと連携するシンプルなHTMLを例にしてみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Python API連携アプリ</title>
</head>
<body>
  <h1>Python APIと連携しよう！</h1>
  <input type="text" id="name" placeholder="名前を入力してね" />
  <button onclick="callAPI()">あいさつする</button>
  <p id="result"></p>

  <script>
    async function callAPI() {
      const name = document.getElementById('name').value;
      const response = await fetch(`https://your-fastapi-app.onrender.com/greet/${name}`);
      const data = await response.json();
      document.getElementById('result').textContent = data.message;
    }
  </script>
</body>
</html>

---

📦ステップ2：Cloudflare Pagesにデプロイ

このHTMLをGitHubにpushし、Cloudflare Pagesに連携させます。

手順：

1. GitHubで新しいリポジトリを作成（例：python-api-frontend）
2. index.html をルートに置く
3. Cloudflare Pagesにログイン → 「Create a Project」
4. GitHubのリポジトリを選ぶ
5. ビルド設定は次のように：

項目	値
Framework Preset	None
Build command	（空欄）
Output folder	/ または .

これで、Cloudflare Pagesで静的ページがデプロイされます！
例：

https://python-api-frontend.pages.dev/

---

🔗ステップ3：APIとつなげて動作確認！

Cloudflare Pagesに公開されたページで、名前を入力しボタンを押すと、FastAPIで作ったAPIが呼ばれて結果が表示されるようになります！

---

🔐ステップ4：環境変数やAPIの保護（補足）

本番環境では以下のポイントにも注意しましょう。

• APIキーが必要な場合は Cloudflare Pagesの環境変数機能を使う
• レート制限や認証を導入して、APIの濫用を防止
• CORS設定をFastAPI側で調整（fastapi.middleware.cors）

例：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://your-pages.pages.dev"],
    allow_methods=["*"],
    allow_headers=["*"],
)

---

7. 公開と動作確認｜デプロイ後のチェックポイント

ついに！Cloudflare Pagesで静的なフロントエンドを公開し、Pythonで作ったAPIとも連携できるようになりました。

ここでは、「**きちんと動いているか？」「本番運用で問題が起きないか？」」をチェックするためのポイントをまとめておきます！

---

✅1. 公開URLの確認

まずは、Cloudflare Pagesで発行されたURLを開いてみましょう。

例：

https://your-frontend-project.pages.dev/

画面がちゃんと表示されているか、ボタンなどの操作ができるか確認します。

---

✅2. APIとの通信ができているか確認

フォームやボタンを使ってAPIにリクエストを送り、結果が表示されるかどうかを確認します。

例：

• 名前を入力 → 「こんにちは、◯◯さん！」と表示されたらOK！
• ネットワークタブ（開発者ツール）でfetchリクエストが成功しているか確認

---

✅3. API側でエラーが出ていないか？

RenderやFly.ioなど、APIをホスティングしているプラットフォームの管理画面でログを確認しましょう。

• 404や500エラーが出ていないか？
• CORSエラーで止まっていないか？

---

✅4. CORS（クロスオリジン）の確認

ブラウザからAPIを呼び出すとき、「CORS」というセキュリティ設定に引っかかって失敗することがあります。

FastAPI側で、以下のようなCORS設定が入っているか確認しましょう：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://your-frontend-project.pages.dev"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

---

✅5. モバイル・別ブラウザでも確認しよう

PCだけでなく、スマホや別のブラウザでも表示・操作できるか確認することで、ユーザー目線の不具合を減らせます。

• スマホ表示が崩れていないか？
• 入力やボタン操作がスムーズに動くか？

---

✅6. キャッシュやHTTPS設定もチェック

Cloudflare Pagesは自動でHTTPS（SSL）に対応しますが、初回デプロイ後すぐはHTTPリダイレクトが効かない場合もあります。

• https:// で始まるURLでアクセスできるか？
• APIや画像などもHTTPS経由で読み込まれているか？

---

✅7. 予期しない入力にも強いか？（バリデーション）

予想外の入力（空欄、記号だけ、大量の文字など）でも、APIが落ちないようにチェック！

例：

@app.get("/greet/{name}")
def greet(name: str):
    if not name or len(name) > 50:
        return {"message": "入力が正しくありません"}
    return {"message": f"こんにちは、{name}さん！"}

---

8. まとめ

ここまで、Cloudflare PagesとPython API（FastAPI）を連携して、Jamstack構成のWebアプリを作る流れを一緒に見てきました。

ふり返ってみると、こんなステップで構成できましたね！

---

✅今回やったことまとめ

ステップ	内容
1	Jamstackの考え方を理解
2	Cloudflare Pagesで静的なWebページを公開
3	Python（FastAPI）でAPIを作成
4	APIをRenderやFly.ioなどでクラウドにデプロイ
5	JavaScriptでAPIと連携し、動的なWebアプリに仕上げる
6	公開・動作確認・セキュリティチェックまでしっかり実施

---

🚀Jamstackで広がる開発の可能性

Jamstack構成にすることで、速く・安全で・拡張しやすいWebアプリを作ることができます。

• 小規模なプロジェクトや個人アプリ
• APIベースのSaaS
• ブログやポートフォリオ、業務ツールなど

Pythonを活かして、さまざまなサービスを軽量に実現できるのが魅力ですね！

---

🔄今後の展開アイデア

今回の構成をベースに、次のようなステップアップも可能です：

• ログイン機能を追加（OAuthやJWT連携）
• データベース（PostgreSQLなど）と接続して本格的なCRUDアプリ化
• Stripe APIなどと連携して、課金付きアプリにも！

---

🔗あわせて読みたい（関連リンク）

以下は、本記事と関連性が高く、内部リンクとしておすすめの既存記事です：

• 👉 Pelicanでブログを作ってCloudflare Pagesにデプロイする方法
  静的サイトホスティングの基本を学べる記事。Cloudflare Pages初心者に◎
• 👉 【初心者向け】FastAPIの基本の使い方を解説
  FastAPIをはじめて使う方にぴったりのチュートリアル
• 👉 Python初心者がFlaskでWebアプリを作る方法｜最小構成で始めるWeb開発
  Flaskとの違いや使い分けが気になる人にもおすすめ
• 👉 Pythonでできる自動化10選｜初心者向けにやさしく解説
  Jamstackと連携できる自動化スクリプトのヒントにも！

よくある質問（Q&A）