人生苦短，我用vercel

vercel是什么

vercel地址：https://vercel.com/

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

简单理解，前端网站托管，服务部署。

你可以用vercel，直接把你的静态网站部署在它的服务器上，可以设置你自己的个性域名，会自动配置好https。比如非常出名hexo博客站点。

当然，如果只是部署静态网站，我就没必要写这么一篇东西了。接下来说到vercel的亲儿子，https://github.com/vercel/next.js/

这个也是个明星级选手，不过对于Next.js，我一直有误解，我以为它是vue react之类的东西，但其实他不是。

他和vue react不冲突，还可以搭配使用。

Next.js 比较出名一点是什么呢？ssr。服务端渲染，众所周知啊，自动vue react这些东西出来后，写爬虫不用无头浏览器，都不知道页面有些什么东西，这对SEO来说并不是一件好事。这就有了这个ssr，也就是服务端都把东西渲染加载好了，再返回到前端浏览器了，这样做一是方便SEO，二是大大加快了浏览器那段的渲染加载速度。

虽然我都用不上这些。

Next.js可以写后端接口，配合vercel，直接白嫖一个应用部署环境，前后端一体，纵享丝滑。

也没那么丝滑，这个typescript写起来还是挺费劲的…..

Next.js连上MySQL

我这里需要后端开发，按它的目录结构，pages目录下，一个页面就是一个http接口。

直接贴代码，executeQuery第一个参数就是SQL语句，里面用占位符，第二个参数就是值

放在后端目录下，切记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import mysql from 'serverless-mysql';

const db = mysql({
  config: {
    host: process.env.MYSQL_HOST,
    port: parseInt(process.env.MYSQL_PORT as string),
    database: process.env.MYSQL_DATABASE,
    user: process.env.MYSQL_USER,
    password: process.env.MYSQL_PASSWORD
  }
});

export default async function executeQuery({ query, values }:{
    query: string,
    values: any[],
}) {
  try {
    const results = await db.query(query, values);
    await db.end();
    return results;
  } catch (error) {
    return { error };
  }
}

使用react组件进行前端开发

我这里用的antd-mobile，这些比较出名的组件，对于ssr都有相应设置要求

部署

https://vercel.com/ 授权github的权限给它 然后发布就好了，自己设置好要的那些环境变量

看下我最后写的一个小的管理界面，效果还行。

最后

总结下vercel优点

  1. 前后端一体纵向丝滑
  2. 免费部署，部署体验好
  3. 域名随意指定+HTTPS免费证书
  4. git commit实时自动更新

不好的地方：

  • 本地环境和线上环境不一致……本地没问题线上有bug
  • 服务器连接国内因为gfw存在 不太友好，建议购买国外的数据服务

有ChatGPT之后写前端解bug真的是太高效了，还能辅助设计页面。