CloudBase Webify,專爲Web開發者打造的雲上開發部署平臺

今天我們非常榮幸地宣佈騰訊雲 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:https://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/ISRJAMStack 等,方便開發者基於這些集成的框架,快速開發、預覽並部署自己的 Web 應用。

四、尾聲

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

另外我們還準備了上線三重福利,歡迎大家試用產品,部署應用或者撰寫實戰文章均可獲得獎品。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章