把個人網站從 rendertron + React SPA migrate 成 nuxt3

到達獵寮營地前（嘉明妹池旁）展望超棒的一段。戒茂斯上嘉明湖 Day 1

Why

當初寫個人網站的時候印象中還沒有 next, nuxt 這種完整的 SSR framework 出來，所以就用了 rendertron + React SPA 的方式來讓 crawler 能爬到 HTML 的 meta。

到了現在 next 跟 nuxt 已經很成熟了，又剛好有機會想試試 Nuxt3，所以就拿個人網站來 migrate 了～。

How

Migration

Nuxt3 的官網文件寫得很好懂，而且 cli 也很簡單好用，跟著 Get Started 在我原本個人網站的 repo 裡開個新的 folder 給 Nuxt3 project 後很單純就能跑起來了。

接著把原本 React SPA 的 pages/components 等等稍微調整後搬進 Nuxt3 project，一些調整像是：

1. 要按照 Nuxt3 的 folder structure 放檔案
2. 把 @fortawesome/react-fontawesome 改成上傳 svg 圖檔到 Cloudinary
3. 把 styled-components 改成 @nuxtjs/tailwindcss

基本上這樣在 local 就差不多 migrate 完了。

Deployment 的調整

主要差異在從 rendertron nodejs server 要改成用 pm2 去跑 nuxt server，所以就會動到 Dockerfile：

1. 在 Dockerfile 裡要多 install pm2 globally
2. 最後的 CMD 改成 pm2

CMD ["pm2-runtime", "start", "ecosystem.config.cjs"]

其他的 CircleCI、Nginx 等等的基本上都不用動到（一兩年沒碰的東西竟然都還沒壞能順利 deploy 也是有點驚訝ＸＤ）。

Migration 就這樣完成啦～

最後用 Facebook Sharing Debugger 確認一下 crawler 爬得到

個人網站：https://yeslee.me/