包含多个子项目集成一个项目部署Vercel方法

1. 起因

因为手上有一个项目集合需要通过: 域名/项目名称 访问。但每个项目用到的框架各不相同。最简单的办法是通过nginx配置反向代理来实现,奈何没有多余的服务器。所以就想部署到Vercel上。本来是想每个项目在Vercel单独部署,因为每个项目都是一个小模块功能不多,单独起一个项目有点浪费就打算合成一个项目通过域名+项目名的方式来部署。于是查了查资料发现还真可以。下面就来带大家第一实践一下。

2. 项目结构

txt 复制代码
project-list/
├── vercel.json
├── project-A/   # React/Next.js 项目
├── project-B/   # Vue 项目
├── project-C/   # Astro 项目
└── project-D/   # 纯 HTML 静态项目

2.1 project-A项目下的package.json

json 复制代码
{
  "name": "project-A",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Vercel 自动识别 @vercel/next,会跑 npm run build,输出 .next/。

2.2 project-B项目下的package.json

json 复制代码
{
  "name": "project-B",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vite": "^5.0.0"
  }
}

Vite 默认打包目录 dist/

2.3 project-C项目下的package.json

json 复制代码
{
  "name": "project-C",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.0.0"
  }
}

Astro 也会输出 dist/

2.4 project-D 纯HTML+CSS+JS

json 复制代码
project-D/
 ├── index.html
 ├── style.css
 ├── script.js
 └── images/

Vercel 直接托管,不需要 build。

3. vercel.json创建和配置

在父项目project-list下创建vercel.json 下面是vercel.json的具体配置

json 复制代码
{
    "version": 2,
    "builds": [
      {
        "src": "project-A/package.json",
        "use": "@vercel/next"
      },
      {
        "src": "project-B/package.json",
        "use": "@vercel/static-build",
        "config": { "distDir": "dist" }
      },
      {
        "src": "project-C/package.json",
        "use": "@vercel/static-build",
        "config": { "distDir": "dist" }
      },
      {
        "src": "project-D/**/*",
        "use": "@vercel/static"
      }
    ],
    "rewrites": [
      {
        "source": "/project-A/(.*)",
        "destination": "/project-A/$1"
      },
      {
        "source": "/project-B/(.*)",
        "destination": "/project-B/$1"
      },
      {
        "source": "/project-C/(.*)",
        "destination": "/project-C/$1"
      },
      {
        "source": "/project-D/(.*)",
        "destination": "/project-D/$1"
      }
    ]
  }

针对不同项目,builds里面的写法不同. 当然具体情况得看自己的项目结构,即便是其他的框架也可以照葫芦画瓢的在builds里面配置。

4. 提交并部署

现在可以直接将父项目源码上传到Git,Vercel通过vercel.json会识别到各个项目的build设置。后续部署全程由Vercel来自动完成(第一次操作记得在Vercel中关联到Git里面的project-list父项目,后续代码有提交都会自动部署)

部署完成后通过 域名/项目名/index.html 来试着访问一下你的项目吧!

好了,以上就是Vercel部署多个项目合集的方法.如果有任何疑问可以在下方留言 更多精彩内容可以关注我的博客 haydenbi.com

相关推荐
前端九哥1 小时前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_764441331 小时前
身份证校验工具
前端·python·1024程序员节
4Forsee2 小时前
【Android】View 事件分发机制与源码解析
android·java·前端
一 乐2 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再2 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
IT_陈寒2 小时前
Vite 3.0终极提速指南:5个鲜为人知的配置技巧让构建效率翻倍
前端·人工智能·后端
北京阿法龙科技有限公司2 小时前
AR巡检轨道交通、地铁运维场景的应用技术方案|阿法龙XR云平台
运维·ar·xr
Teamhelper_AR2 小时前
AR智能巡检:电力运维的“透视眼”与“超级大脑”
运维·ar
likeyou~coucou2 小时前
nginx负载均衡
运维·负载均衡
菩提树下的凡夫2 小时前
前端vue的开发流程
前端·javascript·vue.js