💿

Remix with Cloudflare and Vite

2024/01/29に公開

Cloudflare

Vite

Remix

tech

Vite について。

Cloudflare で動くようになったので試す。2024年1月29日現在は unstable^[1]

Remix を Vite で Cloudflare に deploy する。

Why Vite

Well, we did some quick testing on the Indie Stack with a M1 Max MacBook Pro and here’s what we found:
10x faster HMR^[2] 🔥
5x faster HDR^[3] 🔥

さて、M1 Max MacBook Proを使ってIndie Stackで簡単なテストをしてみた
HMRが10倍速い 🔥
HDRが5倍速い 🔥

https://remix.run/blog/remix-heart-vite

ここでも Rust による高速化の影響を受けている。

Usage

X の動画は KV の設定が必要。code^[4] を見れば分かる。
「ビルド出力ディレクトリ」を build/client に変更する。package.json^[5] を見ると分かる。
Vite への migration で code の変更は無し。

npx create-remix@nightly --template https://github.com/remix-run/remix/tree/dev/templates/unstable-vite-cloudflare

local

node ➜ /workspaces/my-portfolio-remix-vite (main) $ npm run dev

> dev
> remix vite:dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Cloudflare

2024-01-29T07:37:06.811146Z	Cloning repository...
2024-01-29T07:37:07.54979Z	From https://github.com/danny-yamamoto/my-portfolio-remix-vite
2024-01-29T07:37:07.550338Z	 * branch            32a0ed354a1561324ba46a6bd923db24d241154a -> FETCH_HEAD
2024-01-29T07:37:07.550467Z	
2024-01-29T07:37:07.58794Z	HEAD is now at 32a0ed3 Merge pull request #3 from danny-yamamoto/feature/add-other-pages
2024-01-29T07:37:07.588396Z	
2024-01-29T07:37:07.679505Z	
2024-01-29T07:37:07.680066Z	Using v2 root directory strategy
2024-01-29T07:37:07.709058Z	Success: Finished cloning repository files
2024-01-29T07:37:08.527337Z	Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
2024-01-29T07:37:08.528012Z	Installing project dependencies: npm clean-install --progress=false
2024-01-29T07:37:12.398193Z	npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
2024-01-29T07:37:12.400419Z	npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
2024-01-29T07:37:18.70377Z	
2024-01-29T07:37:18.704092Z	added 826 packages, and audited 827 packages in 9s
2024-01-29T07:37:18.704303Z	
2024-01-29T07:37:18.704461Z	243 packages are looking for funding
2024-01-29T07:37:18.704619Z	  run `npm fund` for details
2024-01-29T07:37:18.705688Z	
2024-01-29T07:37:18.705874Z	found 0 vulnerabilities
2024-01-29T07:37:18.726404Z	Executing user command: npm run build
2024-01-29T07:37:19.333855Z	
2024-01-29T07:37:19.334169Z	> build
2024-01-29T07:37:19.334356Z	> remix vite:build
2024-01-29T07:37:19.334521Z	
2024-01-29T07:37:21.713715Z	[36mvite v5.0.12 [32mbuilding for production...[36m[39m
2024-01-29T07:37:21.739394Z	transforming...
2024-01-29T07:37:22.912256Z	[32m✓[39m 92 modules transformed.
2024-01-29T07:37:22.999547Z	rendering chunks...
2024-01-29T07:37:23.07127Z	computing gzip size...
2024-01-29T07:37:23.083326Z	[2mbuild/client/[22m[32m.vite/manifest.json                        [39m[1m[2m  2.44 kB[22m[1m[22m[2m │ gzip:  0.44 kB[22m
2024-01-29T07:37:23.08357Z	[2mbuild/client/[22m[2massets/[22m[35mportfolio--74uhlYO.css              [39m[1m[2m  0.73 kB[22m[1m[22m[2m │ gzip:  0.39 kB[22m
2024-01-29T07:37:23.083713Z	[2mbuild/client/[22m[2massets/[22m[36mportfolio._index-nV_cara9.js        [39m[1m[2m  0.17 kB[22m[1m[22m[2m │ gzip:  0.16 kB[22m
2024-01-29T07:37:23.083888Z	[2mbuild/client/[22m[2massets/[22m[36mportfolio.certificates-PymcHWJF.js  [39m[1m[2m  0.26 kB[22m[1m[22m[2m │ gzip:  0.21 kB[22m
2024-01-29T07:37:23.084233Z	[2mbuild/client/[22m[2massets/[22m[36mportfolio.experience-A41uzrwR.js    [39m[1m[2m  0.29 kB[22m[1m[22m[2m │ gzip:  0.24 kB[22m
2024-01-29T07:37:23.084387Z	[2mbuild/client/[22m[2massets/[22m[36mportfolio.articles-hNHLShgy.js      [39m[1m[2m  0.34 kB[22m[1m[22m[2m │ gzip:  0.26 kB[22m
2024-01-29T07:37:23.084674Z	[2mbuild/client/[22m[2massets/[22m[36m_index-qCiUJJ63.js                  [39m[1m[2m  0.64 kB[22m[1m[22m[2m │ gzip:  0.36 kB[22m
2024-01-29T07:37:23.084824Z	[2mbuild/client/[22m[2massets/[22m[36mportfolio-3hKmXc9z.js               [39m[1m[2m  1.05 kB[22m[1m[22m[2m │ gzip:  0.45 kB[22m
2024-01-29T07:37:23.08501Z	[2mbuild/client/[22m[2massets/[22m[36mroot--5yEq3ud.js                    [39m[1m[2m  1.44 kB[22m[1m[22m[2m │ gzip:  0.85 kB[22m
2024-01-29T07:37:23.085191Z	[2mbuild/client/[22m[2massets/[22m[36mjsx-runtime-NroC4D4D.js             [39m[1m[2m  8.09 kB[22m[1m[22m[2m │ gzip:  3.05 kB[22m
2024-01-29T07:37:23.085466Z	[2mbuild/client/[22m[2massets/[22m[36mentry.client-xy4VhUuw.js            [39m[1m[2m 13.99 kB[22m[1m[22m[2m │ gzip:  4.90 kB[22m
2024-01-29T07:37:23.085652Z	[2mbuild/client/[22m[2massets/[22m[36mcomponents-QBgIc9AB.js              [39m[1m[2m216.76 kB[22m[1m[22m[2m │ gzip: 70.05 kB[22m
2024-01-29T07:37:23.085911Z	[32m✓ built in 1.37s[39m
2024-01-29T07:37:23.390505Z	[36mvite v5.0.12 [32mbuilding SSR bundle for production...[36m[39m
2024-01-29T07:37:23.395372Z	transforming...
2024-01-29T07:37:23.468785Z	[32m✓[39m 15 modules transformed.
2024-01-29T07:37:23.478656Z	rendering chunks...
2024-01-29T07:37:23.480191Z	[2mbuild/server/[22m[32m.vite/manifest.json               [39m[1m[2m 0.19 kB[22m[1m[22m
2024-01-29T07:37:23.480368Z	[2mbuild/server/[22m[2massets/[22m[35mserver-build-d_SwgDZs.css  [39m[1m[2m 1.09 kB[22m[1m[22m
2024-01-29T07:37:23.480521Z	[2mbuild/server/[22m[36mindex.js                          [39m[1m[2m13.73 kB[22m[1m[22m
2024-01-29T07:37:23.481575Z	[32m✓ built in 90ms[39m
2024-01-29T07:37:23.531209Z	Finished
2024-01-29T07:37:23.531859Z	Found Functions directory at /functions. Uploading.
2024-01-29T07:37:24.849944Z	✨ Compiled Worker successfully
2024-01-29T07:37:24.90149Z	Validating asset output directory
2024-01-29T07:37:25.5814Z	Deploying your site to Cloudflare's global network...
2024-01-29T07:37:29.444871Z	Uploading... (14/14)
2024-01-29T07:37:29.445687Z	✨ Success! Uploaded 0 files (14 already uploaded) (0.33 sec)
2024-01-29T07:37:29.445909Z	
2024-01-29T07:37:29.668841Z	✨ Upload complete!
2024-01-29T07:37:31.615542Z	Success: Assets published!
2024-01-29T07:37:34.735359Z	Success: Your site was deployed!

Remix + Vite + Cloudflare はこちら。

code はこちら。

BTW

Rust に関して FRAIM^[6] さんと話す機会がありました。

FRAIM さんはプロダクト^[7]の Backend を Rust で開発しているみたいです。

Engineer の方々も geek な方々でとても魅力的でした。

脚注

https://github.com/remix-run/remix/tree/dev/templates/unstable-vite-cloudflare ↩︎
主にアプリケーションの開発中に使用される機能で、特にwebpackのようなツールを使用したWeb開発のコンテキストで使用されます。HMRは、ページ全体をリフレッシュすることなく、実行中のアプリケーションのモジュールを更新する方法を提供し、開発プロセスを大幅に高速化します。 ↩︎
アプリケーションによってフェッチされたデータが定期的にリフレッシュされ、最新であることを確認するプロセスを指す。 ↩︎
https://github.com/remix-run/remix/blob/c37282545691599dc66dff5269b2568797378c93/templates/unstable-vite-cloudflare/wrangler.toml#L2 ↩︎
https://github.com/remix-run/remix/blob/c37282545691599dc66dff5269b2568797378c93/templates/unstable-vite-cloudflare/package.json#L8-L9 ↩︎
https://fraim.co.jp ↩︎
https://lawgue.com ↩︎

GitHubで編集を提案

Why Vite

Usage

BTW

Discussion