鵝廠最新黑科技：兩分鐘一鍵遷移Github Pages

騰訊云云開發發表於2021-07-23
Github

今天我們非常榮幸地宣佈騰訊雲 CloudBase Webify （中文名：Web應用託管）正式上線，這是一個專為 Web 開發者打造的雲上開發、部署平臺，幫助開發者快速開發、預覽、部署自己的 Web 應用。

前往 Webify 快速開始頁面，選擇自己的程式碼倉庫，或者從現有的模板中，建立你的第一個 Web 應用。

一、Webify 想要解決什麼問題？

對於大多數前端開發者而言，網際網路的基礎設施也許不那麼友好。

例如，將一個前端專案從零開始釋出上線到公網，通常需要考慮到下面的事情：

  • 申請域名，修改DNS
  • 將靜態資源部署到伺服器，並配置 Nginx（或者放到物件儲存上）
  • 配置CDN
  • 配置 HTTPS 證照
  • 後續如果需要二次開發，還需要配置一套 CI/CD 工作流

除此之外，還有大量應用層面的問題：

  • 我的單頁面應用（SPA）要怎麼配置路由？
  • 我的 SSR 應用要怎麼部署？
  • 我用的框架能直接釋出到雲上嗎？
  • 我想用 Serverless 雲函式寫 HTTP API，要怎麼處理？

這些問題正是 Webify 想要解決的問題，我們期望為 Web 開發者提供一個專屬的平臺， 讓開發者免除以上來自基礎設施的煩惱，專注於 Coding，而不是管理基建。

二、Webify 提供怎樣的能力？

1、從 Git 託管平臺快速建立應用

Webify 支援從第三方程式碼託管平臺直接建立應用，目前支援 Github、Gitlab、Gitee碼雲三種平臺，後續我們也會放開支援更多的 Git 平臺。

點選此處，立刻建立你的第一個 Webify 應用

例如，很多開發者會使用 Hexo 框架搭建自己的個人部落格，並將部落格推送至 Github，使用 Github Pages 部署。

這些型別的個人部落格也可以直接一鍵匯入並部署到 Webify 上：

檢視 Demo：my-hexo-site-0g2fpeyz0f499162-1255679239.ap-shanghai.app.tcloudbase.com/

2、從模板快速建立應用

我們還為開發者提供了一系列模板，包括 Vue、React、Angular、Next.js、Gatsby.js、Docusaurus 等流行的 Web 框架。

開發者可以選取任意模板，然後使用模板建立一個新的程式碼倉庫：

隨後只需要把變更推送至程式碼倉庫，便可以自動觸發應用的重新構建和部署。

3、基於 Git 的持續釋出（CD）工作流

在 CloudBase Webify 中，每個應用都可以與一個 Git 程式碼倉庫繫結。繫結後，程式碼倉庫上相應分支的任何提交，都會觸發應用的構建及部署。

開發者可以基於此特性搭建自己的 Git 工作流：

例如，將應用與倉庫的 master 分支進行繫結，平時採用 dev 分支進行開發，那麼在釋出新版應用時，只需要將 dev 分支合入 master 分支，便可以全自動構建及釋出應用，無需任何手工流程，也無需整合任何第三方 CI/CD 系統。

4、域名與 CDN

Webify 為每個 Web 應用提供獨有的預設域名，預設域名以 .app.tcloudbase.com 為字尾，開發者可以使用預設域名直接訪問應用。

應用也支援繫結開發者自己的域名，在應用配置頁面中可以直接進行操作。

無論是預設域名還是繫結的自定義域名，均預設帶有 CDN 加速能力，最大程度加速 Web 應用的載入效能。

三、Webify 還有能力在籌劃中？

籌劃能力1：邊緣路由

對於單頁面應用（SPA）、服務端渲染（SSR）、Serverless 等較為複雜的 Web 應用場景，開發者通常需要進行服務端路由的配置

我們正在籌劃邊緣路由能力，開發者可以在應用的根目錄下放置一份路由配置檔案，配置應用的路由邏輯，例如：

{
  // 路由配置
  routes: [{
    // 單頁應用（SPA），需要對所有路由都響應 index.html，由前端接管路由
    src: '*',
    static: 'dist/index.html' 
  }, {
    // 將 /api/query 指向到某個雲函式
    src: '/api/query',
    cloudFunction: { path: 'api/query.js' }
  }],
  
  // HTTP錯誤碼重寫
  errorOverrides: [
    { status: 404, static: 'dist/404.html' }, // 對 404 錯誤返回 dist/404.html
    { status: 401, redirect: '/login' } // 將 401 狀態碼重定向到 /login
  ],
  
  // 自定義 HTTP 響應頭
  globalHeaders: {
    'x-my-custom-header': 'xxxxxx'
  }
}
複製程式碼

（以上只是初期設計，具體使用方式以實際上線後的技術文件為準）

籌劃能力2：免費HTTPS證照

目前應用繫結自定義域名時，需要手工選擇已有 HTTPS 證照。

我們正在計劃為 Webify 應用的自定義域名，提供免費的 DV 型證照，並提供自動續期功能，免除開發者手工申請、維護、續期證照的煩惱。

籌劃能力3：Serverless HTTP API

開發一個高可用、能應對高流量的後端 API，對於一些前端開發者而言並不簡單，而近年來興起的 Serverless 技術正是解決這一問題的絕佳方法。

Webify 正在籌劃支援 Serverless HTTP API，開發者只需要在專案的 api 目錄下，新增對應的路由處理程式碼，即可直接部署一個雲上 Serverless 化的 HTTP API（基於雲託管或雲函式）。

// api/hello.js
export default async function handler(req, res) {
  res.send(`${req.params.name} 的第一個 Webify Serverless API !`)
}
複製程式碼

應用部署後，即可直接訪問：

> curl https://<AppName>.<Region>.app.tcloudbase.com/api/hello?name=CloudBase
> CloudBase 的第一個 Webify Serverless API !
複製程式碼

（以上只是初期設計，具體使用方式以實際上線後的技術文件為準）

Serverless API 中，開發者可以直接使用雲開發 CloudBase 的服務端 SDK，直接呼叫雲資料庫、雲端儲存等雲開發提供的 BaaS 能力：

// api/query.js
const cloudbase = require('@cloudbase/node-sdk')
cloudbase.init()
​
export default async function handler(req, res) {
  const data = await cloudbase.database()
    .where({
      name: req.params.name
    })
    .get()
  res.send(data.result)
}
複製程式碼

籌劃能力4：更多的框架整合，包括 SSR、ISR、JAMStack

目前 Webify 整合了 React、Vue 等基礎的靜態 Web 框架，以及主流的靜態網站生成器（Static Site Generator, SSG）如 Gatsby.js、Next.js 等.

我們後續也正在考慮整合更多更加複雜的 Web 技術棧或者框架，例如 Next.js SSR/ISR、JAMStack 等，方便開發者基於這些整合的框架，快速開發、預覽並部署自己的 Web 應用。

四、尾聲

CloudBase Webify 專為前端、Web開發者打造，整合了諸多流行的前端框架，與開源社群生態深度融合，我們希望能夠為國內的開發者提供標準、高效、對開發者友好的一站式Web開發部署平臺， 未來我們也會持續優化產品，提供更多的產品能力，包括 Serverless、預覽、免費SSL證照等能力，敬請期待。

相關文章