关于云开发:一键部署这样搭建一个文档网站真的很简单

本文由贝壳找房的前端工程师刘成帅（Jacob）带来，文中介绍了如何使用 云开发 CloudBase，免服务器、免域名疾速搭建集体站点的形式。一起学习吧~

前言

最近笔者在温习 JavaScript 基础知识，刚看完《JavaScript 高级程序设计（第四版）》，想再找一些优良代码库坚固一下学到的内容，自然而然的就想到了 Lodash。

此库在笔者公司使用率极高，因而想深入研究下源码并输入系列剖析文章。而线上大多源码剖析大多都是本人搭建的文档网站，于是就到了这篇文章的主题，疾速搭建一个文档网站。

其实笔者是有一个服务器的，然而服务器的确带宽无限，再加上还得本人配置 NGINX、GitHub Action 以及 https 证书等内容。

很巧看到了云开发 CloudBase 服务，能够疾速搭建动态网站，如果你没有域名的话会主动调配一个域名，也能够很不便地申请并配置 https 证书，如果搭配 GitHub Action 应用的话能够说是齐全不必思考服务器保护的内容了。

接下来就来讲一下如何搭建以及部署。

搭建及部署

本文是以 VuePress 为例进行搭建部署，VitePress、Next、Docsify 等部署大同小异。

我的项目初始化

1 . 装置 CLI

npm install -g @cloudbase/cli@latest

2 . 初始化一个利用

tcb new cloudbase-test vuepress

应用该 CLI 是须要进行登录的，如果 CLI 检测到你以后没有登录的话会主动关上浏览器跳转到腾讯云登录页面，登录胜利后返回命令行，持续下一步操作：

接下来抉择你认为适合的一个服务器地点，在这里我抉择上海。

接下来会抉择关联环境，如果你以后没有环境的话可间接抉择「创立新环境」，CLI 会主动关上浏览器跳转到「创立新环境」页面，创立新环境如下图，在这里我抉择应用 VuePress 模板进行创立：

抉择实现后点击下一步即可：

创立胜利后返回命令行，会显示正在初始化环境，稍等几分钟就能够间接创立我的项目。创立胜利后会生成以下目录构造的我的项目：

├── README.md
├── cloudbaserc.json
├── guides
│   └── README.md
└── package.json

我的项目部署

1 . 装置依赖

npm i

2 . 构建部署

npm run deploy

3 . 部署胜利

执行 npm run deploy 稍等片刻之后即可部署胜利，命令行会返回一个拜访域名，笔者的为：https://cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/，点击即可拜访示例网站，如下：

到这里为止，其实部署工作就算是完结了，无需本人配置 NGINX 等简单繁琐的操作，这就是云服务的魅力，同时该服务按量计费，对于笔者来说费用能够说是非常低了。

然而，仅此还不够，咱们要配置 GitHub Action 之后，能力算齐全撒手部署这件事，做到齐全自动化，将日常工作精力专一于文档编写就能够了。

GitHub Action 配置

如果初始化了一个我的项目的话，会看到我的项目中有一个 cloudbaserc.json 文件，该文件为 CloudBase 配置文件，文件中有一个 envId 配置项，这属于 敏感信息 ，请留神 千万不要上传到 GitHub 中，将该配置信息从 cloudbaserc.json 中 删除！

既然不能上传的话，咱们应该如何配置呢，答案很简略，应用 GitHub secret 即可。须要在 腾讯云控制台 新建秘钥，新建实现后，关上你的 GitHub 仓库进行如下设置：

创立 ENVID、SECRETID、SECRETKEY 三条 secret，其中 ENVID 在 利用列表中可见，配置实现后如下所示：

接下来在我的项目的 .github/workflows 目录下创立 deploy.yml 文件，内容如下：

name: 自动化部署

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Deploy to Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2
        with:
          secretId: ${{secrets.SECRETID}}
          secretKey: ${{secrets.SECRETKEY}}
          envId: ${{secrets.ENVID}}

而后将你的我的项目代码 push 到 GitHub 就能够实现自动化部署了，之后就能够分心进行文档编写，无需关怀服务器保护这样的事件了。

总结

像云开发 CloudBase 这样的云服务能够说真的不便了很多，能够间接部署本人的动态博客或者文档等站点，一键部署，无需运维，岂不美哉。

后面说到笔者最近正在写 lodash 源码解析，地址是：lodash.lcs.show。

GitHub 地址为: https://github.com/jacob-lcs/lodash-source-code-analysis，当然还处于刚开始的阶段，大家有趣味的话欢送关注。

产品介绍

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、主动弹性扩缩的后端云服务，蕴含计算、存储、托管等 serverless 化能力，可用于云端一体化开发多种端利用（小程序，公众号，Web 利用，Flutter 客户端等），帮忙开发者对立构建和治理后端服务和云资源，防止了利用开发过程中繁琐的服务器搭建及运维，开发者能够专一于业务逻辑的实现，开发门槛更低，效率更高。
开明云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004
技术交换群、最新资讯关注微信公众号【腾讯云云开发】