Serverless实践-静态网站托管

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
函数计算FC,每月15万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 架构模式
相关文章
|
30天前
|
存储 Serverless API
打造你的专属语音助手,基于函数计算托管 CosyVoice 语音模型
今天分享一下,基于阿里云函数计算 FC 以及 CAP(云应用开发平台),极速托管专属的 CosyVoice 应用。并且我们提供了 API 调用方案以及镜像构建源码方便您根据自己的业务任意 DIY。
178 10
|
29天前
|
存储 Serverless API
打造你的专属语音助手,基于函数计算托管 CosyVoice 语音模型
打造你的专属语音助手,基于函数计算托管 CosyVoice 语音模型
|
2月前
|
运维 Kubernetes 前端开发
拥抱Knative, 合思加速Serverless化演进实践
合思信息基于阿里云容器服务Knative, 实现Serverless化演进的最佳实践。
拥抱Knative, 合思加速Serverless化演进实践
|
3月前
|
弹性计算 关系型数据库 Serverless
函数计算驱动多媒体文件处理:高效、稳定与成本优化实践
本次测评的解决方案《告别资源瓶颈,函数计算驱动多媒体文件处理》展示了如何利用阿里云函数计算高效处理多媒体文件。文档结构清晰、内容详实,适合新客户参考。方案提供了一键部署与手动部署两种方式,前者简便快捷,后者灵活性高但步骤较多。通过部署,用户可体验到基于函数计算的文件处理服务,显著提升处理效率和系统稳定性。此外,测评还对比了应用内处理文件与函数计算处理文件的不同,突出了函数计算在资源管理和成本控制方面的优势。
22712 19
|
2月前
|
缓存 前端开发 JavaScript
|
3月前
|
运维 Kubernetes Serverless
Serverless Argo Workflows荣获信通院标杆实践案例,引领大规模离线任务处理新方法
阿里云容器服务Serverless Argo Workflows大规模离线计算工作流平台荣获2024信通院Serveless实践标杆案例。本文介绍其应用场景、平台特性以及领域实践。
|
4月前
|
弹性计算 分布式计算 Serverless
全托管一站式大规模数据处理和分析Serverless平台 | EMR Serverless Spark 评测
【7月更文挑战第6天】全托管一站式大规模数据处理和分析Serverless平台 | EMR Serverless Spark 评测
23703 42
|
4月前
|
分布式计算 Java Serverless
EMR Serverless Spark 实践教程 | 通过 spark-submit 命令行工具提交 Spark 任务
本文以 ECS 连接 EMR Serverless Spark 为例,介绍如何通过 EMR Serverless spark-submit 命令行工具进行 Spark 任务开发。
388 7
EMR Serverless Spark 实践教程 | 通过 spark-submit 命令行工具提交 Spark 任务
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
65 0
|
3月前
|
机器学习/深度学习 Cloud Native Serverless
Serverless 架构问题之CNCF基金会托管的CloudEvents项目内容如何解决
Serverless 架构问题之CNCF基金会托管的CloudEvents项目内容如何解决
33 0

热门文章

最新文章

相关产品

  • 函数计算