基于serverless快速部署前端项目到腾讯云
腾讯云 COS 组件,可以快速部署静态网站页面到对象存储 COS 中,并生成域名供访问。
安装
首先要安装 serverless
组件
npm install -g serverless
在项目的根目录下生成配置文件
touch serverless.yml
<a name="YpT8f"></a>
配置
在 serverless.yml
文件中进行如下配置
# serverless.yml
myWebsite:
component: '@serverless/tencent-website'
inputs:
code:
src: build
hook: npm run build
index: index.html
error: index.html
region: ap-guangzhou
bucketName: my-bucket
部署
如您的账号未登陆或注册腾讯云,您可以直接通过 微信
扫描命令行中的二维码进行授权登陆和注册。
通过 sls
命令进行部署,并可以添加 --debug
参数查看部署过程中的信息(对于Windows用户来说, sls
命令可能无法使用,在使用时需要使用完整的 serverless
命令)
$ sls --debug
DEBUG ─ Resolving the template's static variables.
DEBUG ─ Collecting components from the template.
DEBUG ─ Downloading any NPM components found in the template.
DEBUG ─ Analyzing the template's components dependencies.
DEBUG ─ Creating the template's components graph.
DEBUG ─ Syncing template state.
DEBUG ─ Executing the template's components graph.
DEBUG ─ Starting Website Component.
DEBUG ─ Preparing website Tencent COS bucket my-bucket-1300415943.
DEBUG ─ Deploying "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
DEBUG ─ "my-bucket-1300415943" bucket was successfully deployed to the "ap-guangzhou" region.
DEBUG ─ Setting ACL for "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
DEBUG ─ Ensuring no CORS are set for "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
DEBUG ─ Ensuring no Tags are set for "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
DEBUG ─ Configuring bucket my-bucket-1300415943 for website hosting.
DEBUG ─ Uploading website files from /Users/dfounderliu/Desktop/temp/code/src to bucket my-bucket-1300415943.
DEBUG ─ Starting upload to bucket my-bucket-1300415943 in region ap-guangzhou
DEBUG ─ Uploading directory /Users/dfounderliu/Desktop/temp/code/src to bucket my-bucket-1300415943
DEBUG ─ Website deployed successfully to URL: https://my-bucket-1300415943.cos-website.ap-guangzhou.myqcloud.com.
myWebsite:
url: https://my-bucket-1300415943.cos-website.ap-guangzhou.myqcloud.com
env:
2s › myWebsite › done
移除
通过以下命令移除项目
$ sls remove --debug
DEBUG ─ Flushing template state and removing all components.
DEBUG ─ Starting Website Removal.
DEBUG ─ Removing Website bucket.
DEBUG ─ Removing files from the "my-bucket-1300415943" bucket.
DEBUG ─ Removing "my-bucket-1300415943" bucket from the "ap-guangzhou" region.
DEBUG ─ "my-bucket-1300415943" bucket was successfully removed from the "ap-guangzhou" region.
DEBUG ─ Finished Website Removal.
3s › myWebsite › done
账号配置(可选)
当前默认支持 CLI 扫描二维码登录,如您希望配置持久的环境变量/秘钥信息,也可以本地创建 .env
文件
$ touch .env # 腾讯云的配置信息
在 .env
文件中配置腾讯云的 SecretId 和 SecretKey 信息并保存<br />
如果没有腾讯云账号,可以在此注册新账号。
如果已有腾讯云账号,可以在API 密钥管理中获取 SecretId
和SecretKey
.
# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123
配置文件详解
一个完整的配置文件如下所示
myWebsite:
component: '@serverless/tencent-website'
inputs:
code:
root: ./
src: ./src
hook: npm run build
index: index.html
error: index.html
region: ap-guangzhou
bucketName: my-bucket
protocol: http
hosts:
- host: abc.cn
- host: abc.com
fullUrl: on
cache:
- type: 0
rule: all
time: 1000
- type: 0
rule: all
time: 1000
cacheMode: simple
refer:
- type: 1
list:
- 'qq.baidu.com'
- '*.baidu.com'
accessIp:
type: 1
list:
- '1.2.3.4'
- '2.3.4.5'
https:
certId: 123
cert: 123
privateKey: 123
http2: off
httpsType: 2
forceSwitch: -2
env:
API_URL: https://api.com
cors:
- allowedOrigins:
- '*.tencent.com'
- '*.qcloud.com'
allowedMethods:
- PUT
- POST
- DELETE
- HEAD
allowedHeaders: '*'
maxAgeSeconds: 0
- allowedOrigins:
- '*'
allowedMethods:
- GET
allowedHeaders: '*'
maxAgeSeconds: 0
主要参数说明
参数 | 必须/可选 | 默认 | 描述 |
---|---|---|---|
code | 必须 | 网站代码信息 | |
region | 可选 | ap-guangzhou | 存储桶所属地域,默认为广州 |
bucketName | 必须 | 存储桶名称,如果您不添加AppId后缀,则会自动为您添加,后缀不能大写 | |
protocol | 可选 | https | 协议:https 或者 http |
env | Optional | Environment variables to include in a 'env.js' file with your uploaded code. | |
cors | Optional | Cross-Origin Resource Sharing | |
hosts | Optional | Add domain |
代码参数说明
参数 | 必须/可选 | 默认 | 描述 |
---|---|---|---|
root | 可选 | 您的网站项目的根文件夹。 默认为当前工作目录 | |
src | 必须 | 包含您构建的工件的要上传的文件夹 | |
hook | 可选 | 在上传之前对代码进行构建/测试/执行任何操作的钩子 | |
index | 可选 | index.html | 索引页 |
error | 可选 | error.html | 错误页面_(对于使用前端框架构建的应用程序来说,需要将此参数设置为索引页,否则在页面刷新或重定向是会出现问题)_ |
来源:安徽网站优化
基于serverless快速部署前端项目到腾讯云的更多相关文章
- 部署Flask项目到腾讯云服务器CentOS7
部署Flask项目到腾讯云服务器CentOS7 安装git yum install git 安装依赖包 支持SSL传输协议 解压功能 C语言解析XML文档的 安装gdbm数据库 实现自动补全功能 sq ...
- 基于云原生DevOps服务自动化部署前端项目学习总结
本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发 ...
- 使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架
一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是 ...
- 记基于docker+gunicorn部署sanic项目遇到的很多很多坑
前言: 最近有个项目需要上线,是python中sanic网络异步框架写的,并且要求使用docker+nginx来部署项目实现负载均衡,于是乎百度了sanic项目部署,基本上都是基于docker+gun ...
- docker自动化部署前端项目实战一
docker自动化部署前端项目实战一 本文适用于个人项目,如博客.静态文档,不涉及后台数据交互,以部署文档为例. 思路 利用服务器node脚本,监听github仓库webhook push事件触发po ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- Tomcat+Nginx+Linux+Mysql部署豆瓣TOP250的项目到腾讯云服务器
写在前面 因为前面有写过一篇关于豆瓣的top250的电影的可视化展示项目,你可以移步http://blog.csdn.net/liuge36/article/details/78607955了解这个项 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 简单的利用nginx部署前端项目
网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云 ...
随机推荐
- C#获取图片的某个区域
/// <summary> /// http://www.cnblogs.com/KissKnife/archive/2007/10/13/923352.ht ...
- 浅谈Python之sys.argv
(1)sys.argv是什么 sys模块为进入解释器维护或使用的变量,以及与解释器相关的函数提供了途径.sys.argv在脚本程序中扮演了这样一个角色:将命令行输入的参数作为一个list传入脚本程序, ...
- Python 删除文件与文件夹
版权所有,未经许可,禁止转载 章节 Python 介绍 Python 开发环境搭建 Python 语法 Python 变量 Python 数值类型 Python 类型转换 Python 字符串(Str ...
- Selenium2Library:Get Matching Xpath Count用法
Name:Get Matching Xpath CountSource:Selenium2Library <test library>Arguments:[ xpath ]Returns ...
- js模式-观察者模式
// 主题,接收状态变化,触发每个观察者 class Subject { constructor() { this.state = 0 this.observers = [] } getState() ...
- Python LMDB的使用
在python中使用lmdb linux中,可以使用指令 pip install lmdb 安装lmdb包. ---- lmdb 数据库文件生成 增 改 删 查 1.生成一个空的lmdb数据库文件 # ...
- windows LARGE_INTEGER 错误码输出格式
如果是负数,I32X 版权声明:本文为博主原创文章,未经博主允许不得转载.
- PHP常用的数学函数和字符串函数
PHP常用函数总结 数学函数 1.abs(): 求绝对值 $abs = abs(-4.2); //4.2 数字绝对值数字 2.ceil(): 进一法取整 echo ceil(9.999); // 10 ...
- Beyond Compare 文件对比工具的使用
Beyond Compare 文件对比工具的使用 Beyond Compare 工具下载地址: http://www.onlinedown.net/soft/633850.htm 本文下载地址:E:\ ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习:语句
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...