Bolt.new → Cursor → Cloudflare Pages へ静的サイトをデプロイ

Bolt.new → Cursor → Cloudflare Pages へ 静的サイトをデプロイ 2025/01/14 篠⽥ 敬廣

株式会社 Waalsforce 代表 篠⽥ 敬廣 ⽣成AIエンジニア ⼤⼿SIer向けにDX推進、業務効率化、MS Copilotの導⼊⽀援 AIDDでの受託開発：Dify、システム開発、Kamui（⼀部機能） 前職はSIerでインフラ/セキュリティのプロジェクトマネージャー X：@yukkie1114

⽬次 Bolt.new → 静的サイトのデプロイ なぜBoltでデプロイしないのか Cloudfuraとは CloudfuraのAIサービス Workers AI

⽬次 Bolt.new → 静的サイトのデプロイ なぜBoltでデプロイしないのか Cloudfuraとは CloudfuraのAIサービス Workers AI

留意事項 前提でv0→Cursor→Cloudflare Pagesで⾃社HPを作ったのですが それをBolt.newでも再現したものです note（ノート） v0×Cursor×Cloudfurea PagesでWebサイトをホスティング｜Shinoda はじめに v0→Cursor→Github→Cloudfurea Pagesで⾃社のHPを作成しなおしました モチ ベーションとしては以前 Google Sitesでとりあえず作った会社HPの使い勝⼿（メンテナ… このショアデは後ほど公開します ⼀部 駆け⾜になる部分があるので後ほど⾒て頂けたら幸いです

• https://note.com/yukkie1114/n/n71575813ca44

Bolt.new → 静的サイトのデプロイ なぜBoltでデプロイしなかったのか Cloudfuraとは CloudfuraのAIサービス Workers AI

ヅフルアまでの流れ 1 2 3 4 Bolt.newで⼤枠を作成 StackblitzからGithubヨホザ Githubヨホザテヨをキルヺヱ してCursorで編集 Githubを連携してCursorから Cloudflare Pagesへ テヨ作成 ヅフルア

Bolt.newで⼤枠を作成

StackblitzからGithubヨホザテヨ作成 1 StackblitzからGithubヨホザテヨを作成 2 Github上にヨホザテヨが作成される

GithubリポジトリをクローンしてCursorで編集 Cursor上でGithubリポジトリをクローン Cursorで編集 GithubへPush

Githubを連携してCursorからCloudflare Pagesへデプロイ CloudflareでGithub連携でデプロイ CI/CDでCursor上から継続的に開発とデプロイ

デプロイしたサイト

補⾜：Bolt.new で作ったサイトを⾃社ドメインにする場合 篠⽥が実施した⽅法 ドメインをCloudflareで取得 Cloudflare Pagesにデプロイする CloudflareのDNSサービスからhttps化（ワンクリック）

Bolt.new → 静的サイトのデプロイ なぜBoltでデプロイしなかったのか Cloudfuraとは CloudfuraのAIサービス Workers AI

なぜ Bolt 上でヅフルアしなかったのか ムタプヺサュヱ ⽇本のヅヺソスヱソヺ（ウチザ）にヅフルアしたい 安くコアテを運営したい（Cloudflare Pagesなら無料範囲内でおさめられる） AWSだと⽉200円くらいの試算 ⾮機能要件を充実させたい 可⽤性: サシツマの稼働率 ハビェヺボヱシ: 応答時間やシラヺフチテの⽬標値 シクヺョパヨツァ: サシツマが負荷増加に対応できる能⼒ スカャヨツァ: ヅヺソ暗号化、認証ヹ認可、監査ルギ 信頼性: 耐障害性 監視ヹ゠ョヺテ: サシツマの正常性ムドソヨヱギと異常検知。 ノチキ゠チフとヨシテ゠: ヅヺソの保護と迅速な復旧。 ケシテ効率: 運⽤ケシテの最適化と予測。

AI開発⽀援サービスの向き/不向き 中規模やエンタープライズはv0、Bolt、ReplitなどのAI開発⽀援 エンタープライズ 中規模 サービスでのデプロイは⾮現実的 →⾮機能要件の要件不⾜ 組織 ⼀⽅で個⼈や組織レベルなら有⽤ 個⼈ プロトタイプやモックなら有⽤

Bolt.new → 静的サイトのデプロイ なぜBoltでデプロイしなかったのか Cloudfuraとは CloudfuraのAIサービス Workers AI

Cloudfuraとは Cloudflareの理念は「より良いインターネットの構築を⽀援する」

Cloudflareをひと⾔で 「インターネットとセキュリティとネットワーク」の会社（個⼈の感想）

Cloudflareの特徴 ヨヺザュヱ指定が無く世界中のヅヺソスヱソヺ（ウチザ）にヅフルアされる msの距離 世界のアヱソヺニチテ⼈⼝の95％から50 世界のアヱソヺニチテテョビァチキの25％を担っている ⽶ビェヺタャヱ500で30％の企業が導⼊ 第3者機関から与えられた最⾼評価 1⽇当たりのコアノヺ攻撃ピルチキ数1,260億 スカャヨツァだけでなくコアテの⾼速化も実現できる ケヱツヱヂ配信量を減らし、アヱビョケシテ削減

