Serverless实践-静态网站托管
Serverless实践-静态网站托管
超多图预警!!!
本文旨在帮助不懂运维/网络/服务器知识的小白,在不租用云服务器的情况下,实现Web站点的上线部署
适合边看文章边跟着动手做
包含使用Github Action实现持续集成的步骤,绑定自定义域名等等
该手把手Serverless实践系列预计会出几篇包含静态站点,云函数,后端服务等等
如有表述不清,内容错误等还请评论区斧正
准备工作
这里采用腾讯云提供的Serveless服务
very very very cheap === free
创建云开发环境
进入控制台面板,通常在首页右上角
然后在左上角的云产品列表中找到云开发CloudBase
然后你能看到如下的界面
点击新建,可以看见有很多模板可供选择,咱们这里选择Vue应用,当然你也可以选择其它模板,我们主要是获得其生成的一个cloudbaserc.json
文件,后文会详细介绍这个配置文件
填写环境名称,选择按量计费(非常非常便宜),勾上同意,能勾上免费就勾上免费资源
填写完成后点击下一步
点击立即开通
接下来你能在当前页面看到刚刚创建的应用,记住这个环境id 后面会用上
赖心等待几分钟就创建完成了
线上访问地址
点击创建完成的卡片
选择左侧菜单中的静态网站托管
这里能看到模板项目部署在线上的生产环境代码与提供的线上域名
例如图中的:http://kerno-photo-0got9tjdb1cb34fe-1256505457.tcloudbaseapp.com/vue/
模板的源代码
所有的模板源代码均在Github:CloudBase Templates
咱们上面的Vue项目模板源码在此处
在项目源码中我们就可以看到cloudbaserc.json文件
cloudbaserc.json配置文件示例
完整的配置项示例参考$schema
配置文件需要自己修改/关注的字段如下:
- envId:环境id,上文有说到获取的位置
- region:环境所在地区,上海(ap-shanghai),广州(ap-guangzhou)
- framework
- name:应用名称
- plugins/client/inputs
- installCommand:安装依赖的指令
- buildCommand:构建项目指令
- outputPath:用于部署的本地静态文件目录
- cloudPath:线上访问的基础路径
在咱们项目的根目录下创建这个cloudbaserc.json
文件
最简单项目
目录如下
.
├── cloudbaserc.json
└── index.html
这里用到的最简单的cloudbaserc.json
如下
{
"version": "2.0",
"envId": "kerno-photo-0got9tjdb1cb34fe",
"region": "ap-shanghai",
"$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
"functionRoot": "cloudfunctions",
"framework": {
"name": "kerno-photo-web",
"plugins": {
"client": {
"use": "@cloudbase/framework-plugin-website",
"inputs": {
"outputPath": "/",
"cloudPath": "/"
}
},
"auth": {
"use": "@cloudbase/framework-plugin-auth",
"inputs": {
"configs": [
{
"platform": "NONLOGIN",
"status": "ENABLE"
}
]
}
}
}
}
}
运用了构建工具的项目
推荐的cloudbaserc.json
内容如下
{
"version": "2.0",
"envId": "kerno-photo-0got9tjdb1cb34fe",// 环境id
"region": "ap-shanghai", // 环境所在地区
"$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
"functionRoot": "cloudfunctions",
"framework": {
"name": "kerno-photo-web",// 应用名称
"plugins": {
"client": {
"use": "@cloudbase/framework-plugin-website",
"inputs": {
"installCommand": "yarn install --prefer-offline --no-audit --progress=false", // 安装依赖的指令
"buildCommand": "npm run build", // 构建项目指令
"outputPath": "dist", // 用于部署的静态文件目录
"cloudPath": "/", // 线上的基础路径
"envVariables": {
"VUE_APP_ENV_ID": "{{env.ENV_ID}}"
}
}
},
"auth": {
"use": "@cloudbase/framework-plugin-auth",
"inputs": {
"configs": [
{
"platform": "NONLOGIN",
"status": "ENABLE"
}
]
}
}
}
}
}
部署上线
前置环境
- Node.js
确保电脑上有Node.js环境,没有可参考菜鸟教程:Node.js 安装
打开你的终端工具查看是否拥有Node环境
node -v
@cloudbase/cli
安装@cloudbase/cli工具
npm install -g @cloudbase/cli
验证是否安装完成
tcb -v
部署
例项目目录:
.
├── cloudbaserc.json
└── index.html
在项目跟路径依次执行如下指令:
登录
tcb login
部署
tcb framework deploy
此时静静等待几秒,出现此图说明部署成功
示例访问地址:https://kerno-photo-0got9tjdb1cb34fe-1256505457.tcloudbaseapp.com/
可以看到我们的Hello World已经上去了
到此从0-1的创建应用到部署上线的流程都走完了
后续将会补充一些额外的内容,需要有一些相关知识的基础
绑定自定义域名
申请SSL证书
首先为域名申请SSL证书
选择免费的
然后下一步填写必要的信息
选择DNS验证
按要求添加一条解析规则
我这里域名是在阿里云上购买的
按要求添加解析
添加完成后,点击查询域名验证状态即可,申请完成后如下图所示
绑定域名
在静态网站托管tab 基础配置中添加自定义域名
弹窗中输入刚刚申请证书用的域名
根据要求添加CName
上述添加解析步骤一样
到此为止自定义域名就搞定了
咱访问一下试试:photo.kerno.sugarat.top
SPA单页应用的额外配置
需要添加一条404的重定向配置,配置地方如下
接入Github Action持续集成
创建main.yml
根目录下创建.github/workflows/main.yml
文件
.github
└── workflows
└── main.yml
main.yml文件内容如下
# This is a basic workflow to help you get started with Actions
name: prod-CI
# Controls when the action will run.
on:
# Triggers the workflow on push or pull request events but only for the master branch
push:
branches: [ main ] # push到main分支上时触发
pull_request:
types: [ assigned ]
branches: [ main ] # 合并pr到main分支上时触发
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "build"
build:
# The type of runner that the job will run on
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout@v2
# 配置rsa密钥自动登陆
- name: Deploy to Tencent CloudBase
uses: TencentCloudBase/cloudbase-action@v2
with:
secretId: ${{secrets.SECRET_ID}}
secretKey: ${{secrets.SECRET_KEY}}
envId: ${{secrets.ENV_ID}}
仓库中配置Secrets
在仓库的Settings->Secrets 面板中新建secret
添加如下三个:
添加完成后如下图所示
推送配置文件
接下来只需要将main.yml文件推送到Github上即可
git add .github
git commit -m "chore: 添加main.yml文件"
git push
查看Action进度
此时打开仓库就能看见commit 信息旁边有个点
在Action面板中也能看见任务的执行状态,点击可查看详细进度
执行完成后如下图所示
参考资料
Serverless实践-静态网站托管的更多相关文章
- 5分钟Serverless实践:构建无服务器的图片分类系统
前言 在过去“5分钟Serverless实践”系列文章中,我们介绍了如何构建无服务器API和Web应用,从本质上来说,它们都属于基于APIG触发器对外提供一个无服务器API的场景.现在本文将介绍一种新 ...
- 5分钟Serverless实践 | 构建无服务器图片鉴黄Web应用
Serverless是什么 Serverless中文译为“无服务器”,最早可以追溯到2012年Ken Fromm发表的<Why The Future Of Software And Apps I ...
- [转]Serverless实践
转载的,原文: https://www.cnblogs.com/middleware/p/9470533.html ------------------------------------------ ...
- 5分钟Serverless实践 | 构建无服务器的敏感词过滤后端系统
前言 在上一篇“5分钟Serverless实践”系列文章中,我们介绍了什么是Serverless,以及如何构建一个无服务器的图片鉴黄Web应用,本文将延续这个话题,以敏感词过滤为例,介绍如何构建一个无 ...
- 云开发静态网站托管现已支持 Angular 应用
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...
- 从零入门 Serverless | 在线应用的 Serverless 实践
作者 | 唐慧芬(黛忻) 阿里云产品专家 导读:毫无疑问,Serverless 能够在效率和成本上给用户带来巨大收益.那具体到落地又应该怎么做呢?本文就给大家详细解读 Serverless 的落地实践 ...
- AI 事件驱动场景 Serverless 实践
作者 | 李鹏(元毅) 来源 | Serverless 公众号 一.事件驱动框架:Knative Eventing 事件驱动是指事件在持续事务管理过程中,进行决策的一种策略.可以通过调动可用资源执行相 ...
- 飞猪基于 Serverless 的云+端实践与思考
作者 | 王恒飞(承荫) 本文整理自飞猪旅行前端技术专家--王恒飞(承荫)在[阿里云 Serverless Developer Meetup 上海站]上的分享.点击查看直播回放:https://dev ...
- 如何在云开发静态托管中使用Hugo
如何在云开发静态托管中使用Hugo 介绍 hugo是一个用Go编写的静态站点生成器,由于具有丰富的主题资源和有比较丰富的主题资源和较好的生成速度. 云开发(CloudBase)是一款云端一体化的产品方 ...
随机推荐
- ch1_6_3求解移动字符串问题
import java.util.Scanner; public class ch1_6_3求解移动字符串问题 { public static void main(String[] args) { / ...
- ch1_6_7求解数字排序问题
import java.util.Arrays; import java.util.Comparator; import java.util.HashMap; import java.util.Sca ...
- Android Studio 之 用 Drawable resource file 美化 Button 样式
shape •新建 Drawable resource file 点击 app/src/main/res 找到 drawable 文件夹,右击->New->Drawable Resourc ...
- CVE-2020-1472 Zerologon
CVE-2020-1472 Zerologon 漏洞简介 CVE-2020-1472是继MS17010之后一个比较好用的内网提权漏洞,影响Windows Server 2008R 2至Windows ...
- 以绝对优势立足:从CDN和云存储来聊聊云生态的崛起
以绝对优势立足:从CDN和云存储来聊聊云生态的崛起 前面几期文章我们介绍了混合云模式,以及面向应用层的云架构解决方案的Spring Cloud.接下来,我们就以蘑菇街的两个具体案例,来分享一下基于混合 ...
- Golang+Protobuf+PixieJS 开发 Web 多人在线射击游戏(原创翻译)
简介 Superstellar 是一款开源的多人 Web 太空游戏,非常适合入门 Golang 游戏服务器开发. 规则很简单:摧毁移动的物体,不要被其他玩家和小行星杀死.你拥有两种资源 - 生命值(h ...
- docker部署skywalking
https://www.cnblogs.com/xiao987334176/p/13530575.html
- 解决JDK9以上的非法反射访问警告
1 问题描述 JDK9以上很多库都有这种非法反射访问的警告,比如protostuff: 解决方法两个: JDK降级 添加JVM参数 2 原因 降到JDK8能解决以上问题. 但是这不是本文的重点. 先说 ...
- 条件分支if与else的用法小结
条件分支 今天写一写条件分支结构(if.....else),在其他的语言中条件分支结构其实不止有if --else--结构,还有swich语句(例如在C语言,Java语言).但是python中只有if ...
- Vue.js入门及其常用指令
一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...