使用Firebase部署前端时自定义打包流程
起因
我目前使用的技术栈是 Vite+React，使用Firebase提供的Hosting服务部署。
每次部署时发现命令行都会执行 vite build，由于我这个项目是需要多环境部署的，当前需要通过环境变量来控制业务的配置。
而每次部署之前自动执行的 vite build 并不会携带自定义的环境变量，所以部署的应用不符合预期。
方案
通过查询资料，发现在firebase的配置文件 firebase.json 里面有一个 source 字段指向了当前项目的 . 目录，所以导致每次都会进行构建，通过下面的修改可以取消构建：
// 注意这里以前是有一个source: "." 就会触发构建，只需要将public指向自己构建的目录即可。
{
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"frameworksBackend": {
"region": "us-central1"
}
}
}
删除 source 字段，添加或者修改public字段，指向 vite build 生成的目录即可。我们只需要在部署之前手动打包，部署的时候仅仅上传打包结果。
下面修改一下 package.json 中的部署脚本，如下：
// package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"deploy": "vite build --mode test && firebase deploy --only hosting --project=test",
"deploy:prod": "vite build --mode prod && firebase deploy --only hosting --project=prod"
}
}
现在部署时运行下面的脚本即可。
# 部署测试环境
npm run deploy
# 部署正式环境
npm run deploy:prod