一.前提条件
1.本地已有一个Vue2/Vue3项目
腾讯云SCF本身支持使用模板创建(模板创建参考)一个Vue项目并部署,但本文主要讲解将本 地原有的Vue项目改造为支持Serverless SCF部署的方法,并且建议使用SCF部署简单的SPA应用。
2.环境配置
本地全局安装serverless Cloud Framework,且在腾讯云已开通对应的功能。
腾讯云平台功能开通参考官网 腾讯云
// 全局安装 serverless
npm install -g serverless
二.改造Vue项目
SCF的部署依赖yml文件的配置,所以我们只需简单更改几步配置即可实现。
改造时分为两种:
一种为本地完成部署
一种为使用GitHub Action 实现自动部署
两种方式均需要执行“安装依赖并配置package.json”步骤
1.安装依赖并配置package.json
该部分的配置参考了官方的scf vue.js模板
①.@serverless/platform-client-china 安装
//以npm为例,yarn请自行替换,使用-D开发安装即可
npm install @serverless/platform-client-china -D
②.package.json的修改
该部分CV了官方模板,添加在package.json中即可
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
}
2.本地部署
①.yml文件编写
这里给出的yml文件只实现最基本的打包 + 部署功能,扩展更多功能请参考官方文档
yml文件中出现了腾讯云中“存储桶”相关的配置,其实使用SCF部署Vue项目,最后就是将打包后的dist文件夹push到一个“匿名可访问”的存储桶中实现公网访问。亲测不配置相关字段SCF将自动分配。
在vue项目根目录创建“serverless.yml”文件,代码如下:
component: website #组件类型
name: XXXXX #组件名称
app: XXXXX #应用名称
inputs:
name: scfdemo
src:
src: ./src //vue项目入口文件夹
hook: npm run build
dist: ./dist //vue项目build后的文件夹名称
# region: ap-nanjing // 存储桶的地区,可不填,会自动分配
# bucketName: ROADRUNNER-WEB // 可不填,会自动生成
protocol: https // 使用https协议
②.env环境变量配置
SCF部署需要使用到腾讯云平台的secretID和secretKey,获取地址: ID和KEY
获取到ID和KEY之后,在Vue根目录创建.env文件,并按以下格式保存ID和KEY
TENCENT_SECRET_ID= XXXXXXXXX 替换为你的ID
TENCENT_SECRET_KEY= XXXXXXXXXX 替换为你的KEY
③.开始部署
//若一切配置正常 在终端输入 scf deploy 即可完成部署
执行: scf deploy
部署成功控制台将会显示如下内容,点击链接即可访问
3.SCF 配合 GitHub Action使用
写在前面:
使用Github Action 时不需要在.env文件中配置ID和KEY,更不要把含有腾讯云ID和KEY的.env文件push到git仓库!
使用Github Action 时不需要在.env文件中配置ID和KEY,更不要把含有腾讯云ID和KEY的.env文件push到git仓库!
若想在每次提交到github仓库时实现自动打包+部署,需再为GitHub Action编写一个yml文件,并在对应仓库中为Action配置腾讯云ID和KEY,示例如下:
①.yml文件编写
在Vue项目根目录创建:.github/workflows/main.yml文件 ,代码如下:
name: Serverless Devs Project CI/CD
on:
push:
branches: [main] // 换成自己的分支名称
jobs:
serverless-devs-cd:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16]
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2.2.4
with:
version: 7
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: npm install // 安装Vue项目依赖
run: npm install
- name: scf inject // 安装scf框架
run: npm install -g serverless-cloud-framework@latest
- name: env injected and start deploy
run: scf deploy // 环境变量注入 + 部署
env:
TENCENT_SECRET_ID: ${{secrets.ACCESSID}}
TENCENT_SECRET_KEY: ${{secrets.ACCESSKEY}}
②.git仓库设置
注意设置的secrets名字须和yml文件中对应,例如此处的“ACCESSID”和“ACCESSKEY”
③.开始部署
将自己本地Vue项目push到对应仓库,等待Action完成后,可看到如下内容:
三.常见问题记录
1.scf deploy 提示需要登录
scf除了支持本地配置ID和KEY之外,还支持扫码登录,较为麻烦,若出现该问题则说明.env文件中的ID和KEY配置失败,请重新对比检查。
2.scf deploy 一直处于“初始化”
作者的原Vue项目在webpack中配置过"webpack-bundle-analyzer"plugin,配置如下图,使用该plugin时会导致deploy一直处于“初始化状态”,建议使用了该plugin的读者在使用scf时将其禁用。
3. 部署页面路由访问404
由于SPA应用的特性,如果不是从根路径访问,而是从带路由的路径访问,将导致404错误,其实这就是重定向的问题,使用Nginx部署时可以采用配置try_files解决该问题,使用SCF时需要去存储桶中手动配置。 官方给出的方案: 官方方案
4. 部署时间较长
时间较长与原Vue项目build的时间有很大关系,可以通过优化原Vue项目的webpack解决,将部分依赖拆分为CDN引入将显著提升整个部署的速度。