Serverless实践-静态网站托管

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 本文旨在帮助不懂运维/网络/服务器知识的小白,在不租用云服务器的情况下,实现Web站点的上线部署适合边看文章边跟着动手做包含使用Github Action实现持续集成的步骤,绑定自定义域名等等该手把手Serverless实践系列预计会出几篇包含静态站点,云函数,后端服务等等如有表述不清,内容错误等还请评论区斧正

准备工作


这里采用腾讯云提供的Serveless服务

very very very cheap === free


创建云开发环境


进入控制台面板,通常在首页右上角


网络异常,图片无法展示
|


然后在左上角的云产品列表中找到云开发CloudBase


网络异常,图片无法展示
|


然后你能看到如下的界面


网络异常,图片无法展示
|


点击新建,可以看见有很多模板可供选择,咱们这里选择Vue应用,当然你也可以选择其它模板,我们主要是获得其生成的一个cloudbaserc.json文件,后文会详细介绍这个配置文件


网络异常,图片无法展示
|


填写环境名称,选择按量计费(非常非常便宜),勾上同意,能勾上免费就勾上免费资源


填写完成后点击下一步


网络异常,图片无法展示
|


点击立即开通


网络异常,图片无法展示
|


接下来你能在当前页面看到刚刚创建的应用,记住这个环境id 后面会用上


网络异常,图片无法展示
|


赖心等待几分钟就创建完成了


线上访问地址


点击创建完成的卡片


网络异常,图片无法展示
|


选择左侧菜单中的静态网站托管


网络异常,图片无法展示
|


这里能看到模板项目部署在线上的生产环境代码与提供的线上域名


例如图中的: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


此时静静等待几秒,出现此图说明部署成功


网络异常,图片无法展示
|


示例访问地址: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面板中也能看见任务的执行状态,点击可查看详细进度


网络异常,图片无法展示
|


执行完成后如下图所示


网络异常,图片无法展示
|


参考资料



相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
1月前
|
负载均衡 Serverless 持续交付
云端问道9期实践教学-省心省钱的云上Serverless高可用架构
详细介绍了云上Serverless高可用架构的一键部署流程
57 10
|
2月前
|
Serverless 开发工具 开发者
活动实践 | 西游再现,函数计算一键部署 Flux 超写实文生图模型部署
这些图片展示了阿里巴巴云开发者生态的多个方面,包括开发工具、技术文档、社区交流、培训认证等内容,旨在为开发者提供全方位的支持和服务。
|
2月前
|
存储 弹性计算 关系型数据库
活动实践 | 告别资源瓶颈,函数计算驱动多媒体文件处理测评
本方案介绍了一种高效处理文件的方法,适用于企业办公和社交媒体应用。通过阿里云的函数计算、对象存储OSS和轻量消息队列,实现文件的异步处理,如格式转换和水印添加,有效减轻了核心应用的负担,提高了业务稳定性和资源利用率。方案包括云服务器ECS、云数据库RDS、OSS存储等组件,支持快速部署和资源清理。
|
3月前
|
监控 Serverless 云计算
探索Serverless架构:开发实践与优化策略
本文深入探讨了Serverless架构的核心概念、开发实践及优化策略。Serverless让开发者无需管理服务器即可运行代码,具有成本效益、高可扩展性和提升开发效率等优势。文章还详细介绍了函数设计、安全性、监控及性能和成本优化的最佳实践。
|
3月前
|
弹性计算 算法 搜索推荐
活动实践 | 通过函数计算部署ComfyUI以实现一个AIGC图像生成系统
ComfyUI是基于节点工作流稳定扩散算法的新一代WebUI,支持高质量图像生成。用户可通过阿里云函数计算快速部署ComfyUI应用模板,实现个性化定制与高效服务。首次生成图像因冷启动需稍长时间,之后将显著加速。此外,ComfyUI允许自定义模型和插件,满足多样化创作需求。
|
3月前
|
弹性计算 自然语言处理 搜索推荐
活动实践 | 基于函数计算部署GPT-Sovits模型实现语音生成
通过阿里云函数计算部署GPT-Sovits模型,可快速实现个性化声音的文本转语音服务。仅需少量声音样本,即可生成高度仿真的语音。用户无需关注服务器维护与环境配置,享受按量付费及弹性伸缩的优势,轻松部署并体验高质量的语音合成服务。
|
3月前
|
运维 监控 Serverless
揭秘云计算中的Serverless架构:优势、挑战与实践
揭秘云计算中的Serverless架构:优势、挑战与实践
137 0
|
4月前
|
存储 Serverless API
打造你的专属语音助手,基于函数计算托管 CosyVoice 语音模型
今天分享一下,基于阿里云函数计算 FC 以及 CAP(云应用开发平台),极速托管专属的 CosyVoice 应用。并且我们提供了 API 调用方案以及镜像构建源码方便您根据自己的业务任意 DIY。
594 11
|
5月前
|
运维 Kubernetes 前端开发
拥抱Knative, 合思加速Serverless化演进实践
合思信息基于阿里云容器服务Knative, 实现Serverless化演进的最佳实践。
拥抱Knative, 合思加速Serverless化演进实践
|
6月前
|
弹性计算 关系型数据库 Serverless
函数计算驱动多媒体文件处理:高效、稳定与成本优化实践
本次测评的解决方案《告别资源瓶颈,函数计算驱动多媒体文件处理》展示了如何利用阿里云函数计算高效处理多媒体文件。文档结构清晰、内容详实,适合新客户参考。方案提供了一键部署与手动部署两种方式,前者简便快捷,后者灵活性高但步骤较多。通过部署,用户可体验到基于函数计算的文件处理服务,显著提升处理效率和系统稳定性。此外,测评还对比了应用内处理文件与函数计算处理文件的不同,突出了函数计算在资源管理和成本控制方面的优势。
22738 20

相关产品

  • 函数计算