Skip to content

腾讯云Serverless实践-静态网站托管

TIP

本文旨在帮助不懂运维/网络/服务器知识的小白,在不租用云服务器实现Web站点的上线部署

超多图预警!!!

包含使用Github Action实现持续集成的步骤,绑定自定义域名等等

该手把手Serverless实践系列预计会出几篇包含静态站点,云函数,后端服务等等

如有表述不清,内容错误等还请评论区斧正

准备工作

创建云开发环境

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

图片

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

图片

然后你能看到如下的界面

图片

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

图片

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

填写完成后点击下一步

图片

点击立即开通

图片

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

图片

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

线上访问地址

点击创建完成的卡片

图片

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

图片

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

例如图中的:http://kerno-photo-0got9tjdb1cb34fe-1256505457.tcloudbaseapp.com/vue/

模板的源代码

所有的模板源代码均在Github:CloudBase Templates

咱们上面的Vue项目模板源码在此处

在项目源码中我们就可以看到cloudbaserc.json文件

cloudbaserc.json配置文件示例

配置文件需要自己修改的字段如下:

  • envId:环境id,上文有说到获取的位置
  • region:环境所在地区,上海(ap-shanghai),广州(ap-guangzhou)
  • framework
    • name:应用名称
    • plugins/client/inputs
      • installCommand:安装依赖的指令
      • buildCommand:构建项目指令
      • outputPath:用于部署的本地静态文件目录
      • cloudPath:线上访问的基础路径

在咱们项目的根目录下创建这个cloudbaserc.json文件

最简单项目

目录如下

sh
.
├── cloudbaserc.json
└── index.html
.
├── cloudbaserc.json
└── index.html

这里用到的最简单的cloudbaserc.json如下

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"
              }
            ]
          }
        }
      }
    }
  }
{
    "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内容如下

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"
              }
            ]
          }
        }
      }
    }
  }
{
    "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环境

sh
node -v
node -v

图片

@cloudbase/cli

安装@cloudbase/cli工具

sh
npm install -g @cloudbase/cli
npm install -g @cloudbase/cli

验证是否安装完成

sh
tcb -v
tcb -v

图片

完整的配置项示例参考$schema

部署

例项目目录:

sh
.
├── cloudbaserc.json
└── index.html
.
├── cloudbaserc.json
└── index.html

在项目跟路径依次执行如下指令:

登录

sh
tcb login
tcb login

部署

sh
tcb framework deploy
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文件

sh
.github
└── workflows
    └── main.yml
.github
└── workflows
    └── main.yml

main.yml文件内容如下

yaml
# 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}}
# 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上即可

sh
git add .github

git commit -m "chore: 添加main.yml文件"

git push
git add .github

git commit -m "chore: 添加main.yml文件"

git push

查看Action进度

此时打开仓库就能看见commit 信息旁边有个点

图片

在Action面板中也能看见任务的执行状态,点击可查看详细进度

图片

执行完成后如下图所示

图片

参考资料

更新于: