次世代全干工程师养成计划(上)

J3LLYPUNK
793 阅读5分钟

如题，本系列将带领大家使用vercel和next.js相关技术快速构建一个多用户体系的全栈基建项目并部署生产环境，史称--次世代全干工程师养成计划

相关技术

1.next-js 使用react构建全栈应用的框架

2.next-auth 针对 Next.js 应用程序的一个完整的开源身份验证解决方案

3.prisma 次世代 Node.js 和 TypeScript ORM

4.vercel 为开发人员提供构建更快、更个性化 Web 的框架、工作流和基础设施。

5.vercel-postgres 无服务器的 SQL 数据库，旨在与 Vercel 函数和前端框架集成。

6.tailwindcss 一个效用优先的 CSS 框架

开始

注册并登录Vercel平台

由于我们需要使用github来托管项目代码，所以这里建议使用github授权登录

image.png

创建项目

image.png

vercel已经为我们准备了许多应用场景比较成熟的项目模板，我们只需要选择符合自己需求的模板即可

image.png

搜索auth相关模板并选择其一

image.png

注⚠️:其实这里的大多数模板我都有所尝试，有许多需要进行一些琐碎的配置，因为next和next-auth、prisma版本不一致的问题踩了许多坑，对未上手的新用户并不友好，并且很多偏向业务的代码并不适合作为demo讲解，此模板仅包含用户体系功能且仅需进行很少的配置即可开发部署，所以选择它。非常推荐你在阅读完本文后去体验学习一下其他模板，都很不错

点击deploy按钮开始进行部署

image.png

创建仓库

输入Repository Name或使用默认值，点击Create按钮进行创建

image.png

此操作将会在你的github下创建一个新的仓库，仓库名就是你的输入值

image.png

创建并连接数据库

接下来我们点击Add新建数据库

image.png

点击Accept接受协议条款

image.png

点击Create完成创建

image.png

选择数据库可用环境并点击Connect连接数据库

image.png

配置密钥

接下来我们为项目配置NEXTAUTH_SECRET，点击Lean More在弹出页面生成加密串，复制并填入NEXTAUTH_SECRET

image.png

部署

最后我们点击Deploy进行部署并等待其完成即可

image.png

恭喜你，发布成功！🎊

我们来简单测试一下，点击Protected Page进入注册/登录流程

image.png

当你完成注册并登录后

...

你.被.骗.了.

image.png

至此我们已成功创建并发布了自己的网站，接下来开始为本地开发做准备

本地开发

⚠️注:要求node版本为16以上，如果你低于此版本，可以使用n来管理和切换你的node版本

首先拉取我们的远程仓库并装包

git clone 你的仓库地址
cd 你的仓库名
npm install

全局安装vercel

安装 vercel/postgres

连接vercel平台上我们之前创建的项目

npm i -g vercel
npm install @vercel/postgres
vercel link

如果连接成功你将看到如下信息

image.png

拉取环境变量

vercel env pull .env.development.local

此时你会发现项目中多了一个.env.development.local的环境变量文件，这是我们在创建项目的时候生成的，而下面的那个.env.example是模板作者给你的示例文件

image.png

删除.env.example并将.env.development.local重命名为.env

image.png

启动本地数据库

npx prisma studio

如果你的http://localhost:5555 没有被占用的话，你将看到如下页面，表示数据库启动成功

image.png

选择User这个Model，你可以看到之前在生产环境测试时你注册的账号

image.png

启动本地项目

npm run dev

此时你的本地服务已经在http://localhost:3000 运行了

如果你遇到如下报错

image.png

这是因为unstable_getServerSession已被弃用,将./components/auth-status.tsx 中的unstable_getServerSession替换为getServerSession即可

import { getServerSession } from "next-auth/next";

export default async function AuthStatus() {
  const session = await getServerSession();
  return (
    <div className="absolute top-5 w-full flex justify-center items-center">
      {session && (
        <p className="text-stone-200 text-sm">
          Signed in as {session.user?.email}
        </p>
      )}
    </div>
  );
}

设置本地环境变量

在.env文件中添加如下变量

NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="你在vercel平台配置的NEXTAUTH_SECRET"

NEXTAUTH_URL用于本地开发时的用户校验流程，如果不配置，则本地环境的注册/登录流程无法走通，但生产环境不受此影响

NEXTAUTH_SECRET用于加密传输数据，需要与创建项目时的配置一致，你可以在下图位置查看之前的环境变量配置

image.png

自动化部署

在创建项目时vercel已经为我们集成了自动化部署的pipeline，我们只需要提交代码,其他的活儿交给vercel就行

git add .
git commit -m 'init'
git push

可以看到提交代码后，在vercel的dashboard中你的项目已经开始进行打包部署

image.png

如果部署失败，你可以查看日志来排查问题

image.png

比如这里查看日志发现由于项目中存在pnpm-lock.yaml导致打包时失败，在本地删除pnpm-lock.yaml后重新提交代码后即可成功部署

当然你也可以一开始就使用pnpm来装包，这样就不会就有问题，此处出现的问题和处理方法仅仅是为了告诉你如何进行部署操作和查看日志

image.png

如果你的github账号是使用QQ邮箱注册的，那么你的微信也将收到一条部署失败的消息提醒，非常滴银杏化。你也可以通过邮件转发的方式将其他邮箱的邮件转发至你的QQ邮箱或者钉钉、飞书等你想随时获取部署信息的地方

image.png

问题修复后部署成功，你将在dashboard中看到如下信息

image.png

大功告成，完结撒花🎉

结语

至此，你已经完成了一个全栈项目的项目搭建+数据库搭建+用户鉴权+自动化部署等工作，你现在已经是一名合格点点点工程师了!真棒👏！为自己鼓掌！

预告

完成了项目基建后，我们要开始着手于业务代码了，下篇文章将带领你从点点点工程师工程师进化成点点点&CRUD全干工程师啦，如果你觉得这篇文章对你有帮助的话不妨点赞+收藏+关注支持下我，下篇文章正在努力编写中...

往期文章

# 次世代全干工程师养成计划(下)

# 如何使用chatgpt提升前端开发效率?

# JS设计模式在React-hook中的实践

# 十个例子理解TS泛型

avatar
文章
阅读
粉丝