[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"post-create-cloudflare-cli-c3":3},{"id":4,"title":5,"body":6,"date":302,"description":303,"extension":304,"meta":305,"navigation":310,"path":311,"seo":312,"stem":313,"__hash__":314},"blog\u002Fblog\u002Fcreate-cloudflare-cli-c3.md","create-cloudflare(C3)でHonoアプリをデプロイする",{"type":7,"value":8,"toc":291},"minimark",[9,14,25,31,47,51,54,80,83,116,119,122,125,150,156,160,164,167,232,236,255,258,261,264,284,287],[10,11,13],"h2",{"id":12},"c3とは","C3とは",[15,16,17,24],"p",{},[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fdevelopers.cloudflare.com\u002Fpages\u002Fget-started\u002Fc3\u002F",[22],"nofollow","create-cloudflare(C3)","は、Cloudflare公式のプロジェクト作成CLIツールです。",[15,26,27],{},[28,29,30],"strong",{},"主な特徴",[32,33,34,38,41,44],"ul",{},[35,36,37],"li",{},"対話形式でプロジェクトをセットアップ",[35,39,40],{},"Hono、Nuxt、React、Vue、Svelteなど主要フレームワークをサポート",[35,42,43],{},"GitHub連携による自動デプロイに対応",[35,45,46],{},"Cloudflare WorkersまたはPagesにすぐにデプロイ可能",[10,48,50],{"id":49},"honoプロジェクトのセットアップ","Honoプロジェクトのセットアップ",[15,52,53],{},"C3を使ってHonoプロジェクトを作成します。",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-shell shiki shiki-themes github-light github-dark","npm create cloudflare@latest\n","shell","",[62,63,64],"code",{"__ignoreMap":60},[65,66,69,73,77],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sScJk","npm",[65,74,76],{"class":75},"sZZnC"," create",[65,78,79],{"class":75}," cloudflare@latest\n",[15,81,82],{},"対話形式で以下の質問に答えます。",[84,85,86,92,98,104,110],"ol",{},[35,87,88,91],{},[28,89,90],{},"ディレクトリ名",": プロジェクトの作成先",[35,93,94,97],{},[28,95,96],{},"アプリケーションタイプ",": \"Website or web app\" を選択",[35,99,100,103],{},[28,101,102],{},"フレームワーク",": \"Hono\" を選択",[35,105,106,109],{},[28,107,108],{},"Gitバージョン管理",": \"yes\" を選択",[35,111,112,115],{},[28,113,114],{},"デプロイ",": GitHub連携を使うため \"no\" を選択",[15,117,118],{},"これだけでHonoプロジェクトのセットアップが完了します。",[10,120,121],{"id":121},"ローカルでの動作確認",[15,123,124],{},"開発サーバーを起動して動作を確認します。",[55,126,128],{"className":57,"code":127,"language":59,"meta":60,"style":60},"cd hono-cloudflare-c3-sample\nnpm run dev\n",[62,129,130,139],{"__ignoreMap":60},[65,131,132,136],{"class":67,"line":68},[65,133,135],{"class":134},"sj4cs","cd",[65,137,138],{"class":75}," hono-cloudflare-c3-sample\n",[65,140,142,144,147],{"class":67,"line":141},2,[65,143,72],{"class":71},[65,145,146],{"class":75}," run",[65,148,149],{"class":75}," dev\n",[15,151,152,155],{},[62,153,154],{},"http:\u002F\u002Flocalhost:8787"," にアクセスすると、Hello World! が表示されます。",[10,157,159],{"id":158},"github連携によるデプロイ","GitHub連携によるデプロイ",[161,162,163],"h3",{"id":163},"リポジトリへのプッシュ",[15,165,166],{},"作成したプロジェクトをGitHubにプッシュします。",[55,168,170],{"className":57,"code":169,"language":59,"meta":60,"style":60},"git remote add origin https:\u002F\u002Fgithub.com\u002F\u003Cusername>\u002F\u003Crepository>\ngit push -u origin main\n",[62,171,172,217],{"__ignoreMap":60},[65,173,174,177,180,183,186,189,193,196,200,203,206,208,211,214],{"class":67,"line":68},[65,175,176],{"class":71},"git",[65,178,179],{"class":75}," remote",[65,181,182],{"class":75}," add",[65,184,185],{"class":75}," origin",[65,187,188],{"class":75}," https:\u002F\u002Fgithub.com\u002F",[65,190,192],{"class":191},"szBVR","\u003C",[65,194,195],{"class":75},"usernam",[65,197,199],{"class":198},"sVt8B","e",[65,201,202],{"class":191},">",[65,204,205],{"class":75},"\u002F",[65,207,192],{"class":191},[65,209,210],{"class":75},"repositor",[65,212,213],{"class":198},"y",[65,215,216],{"class":191},">\n",[65,218,219,221,224,227,229],{"class":67,"line":141},[65,220,176],{"class":71},[65,222,223],{"class":75}," push",[65,225,226],{"class":134}," -u",[65,228,185],{"class":75},[65,230,231],{"class":75}," main\n",[161,233,235],{"id":234},"cloudflare-pagesでの設定","Cloudflare Pagesでの設定",[84,237,238,246,249,252],{},[35,239,240,245],{},[18,241,244],{"href":242,"rel":243},"https:\u002F\u002Fdash.cloudflare.com\u002F",[22],"Cloudflare Pagesダッシュボード","にアクセス",[35,247,248],{},"\"Workers & Pages\" → \"Create application\" → \"Pages\" → \"Connect to Git\"",[35,250,251],{},"GitHubリポジトリを選択",[35,253,254],{},"ビルド設定はC3が自動で設定済みなので、そのままデプロイ",[15,256,257],{},"これでGitHubへのプッシュのたびに自動デプロイされるようになります。",[10,259,260],{"id":260},"まとめ",[15,262,263],{},"C3を使うことで、以下のメリットがあります。",[32,265,266,272,278],{},[35,267,268,271],{},[28,269,270],{},"セットアップが簡単"," 対話形式で必要な設定を自動生成",[35,273,274,277],{},[28,275,276],{},"即座にデプロイ可能"," Wranglerの設定がすでに完了",[35,279,280,283],{},[28,281,282],{},"CI\u002FCD対応"," GitHub連携で自動デプロイを実現",[15,285,286],{},"Cloudflare WorkersでHonoアプリを試したい方におすすめのツールです。",[288,289,290],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":60,"searchDepth":141,"depth":141,"links":292},[293,294,295,296,301],{"id":12,"depth":141,"text":13},{"id":49,"depth":141,"text":50},{"id":121,"depth":141,"text":121},{"id":158,"depth":141,"text":159,"children":297},[298,300],{"id":163,"depth":299,"text":163},3,{"id":234,"depth":299,"text":235},{"id":260,"depth":141,"text":260},"2023-12-27","Cloudflareの公式CLIツールC3を使って、HonoアプリケーションをCloudflare Workersにセットアップ・デプロイする手順を解説します。","md",{"tags":306},[307,308,309],"cloudflare","hono","deployment",true,"\u002Fblog\u002Fcreate-cloudflare-cli-c3",{"title":5,"description":303},"blog\u002Fcreate-cloudflare-cli-c3","AsgPViDDV5wJAqHwlMA1GqIwEIX6PGI7dpnZwRTmjjI",1773664053929]