Vue - 使用 腾讯云SCF部署Vue项目（支持GitHub Action）
一.前提条件
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: scfdemosrc:src: ./src //vue项目入口文件夹hook: npm run builddist: ./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/CDon:push:branches: [main] // 换成自己的分支名称jobs:serverless-devs-cd:runs-on: ubuntu-lateststrategy:matrix:node-version: [16]steps:- uses: actions/checkout@v3- uses: pnpm/action-setup@v2.2.4with:version: 7- name: Use Node.js ${{ matrix.node-version }}uses: actions/setup-node@v3with: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 deployrun: 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引入将显著提升整个部署的速度。
Vue - 使用 腾讯云SCF部署Vue项目（支持GitHub Action）相关推荐
- vue基于腾讯云cos部署
vue部署于腾讯云cos 文章目录 vue部署于腾讯云cos 原理 cos对象存储 cos使用配置准备 cos辅助工具 npm插件 scp2 ~~cos-nodejs-sdk-v5~~(不推荐) 项目 ...
- 腾讯云服务器部署python项目（阿里云通用）
腾讯云服务器宝塔面板部署python项目(阿里云通用) 老师留的一项web作业完成的时候踩了很多坑,所以出个教程,大家一起学习进步. ## 购买云服务器 查看了腾讯云和阿里云的学生服务器的相关活动,为 ...
- 使用腾讯云 SCF 云函数压缩 COS 对象存储文件
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯云Serverless团队 在使用腾讯云 COS 对象存储的过程中,我们经常有想要把整个 Bucket 打包下载的需求,但是 C ...
- php项目部署在腾讯云服务器,腾讯云服务器部署
腾讯云服务器部署,我们以CentOS系统为例进行说明,其它系统类同 # 一键安装PHP运行环境 我们使用 oneinstack 一键安装包进行安装,oneinstack的官网地址是:https://o ...
- 申请教育邮箱和使用微软 OneDrive API 和腾讯云 SCF 免费搭建个人网盘
参考注册地址 注册的学校是(Red Rocks Community College官网)注册申请时需要用到 参考注册地址2 国西南学院(Southwestern College) 为什么要申请教育邮箱 ...
- 13.云服务器部署springboot项目
标题: 云服务器实战模拟网站被DDOS攻击?到底应该如何防御? 课程内容:1.云服务器部署项目 被人攻击了怎么办?2.DNS是如何解析域名的?3.一级.二级.三级域名区别4.什么是DNS轮询策略?如何 ...
- 云服务器部署springboot项目
相关概念 物理机器 -----项目 1万 专线(公网的ip---固定ip) 100兆 3万 家用带宽与专线区别? 家用带宽 电信 2000/年 1000兆 上行/下行 不对等 下载1000兆 上 ...
- sha256算法_腾讯云提供免费证书已支持使用ECC算法 大幅度节省证书流量
目前大多数网站使用的都是基于RSA非对称加密算法签发的数字证书,而在部署加密协议后服务器开销亦会增加. 对大型网站而言如果有能够降低服务器开销的方法那自然也得用上,所以现在很多网站也开始使用ECC数字 ...
- 又到了上云时刻啦！！！阿里云 Docker部署SpringBoot项目 方便测试的部署方式
又到了上云时刻啦!!!阿里云 Docker部署SpringBoot项目 方便测试的部署方式 部署思路: 具体步骤: 1.打成jar 2.上传到服务器 3.启动JDK容器 4.进入JDK 容器 启动 项 ...
最新文章
- cordova在IOS初次运行，loading加载很久的解决办法
- 面试官：线程顺序执行,这么多答案你都答不上来？
- app调html页面,app界面管理（风格色调）.html
- ubuntu下clion软件连接boost库文件
- centos7 修改为任意网卡名_VirtualBox虚拟机双网卡配置实现与本机互通并上网
- C#软件授权、注册、加密、解密模块源码解析并制作注册机生成license
- python全栈学习--django基础入门
- web前端-浏览器兼容性处理大全
- Xor Sum 2（位运算）
- python 培训 邹博
- Linux 文件颜色代表含义
- dismiss和remove_rule out与dismiss的区别
- 阿里云短信服务——短信发送验证码
- 使用VS2012进行单元测试
- 办公软件不能打印能打印测试页,excel2010无法打印的解决方法
- 2022最新最全的pytest配置文件pytest.ini
- 计算机网络第一章-概叙 思维导图
- Scrapy 简易爬取Boss直聘 可设定city job 爬取工作到excel或mysql中
- 少儿C++快乐编程网络教程
- python如何打包，实现pip install