remixとcloudflareを使ってみる

% npx create-remix@latest

Need to install the following packages:
  create-remix@latest
Ok to proceed? (y) y
💿 Welcome to Remix! Let's get you set up with a new project.

npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
? Where would you like to create your app? rc
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. 
Cloudflare Workers
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

終わるとこんな構成でファイル群が出来上がる

動かしてみる

yarn dev

localhost:8787にブラウザでアクセスすると

こんな感じで表示される

cloudflareの登録

cloudflare にアクセスしメールとパスワードで登録できます

デプロイ

cloudflare workersにアプリを乗っけるためにwrangler というものを使う。 the installation guide ガイドに従って設定する

yarn add @cloudflare/wrangler
yarn global upgrade @cloudflare/wrangler

% wrangler login

Allow Wrangler to open a page in your browser? [y/n] y

✨  Successfully configured. You can find your configuration file at: /Users/you/.wrangler/config/default.toml

wrangler.tomlのaccount_idをクラウドフレアのサイトからコピペする

wrangler dev

でも動作確認ができる

wrangler preview --watch

こちらのコマンドでも動作確認ができる

wrangler publish

でwrangler.tomlに書かれた設定の場所に乗せることができる

今回のプロジェクトの場合

yarn dev

でプロジェクトを編集して行って

yarn deploy

でも本番環境に乗せることができる

https://[wrangler.tomlのname].[cloudflareのworkersで設定].workers.dev

こんなurlになる

remixとcloudflareを使ってみる

目次

インストール

動かしてみる

cloudflareの登録

デプロイ

Tags