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


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


执行完成后如下图所示


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


参考资料



相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
2月前
|
人工智能 运维 Serverless
函数计算 × MSE Nacos : 轻松托管你的 MCP Server
本文将通过一个具体案例,演示如何基于 MCP Python SDK 开发一个标准的 MCP Server,并将其部署至函数计算。在不修改任何业务代码的前提下,通过控制台简单配置,即可实现该服务自动注册至 MSE Nacos 企业版,并支持后续的动态更新与统一管理。
592 46
|
4月前
|
运维 监控 Cloud Native
【云故事探索】NO.17:国诚投顾的云原生 Serverless 实践
国诚投顾携手阿里云,依托Serverless架构实现技术全面升级,构建高弹性、智能化技术底座,提升业务稳定性与运行效率。通过云原生API网关、微服务治理与智能监控,实现流量精细化管理与系统可观测性增强,打造安全、敏捷的智能投顾平台,助力行业数字化变革。
【云故事探索】NO.17:国诚投顾的云原生 Serverless 实践
|
4月前
|
运维 监控 Cloud Native
【云故事探索】NO.17:国诚投顾的云原生 Serverless 实践
通过与阿里云深度合作,国诚投顾完成了从传统 ECS 架构向云原生 Serverless 架构的全面转型。新的技术架构不仅解决了原有系统在稳定性、弹性、运维效率等方面的痛点,还在成本控制、API 治理、可观测性、DevOps 自动化等方面实现了全方位升级。
|
8月前
|
存储 运维 Serverless
千万级数据秒级响应!碧桂园基于 EMR Serverless StarRocks 升级存算分离架构实践
碧桂园服务通过引入 EMR Serverless StarRocks 存算分离架构,解决了海量数据处理中的资源利用率低、并发能力不足等问题,显著降低了硬件和运维成本。实时查询性能提升8倍,查询出错率减少30倍,集群数据 SLA 达99.99%。此次技术升级不仅优化了用户体验,还结合AI打造了“一看”和“—问”智能场景助力精准决策与风险预测。
727 69
|
8月前
|
Cloud Native Serverless 流计算
云原生时代的应用架构演进:从微服务到 Serverless 的阿里云实践
云原生技术正重塑企业数字化转型路径。阿里云作为亚太领先云服务商,提供完整云原生产品矩阵:容器服务ACK优化启动速度与镜像分发效率;MSE微服务引擎保障高可用性;ASM服务网格降低资源消耗;函数计算FC突破冷启动瓶颈;SAE重新定义PaaS边界;PolarDB数据库实现存储计算分离;DataWorks简化数据湖构建;Flink实时计算助力风控系统。这些技术已在多行业落地,推动效率提升与商业模式创新,助力企业在数字化浪潮中占据先机。
460 12
|
10月前
|
Kubernetes 监控 Serverless
基于阿里云Serverless Kubernetes(ASK)的无服务器架构设计与实践
无服务器架构(Serverless Architecture)在云原生技术中备受关注,开发者只需专注于业务逻辑,无需管理服务器。阿里云Serverless Kubernetes(ASK)是基于Kubernetes的托管服务,提供极致弹性和按需付费能力。本文深入探讨如何使用ASK设计和实现无服务器架构,涵盖事件驱动、自动扩展、无状态设计、监控与日志及成本优化等方面,并通过图片处理服务案例展示具体实践,帮助构建高效可靠的无服务器应用。
|
11月前
|
负载均衡 Serverless 持续交付
云端问道9期实践教学-省心省钱的云上Serverless高可用架构
详细介绍了云上Serverless高可用架构的一键部署流程
218 10
|
12月前
|
Serverless 开发工具 开发者
活动实践 | 西游再现,函数计算一键部署 Flux 超写实文生图模型部署
这些图片展示了阿里巴巴云开发者生态的多个方面,包括开发工具、技术文档、社区交流、培训认证等内容,旨在为开发者提供全方位的支持和服务。
|
12月前
|
人工智能 Serverless API
尽享红利,Serverless构建企业AI应用方案与实践
本次课程由阿里云云原生架构师计缘分享,主题为“尽享红利,Serverless构建企业AI应用方案与实践”。课程分为四个部分:1) Serverless技术价值,介绍其发展趋势及优势;2) Serverless函数计算与AI的结合,探讨两者融合的应用场景;3) Serverless函数计算AIGC应用方案,展示具体的技术实现和客户案例;4) 业务初期如何降低使用门槛,提供新用户权益和免费资源。通过这些内容,帮助企业和开发者快速构建高效、低成本的AI应用。
425 12

热门文章

最新文章

相关产品

  • 函数计算