nuxt+supabase+netlify 构建免费ssr应用

hanaTsuk1
495 阅读4分钟

起因

最近发现了一个网站hellogithub，主要分享和推广一些 GitHub 上有趣、入门级的开源项目，逛了一下，突然一个新的灵感产生了。我也想做一个类似的网站，用来推广一些东西，当然肯定不是github项目🤣。一个新坑准备开挖，但要用什么技术开发好呢？

以前的话我就直接vite开个前端，nest搞个后端，买个阿里云服务+域名开干了。但上次买了服务器就没怎么用、一直到一年后过期的场景历历在目，随便写写的话就弄些简单点的。前段时间，我接触到netlify，用它弄了个静态网页，还挺方便的而且免费，github上传后自动打包。我就想netlify能不能把前后端一起弄了，结果一搜就发现netlify可以直接部署ssr项目。仔细回想上次用nuxt还是好久以前，后面公司没用就没怎么去了解，这次就顺便看一下

Nuxt

Nuxt是一个 开源框架 ，使得Web开发变得直观且强大。可以自信地创建高性能和生产级别的全栈Web应用和网站

以前让我看Nuxt，我是抗拒的，就一个ssr又用不到，不学不学🫠。但短短的接触后，我便改变了这一观点

自动化和约定

Nuxt使用约定和一套规范的目录结构来自动化重复的任务，让开发者可以专注于推动功能的开发。配置文件仍然可以自定义和覆盖其默认行为

  • 基于文件的路由
  • 自动导入
  • 零配置的TypeScript支持
  • 数据获取工具

一开始Nuxt就提供了很多默认的配置，你只需要遵循它的约定，就能无感知地享受到这些便利，在以往的vite项目中我会这么配置

  • vite-plugin-pages
  • unplugin-auto-import/vite unplugin-vue-components/vite
  • vite-tsconfig-paths
  • @vueuse/core

你可能会说不就是配置吗？我自己手动配置也不会花太多时间，而且自由度还高。确实如此，不过我们继续往下说

服务器引擎

Nuxt的服务器引擎Nitro开启了全新的全栈能力

Nuxt的server目录下，可以通过创建文件来提供api服务，并且在前端使用Nuxt提供的useFetch可以获取ts类型，非常便利

当然server还有一些别的功能，这里就不细讲了，只谈谈我自己的体验

一个小插曲，我使用的是pnpm，在使用中遇到了useFetch没有返回类型的情况，其实是pnpm的经典问题。在一番查找后发现，自动生成的d.ts文件有这么一段

declare module 'nitropack'

只需在根目录添加一个.npmrc，内容如下，重新下载依赖即可

public-hoist-pattern[]=nitropack

模块

一个框架好不好用，要看它的生态，不然就算再快、再轻量也很难让人去尝试

Nuxt提供了很多开发常用的模块，官方提供的@nuxt/ui直接使用Tailwind CSS，Tailwind CSS想必已是大势所趋，使用过后真的会和使用前感受不同

其他的模块就不一一介绍了，有兴趣可以自己去看，网址

接下来讲一下重点，supabase

Supabase

Nuxt提供的数据库模块中supabase和firebase使用度最高，但firebase我简单了解了一下，不能在国内用，于是选择supabase，但最主要的是可以直接免费使用，划一下重点🫡

直接看Nuxt supabase，在supabase申请账号后，把账号提供的信息放在.env文件里

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

使用Nuxt supabase提供的api就能直接连接了

在supabase中创建表，可以直接在文档中找到 from the dashboard链接，直接生成数据库类型，参照仓库即可让你的api服务获取数据库ts类型

更重要的是supabase提供这样的查询语句，配合之前提到的useFetch直接起飞🚀

const countriesWithCitiesQuery = supabase
  .from("countries")
  .select(`
    id,
    name,
    cities (
      id,
      name
    )
  `);

Netlify

最后来到了关键的部署环境，但这里没有什么好讲的，项目上传到github后，授权netlify读取，就能自动识别出你的Nuxt项目，你只需添加几个环境变量即可，例如前面提到的SUPABASE_URL、SUPABASE_KEY，如果使用pnpm，貌似需要注意一下PNPM_FLAGS，需要设置成--shamefully-hoist

到此，你的Nuxt应用就能一键部署了🎉

不会有人觉得免费的额度能用完吧😎

avatar
文章
阅读
粉丝