Remix: Migrate to stable and Cloudflare Pages

Remix Vite について。

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

Remix Vite が stable になったらしい。

[unstable](https://zenn.dev/dannya/articles/1d47d2af6fd7d5) からの変更点を確認する。個人的な memo として。

## Changes
### HMR & HDR
- `LiveReload` の削除。

https://github.com/danny-yamamoto/my-portfolio-remix-vite/commit/dd0dc72ae9da1fb5819b1e2b51d48034e8987b22#diff-4133eb55408b25b35b8e07c696a9dfc97b741c555d7407e8c86d0845e5eecc28

> Vite provides a robust client-side runtime for development features like HMR, making the <LiveReload /> component obsolete. When using the Remix Vite plugin in development, the <Scripts /> component will automatically include Vite's client-side runtime and other dev-only scripts.
> 
> Vite は HMR のような開発機能のための堅牢なクライアントサイドランタイムを提供し、<LiveReload />コンポーネントを時代遅れのものにしています。Remix Vite プラグインを開発で使用する場合、<Scripts />コンポーネントは自動的に Vite のクライアントサイドランタイムと他の開発専用スクリプトを含みます。

https://remix.run/docs/en/main/future/vite#hmr--hdr

### npm scripts
- `typegen` の追加。D1 や KV の binding の生成。

> Generate types for your Cloudflare bindings in `wrangler.toml`

https://github.com/danny-yamamoto/my-portfolio-remix-vite/blob/0f9082e21dceba3966b0b880435c672eb141adc5/package.json#L13

## Run the Vite dev server
```bash: log
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
```

## Run Cloudflare Pages
```bash: log
14:41:27.919	> build
14:41:27.919	> remix vite:build
14:41:27.919	
14:41:30.266	vite v5.1.4 building for production...
14:41:30.316	transforming...
14:41:31.432	✓ 91 modules transformed.
14:41:31.522	rendering chunks...
14:41:31.591	computing gzip size...
14:41:31.604	build/client/.vite/manifest.json                          2.43 kB │ gzip:  0.44 kB
14:41:31.604	build/client/assets/portfolio--74uhlYO.css                0.73 kB │ gzip:  0.39 kB
14:41:31.605	build/client/assets/portfolio._index-nV_cara9.js          0.17 kB │ gzip:  0.16 kB
14:41:31.605	build/client/assets/portfolio.certificates-YeXXrt_T.js    0.26 kB │ gzip:  0.22 kB
14:41:31.605	build/client/assets/portfolio.experience-YtR9istW.js      0.29 kB │ gzip:  0.24 kB
14:41:31.605	build/client/assets/portfolio.articles-g40nNTOX.js        0.34 kB │ gzip:  0.26 kB
14:41:31.605	build/client/assets/_index-4iN_pvKD.js                    0.72 kB │ gzip:  0.42 kB
14:41:31.605	build/client/assets/portfolio-IhPxw77n.js                 1.05 kB │ gzip:  0.45 kB
14:41:31.606	build/client/assets/root-ZkF9plZM.js                      1.44 kB │ gzip:  0.84 kB
14:41:31.606	build/client/assets/jsx-runtime-NroC4D4D.js               8.09 kB │ gzip:  3.05 kB
14:41:31.606	build/client/assets/entry.client-kZ74JvoI.js             14.18 kB │ gzip:  4.95 kB
14:41:31.606	build/client/assets/components-_3L0V7zO.js              212.88 kB │ gzip: 68.82 kB
14:41:31.606	✓ built in 1.31s
14:41:31.906	vite v5.1.4 building SSR bundle for production...
14:41:31.910	transforming...
14:41:31.974	✓ 14 modules transformed.
14:41:31.984	rendering chunks...
14:41:31.986	build/server/.vite/manifest.json                0.19 kB
14:41:31.986	build/server/assets/server-build--74uhlYO.css   0.73 kB
14:41:31.986	build/server/index.js                          13.08 kB
14:41:31.987	✓ built in 80ms
14:41:32.038	Finished
14:41:32.039	Found Functions directory at /functions. Uploading.
14:41:33.327	✨ Compiled Worker successfully
14:41:33.376	Validating asset output directory
14:41:34.047	Deploying your site to Cloudflare's global network...
14:41:38.154	Uploading... (13/13)
14:41:38.155	✨ Success! Uploaded 0 files (13 already uploaded) (0.31 sec)
14:41:38.155	
14:41:38.572	✨ Upload complete!
14:41:40.618	Success: Assets published!
14:41:44.502	Success: Your site was deployed!
```
https://my-portfolio-remix-vite.pages.dev/portfolio

## BTW
4月以降の目標が決まった。

この数ヶ月で、改めて自分と向き合うことが出来た。

そして、個人的に、この話はとても参考になった。

https://www.youtube.com/watch?v=LLaCjrqhNw4

- 生き生きしていること。
- 知識を継続して増やすこと。
- 同じことでも違う方法を模索すること。

私も自己成長を求めていきたい。立ち止まることなく。