Serverless 基础篇系列文章 —— 如何使用 serverless 部署前端项目

一、使用serverless部署vue3项目

1、使用脚手架创建一个vue3项目

我们先初始化一个vue3项目

npm create vue@latest

启动项目看下：

npm run dev

没啥问题

2、将 vue3 项目包装成 Serverless 应用

3、安装 Serverless Framework

通过 npm 安装最新版本的 Serverless Framework

npm install -g serverless

4、初始化一个 serverless 应用

快速创建一个serverless应用

serverless init website-starter --name example

5、移植 serverless.yml

将这个serverless.yml文件复制到刚刚创建的vue3项目中，然后删除 website-starter 目录

现在的目录结构是这样的：

6、调整下 serverless 配置文件

简单的修改下：

增加了 dist 的目录位置为 ./dist，更改了 bucketName 为 my-vue-starter

component: website # 引用的组件名称，这里使用的是tencent-website组件
name: websitedemo # 创建的网站实例的名称
app: example-fc928772 # 网站所属的应用名称（可选）

inputs: # 配置输入参数的部分
  src: # 指定源代码的位置
    src: ./src # 源代码的路径
    index: index.html # 网站的入口文件
    error: index.html # 错误页面的文件
    dist: ./dist # 构建后的代码的输出路径
  region: ap-guangzhou # 网站所在的地区/区域
  bucketName: my-vue-starter # 存储网站文件的存储桶名称
  protocol: https # 网站使用的协议（这里是HTTPS）

解释下这个配置文件，源代码位于 ./src 目录下，入口文件为 index.html，错误页面也使用同一个文件。构建后的代码输出到./dist目录。网站将部署在 ap-guangzhou 地区，并使用名为 my-vue-starter 的存储桶来存储网站文件。

更多配置查看全量配置及配置说明

7、集成自动构建能力

有的同学会问了，上面的 dist 需要每次在项目部署前都要先npm run build，然后再将打包后的dist目录传到服务器上的nginx静态目录下，这样才能访问，这个步骤可以走CI(持续集成)吗？

答案是可以的，我们可以将自动构建的能力集成到serverless部署流程中，只要配置下 hook，在每次发布的时候会先执行 build，就像 github hook 或者 github actions

# serverless.yml文件
component: website
name: vue-starter
app: vue-demo-6cb9842a

inputs:
  src:
    src: ./src
    # 配置了这个hook每次发布的时候会先build
    hook: npm run build
    dist: ./dist
  bucketName: my-vue-starter
  protocol: https

8、部署serverless应用

这一步就会先走代码编译构建，然后执行serverless的部署流程，直接将代码推送到云端

serverless deploy

不幸的是，编译过程遇到报错：

提示sh: run-p: command not found，原因是 run-p 这个命令找不到，我们安装下：

npm i npm-run-all -D

再重新部署下试试：

serverless deploy

部署完毕后，就可以在命令行的输出中查看到静态站点 URL 地址，点击地址访问看下：

本地开发服务 和 serverless 上的服务是一样的:

这样，我们就完成了使用 serverless 来部署 vue3 项目

二、部署react项目

1、快速创建一个react项目

npx create-react-app serverless-react-demo --template typescript

启动看下效果：

npm run start 

2、将 react 项目包装成 serverless 应用

我们再快速创建一个 serverless 应用：react-starter

serverless init website-starter --name react-starter 

老规矩，将 serverless.yml 文件提到我们创建的serverless-react-demo跟目录下，然后删除 react-starter 目录：

我们改下serverless.yml文件：

• 将打包后的静态文件目录 dist 目录改成 ./build

component: website
name: react-starter
app: react-starter-7ae90038

inputs:
  src:
    src: ./src
    hook: npm run build
    index: index.html
    error: index.html
    dist: ./build
  region: ap-guangzhou
  bucketName: my-react-starter
  protocol: https

3、部署serverless应用

serverless deploy

部署完毕后，点击地址访问看下：

看了下，本地开发服务 和 serverless 上的服务也是一样的:

这样，我们就完成了使用 serverless 来部署 react 项目

三、部署angular项目

部署方式和上面手动部署vue 和 react类似，这就不重复的写了

案例代码

总结

这节课，我们学习了使用 serverless 来部署前端三个框架的方式，其实不难，总结就以下几个步骤：

• 1、快速创建一个 serverless 应用
• 2、将前端项目包装 成 serverless 应用
  • 将serverless 应用的配置文件serverless.yml文件添加到前端项目内
  • 调整 serverless.yml 配置内容
    • 更改打包后的静态文件目录 dist 指向
    • 将自动构建能力集成到serverless部署流程中，添加hooks执行代码编译
• 3、部署serverless应用，执行代码编译构建和推送资源到云端

参考文档

• tencent-website