Next.js 网站部署踩坑经历小记及前端站点部署技巧

前言

在入职两个月后，我开始了第一个完全由我一个人负责开发的网站项目。这个网站的用途是用于 宣传一个开源社区峰会 以及 沉淀峰会视频内容 ，在峰会进行期间还需要在网站进行 直播 。从网站的开发到部署上线，可谓是踩坑无数，最终实现的网站在这里 apisix-summit.org/

背景

由于时间有限，整体网站的架构是基于 vercel 的一个网站脚手架 virtual-event-starter-kit 之上进行开发，因此并不需要从头构建项目。 这个脚手架使用的是 next.js 实现服务端渲染，其中已经预设了很多第三方平台的接口，例如 datoCMS 和 upstash。

当时的我对于 react 并没有那么的熟悉，更别提 next.js 框架以及一些 react 系的第三方库了，因此这次的开发不仅仅是任务，更是一个学习的过程。

部署过程

服务器基本环境搭建

最初网站是通过 vercel 进行部署的，但是后期需要转移到 AWS 的三台裸金属服务器上进行部署并配置 AWS Elastic Load Balancing 负载均衡。由于网站使用的是服务端渲染，因此不能直接打成一个静态包放在 CDN 上，必须跑一个服务才能使用。

为了防止服务挂掉，我使用的 pm2 来守护服务的进程，关于 node.js 和 pm2 的安装我执行的操作大概如下：

sudo apt update 

sudo apt install nodejs npm -y 

sudo npm i n pm2 yarn -g

n stable 

这里之所以安装 n 是因为 apt 安装的 node.js 太旧了，通过 n 来快速切换下 node.js 的版本，保证依赖可以顺利安装。