主要サービス CDN（コンテンツ配信ネットワーク） コンテンツを最適化して⾼速配信。 DDoS攻撃対策 ⼤量トラフィック攻撃を防⽌。 WAF（Webアプリケーションファイアウォール） Webアプリへの攻撃を検出‧ブロック。 SSL/TLS暗号化 通信を暗号化しセキュリティを向上。 DNS管理 ⾼速かつ信頼性のあるドメイン管理。 : : : : : ボット管理: 悪意あるボットを排除。 負荷分散: サーバーの負荷を均等化。 画像最適化: 画像を圧縮しページ速度を向上。 キャッシュ管理: コンテンツをキャッシュして配信を⾼速化。 Cloudflare Workers サーバーレス環境でコードをグローバルに展開。 :

実は⾝近なCloudflare ChatGPTルギアヱ時のペチテ判定に組み込まれている

コロナワクチンのWaiting RoomはCloudflare PR TIMES Cloudflare、新型コロナワクチンの公平かつ効率的なデジタル待合室プロジェクト『Project Fair Shot』を発表 クラウドフレアジャパン株式会社のプレスリリース（2021年1⽉26⽇ 11時00分）Cloudflare、新型コロナワクチンの公平かつ効率的なデジタル待 合室プロジェクト『Project Fair Shot』を発表

• https://prtimes.jp/main/html/rd/p/000000004.000061678.html

Cloudflareとメガクラウド ⼀部サービスは競合する Cloudflareとメガクラウドは競合する部分もある 相乗効果 より効果的なサービス実現のためにはCloudflareとメガクラウド のいいとこ取りで使う Cloudflareはメガクラウドと対⽐するものではなくメガクラウド＋Cloudflareで 利⽤するのが理想的

Cloudflareは料⾦が安い 従量課⾦ではなく⽉額課⾦（⼀部例外あり） 無料範囲が広い ユーザー体験がいい 事例 1. 株式会社HIKKY 削減率: 約99% 移⾏内容: AWS CloudFront＋S3 → Cloudflare R2 ⽤途: 動画配信 2. クラスメソッド株式会社（Zenn） 削減額: ⽉額約10万円 → 数千円 移⾏内容: 他のクラウドCDNサービス → Cloudflare ⽤途: 技術ブログのセキュリティ強化（DDoS対策/WAF）

Cloudflare Pagesの値段とサイト測定 AWS：200円の想定 Cloudflare Pages：0円（あくまで篠⽥の利⽤想定） ※Cloudflareと同じサービスをAWSで再現する前提の場合 v0とPagesで公開したときのサイト測定を毸較（Google PageSpeed Insights） note（ノート） v0×Cursor×Cloudfurea PagesでWebサイトをホスティング｜Shinoda はじめに v0→Cursor→Github→Cloudfurea Pagesで⾃社のHPを作成しなおしました モチ ベーションとしては以前 Google Sitesでとりあえず作った会社HPの使い勝⼿（メンテナ…

• https://note.com/yukkie1114/n/n71575813ca44

まとめ Bolt.newでWebサイトの⼤枠を作るのは早い Bolt.newから作ったサイトを Github→Cursor→Cloudflare Pagesにデプロイできる 要件によってはBoltなどにデプロイするのではなく信頼性の⾼いクラウドへデプロイを Cloudflareは安価でセキュア

CloudflareのAIサービス

CloudflareのAIサービス Workers AI: グローバルなサーバーレス環境でAIモデルを実⾏。 3⼤LLM⾃体の提供はしていない（オープンLLMのみ） AI Gateway: 複数のAIプロバイダーへのアクセスを統合し、使⽤量やコストを⼀元管理。 Vectorize: ベクターデータを効率的に管理‧検索するベクターデータベース。 AI Audit: AIによるデータスクレイピングボットを検出‧ブロック。

AI Gateway フェイルオーバー機能: OpenAIなど特定のプロバイダーが停⽌した場合に⾃動的に別のプロバイダー（例: Anthropic）に切り替え可 能。 複数プロバイダー統合: 複数のAIプロバイダーを⼀元管理し、サービスの信頼性を確保。 優先順位設定: 優先するプロバイダーを指定し、応答がない場合に次のプロバイダーへリダイレクト。

AI Audit：AI スクレイピング対策 AIボット検出‧ブロック AIによるデータスクレイピングを検出し、無断利⽤を防⽌。 : リアルタイム監視: ボットのアクセス状況や頻度を可視化。 アクセス制御: 特定のAIボットを許可またはブロック可能。 権利保護: コンテンツ制作者の権利と価値を守る機能を提供。

Workers AI

Workers AI AIをエッジで実⾏ オープンLLM 世界中のデータセンターでAIを動かし、 LlamaやStable Diffusionなどの有名なAI モデルが利⽤可能（Open AIなどは提供 近い場所で素早く応答。 していない） 管理が不要 サーバー管理なしで、AIアプリをすぐに 作って使える。