はじめに
表題通り、Cloudflare上にRemixをデプロイする方法を紹介します
Cloudflareの公式サイトが提供しているデプロイ方法を参考に作っていきます
hands-onスタート
今回はRemixにCloudflareをデプロイするだけなので、コマンド一発です。
実行
~/develop/cloudflare-remix (HEAD)$ npm create cloudflare@latest . --framework=remix --platform=pages
> npx
> create-cloudflare .
───────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.45.3!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.
Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
───────────────────────────────────────────────────────────────────────────────────────────────────
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./.
│
├ What would you like to start with?
│ category Hello World example
│
├ Which template would you like to use?
│ type SSR / full-stack app
│
├ Which language do you want to use?
│ lang TypeScript
│
├ Copying template files
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created
╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-04-29
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploy via `npm run deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account [YOUR_EMAIL]'s Account
│
> cloudflare-remix@0.0.0 deploy
> wrangler deploy
⛅️ wrangler 4.13.2
-------------------
🌀 Building list of assets...
✨ Read 1 file from the assets directory /Users/[YOUR_USERNAME]/develop/cloudflare-remix/public
🌀 Starting asset upload...
🌀 Found 1 new or modified static asset to upload. Proceeding with upload...
+ /index.html
Uploaded 1 of 1 assets
✨ Success! Uploaded 1 file (1.05 sec)
Total Upload: 20.79 KiB / gzip: 4.98 KiB
Worker Startup Time: 13 ms
Your worker has access to the following bindings:
- Assets:
- Binding: ASSETS
Uploaded cloudflare-remix (6.76 sec)
Deployed cloudflare-remix triggers (1.47 sec)
https://cloudflare-remix.[YOUR_SUBDOMAIN].workers.dev
Current Version ID: c784796c-20c6-4345-adcf-e2961c5aa781
├ Waiting for DNS to propagate. This might take a few minutes.
│ DNS propagation complete.
│
├ Waiting for deployment to become available
│ deployment is ready at: https://cloudflare-remix.[YOUR_SUBDOMAIN].workers.dev
│
├ Opening browser
│
╰ Done
──────────────────────────────────────────────────────────────────────────────────────
🎉 SUCCESS Application deployed successfully!
🔍 View Project
Visit: https://cloudflare-remix.[YOUR_SUBDOMAIN].workers.dev
Dash: https://dash.cloudflare.com/?to=/:account/workers/services/view/cloudflare-remix
💻 Continue Developing
Start dev server: npm run start
Deploy again: npm run deploy
📖 Explore Documentation
https://developers.cloudflare.com/workers
🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose
💬 Join our Community
https://discord.cloudflare.com
──────────────────────────────────────────────────────────────────────────────────────
→実行後URLが発行されるので、デプロイ完了済みです！
成果物
