天天看點
傳回

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

1024節祝語

首先祝各位同學 1024節快樂，阖家歡樂，健康平安。今天也是ServerlessDevs 發展滿一年的紀念日，我們從最初的蹒跚起步，探索碰壁，迷茫彷徨到現在的步伐穩健，循序漸進，自信堅定。經曆從1.0到2.0，從指令行到桌面可視化，從封閉的資料源到更加開放的多資料源能力，每一次革新都是對自我的拷問，拷問我們是否依然堅持那個“為了開發者的一切，一切為了開發者”的初心。随着越來越多的開發者加入，使用Serverless Devs，并為ServerlessDevs 提出寶貴的意見，讓我們越發相信，雖然前途依然坎坷，但此行值得。

新的幹貨

當然今天不是為了煽情而來，我們準備了更大的幹貨，借今天的好日子分享給大家，首先向大家宣布我們的

新官網

正式上線了，更加清晰的梳理了我們的産品能力和文檔介紹，并且加入了線上

應用中心

，供開發者提供直覺的線上選擇應用服務，那麼今天的主菜也是這個“應用中心”，由我來為大家介紹一下它背後的實作。

理想的企業級站點

之前介紹了幾篇使用 Serverless Devs 開發站點的介紹，包括Jamstack，包括使用我們的函數計算或者OSS 進行托管。對于一般用以展示的使用者而言已經足夠用，但大家可以試想一下，對于真正的企業的站點服務而言是否足夠。尤其在安全接口層面，諸如流量控制，IP通路控制，後端簽名，JWT鑒權等是否也是必須的，這個答案應當是肯定的，企業對安全的訴求甚至是大于性能，體驗的。

安全的能力再加上可以應對高并發，具備實時彈性，具備可觀測，可調測能力，同時性能，體驗，可擴充都非常優秀是我們認為的理想的企業級站點。

理想的企業級站點在現實中其實不多，因為想要實作這樣的理想，往往需要非常大規模的人力投入，從投入産出上考量的化很多公司可能都會放棄，值得慶幸的是在雲原生 Serverless時代，靠單人實作這樣理想的企業站點已經變為可能。

以雲服務将 安全能力，彈性高可用能力，可觀測能力“BAAS化”為前提，結合ServerlessDevs 工具做串聯粘合，接下來我們的目标就是要讓中國更多的網站變成理想的企業級站點，來看一下如何做到

整體架構設計及說明

在展開介紹實作之前，先來看一下理想中的企業級站點的架構是怎樣的

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

從上圖可以看到，dns 将我們的域名解析到apigateway内網服務, 然後依靠apigateway來實作 動靜态分流，流控，ip控制等能力，靜态資源托管到 oss 服務，這裡你可以利用 任意jamatck架構，最大化的利用靜态化的好處，諸如安全，seo友好，體驗上佳等。至于動态的api 部分我們優選了fc 的 faas 方案，因為本身後端語言采用的是 javascript 對冷啟動非常友好，如果你不想重構自己的服務并且又希望擁有serverless 化的能力的話可以考慮使用 sae 産品，後續我們也會專門做一期相關的案例實踐。

本次的 api 服務都是做資料組合轉發，并未關聯資料庫，關于資料庫的最佳我們目前也正在整理中，相信不久就可以跟大家見面。

準備工作

雖然Serverless Devs 可以将整個架構中的建構部署流程做統一處理，但是申請并且認證域名，雲産品的開通等仍然需要開發者自己準備，不過這些工作比較簡單點點滑鼠即可,已經開通的産品可以忽略該步驟

  • 域名申請 , 到任意域名服務商申請自己喜歡的域名即可，不過推薦在阿裡雲萬網，能夠統一管理，比如筆者申請了 serverless-developer.com 這樣的頂級域名，一年60多塊錢
讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻
  • 域名解析 , 域名申請好應該會自動開通，我們待會會用它來做一個CNAME解析，解析到我們的apigateway 公網二級域名
讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻
  • apigateway 網關服務，開通後會預設贈送 一個共享執行個體，費用低廉
讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻
  • oss 對象存儲， 用來存儲我們的靜态資源
讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻
讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

應用模闆初始化

使用ServerlessDesktop 搜尋 “modern-application” 應用模闆進行初始化下載下傳

下載下傳後可以看到整體目錄結構比較清晰，就是動态api部分，靜态資源部分和配置檔案部分

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

我們再展開看一下配置檔案,配置檔案稍稍複雜些

edition: 1.0.0 #  指令行YAML規範版本，遵循語義化版本（Semantic Versioning）規範
name: modern-web-application #  項目名稱
access: #通路秘鑰别名
vars: # [全局變量，提供給各個服務使用]
  domain: 
  region: cn-hongkong
  indexFile: index.html
  fc: 
    baseUrl:  #函數計算觸發器位址，可以在部署好函數之後獲得。例子： https://xxx.cn-hongkong.fc.aliyuncs.com/2016-08-15/proxy/serverlesshub/serverlesshub/
  oss:
    baseUrl: #oss 公網通路位址 。例子： https://<bucketname>.oss-cn-hongkong.aliyuncs.com
    bucketName: hanxie-serverless-hub
services:
  www: # 靜态資源
    component: devsapp/website
    actions:
      pre-deploy:
        - run: npm install
          path: ./
        - run: npm run build
          path: ./
    props:
      bucket: ${vars.oss.bucketName}
      src:
        # codeUri: ./
        publishDir: ./www/build
        index: index.html
        subDir:
          type: index
      region: ${vars.region}
  apis: #動态api
    component: devsapp/fc # 元件名稱
    actions:
      pre-deploy:
        - run: npm install
          path: ./apis
    props:
      region: ${vars.region}
      service:
        name: serverlesshub
        description: serverless應用市場
        internetAccess: true
      function:
        name: serverlesshub
        description: serverless應用市場的函數
        runtime: nodejs12
        codeUri: ./apis
        handler: index.handler
        memorySize: 128
        timeout: 10
      triggers:
        - name: httpTrigger
          type: http
          config:
            authType: anonymous
            methods:
              - GET
              - POST
      customDomains:
        - domainName: auto
          protocol: HTTP
          routeConfigs:
            - path: /*
  gateway: #  服務名稱
    component: apigateway # 這裡引入的是相對路徑，正式配置替換成你自己的component名稱即可
    props:
      regionId: ${vars.region}
      customerDomain: ${vars.domain} # 客戶自定義域名
      groupName: release_hub #指定分組 這裡你可以分開設定環境
      stageName: RELEASE  
      apis:
        - apiName: portal_get_api # 通路網站的getapi
          regionId: ${vars.region}
          requestConfig:
            requestPath: /api/*
            requestHttpMethod: GET
          serviceConfig:
            servicePath: / # 後端路徑
            serviceProtocol: FunctionCompute
            functionComputeConfig: # 函數計算的配置
              fcRegionId: ${vars.region} # 函數計算region
              fcBaseUrl: ${vars.fc.baseUrl}
              onlyBusinessPath: true # 隻接受路徑
              contentTypeCatagory: CLIENT
              path: /
            resultType: JSON
        - apiName: portal_post_api # 通路網站post類型的api
          regionId: ${vars.region}
          requestConfig:
            requestPath: /api/*
            requestHttpMethod: POST
          serviceConfig:
            servicePath: / # 後端路徑
            serviceProtocol: FunctionCompute
            functionComputeConfig: # 函數計算的配置
              fcRegionId: ${vars.region} # 函數計算region
              fcBaseUrl: ${vars.fc.baseUrl}
              onlyBusinessPath: true # 隻接受路徑
              path: /
              contentTypeCatagory: CLIENT
            resultType: JSON
        - apiName: portal_assets # 通路站點的靜态資源
          regionId: ${vars.region}
          requestConfig:
            requestPath: /*
            requestHttpMethod: GET
          serviceConfig:
            serviceAddress: ${vars.oss.baseUrl}
            aoneAppName: cloudapi-openapi
            servicePath: /* # 後端路徑
            serviceHttpMethod: ANY
            serviceProtocol: HTTP
            resultType: JSON
        - apiName: protal_index # 設定通路站點的首頁路徑
          regionId: ${vars.region}
          requestConfig:
            requestPath: /
            requestHttpMethod: GET
          serviceConfig:
            serviceAddress: ${vars.oss.baseUrl}
            aoneAppName: cloudapi-openapi
            servicePath: /index.html # 後端路徑
            serviceHttpMethod: GET
            serviceProtocol: HTTP
            resultType: JSON

為了示範友善，下面對包含的自服務進行一一部署,本次示範使用 serverless cli + serverless desktop結合

項目初始化

使用 `s init modern-web-application` 進行項目初始化，然後用serverless desktop進行托管

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

部署靜态資源

我們提前已經把靜态資源的釋出包建構好了存放于 www/build ，隻需要執行一下部署即可

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

s 工具會把 www/build 下的靜态資源上傳到使用者設定好的 bucket 裡面，上傳好bucket 之後，我們重新配置好全局的oss baseUrl 的變量，給後面的gateway使用

部署動态函數

靜态部署之後就是動态函數了，這裡我們提前準備好了，使用koa 範式建構的 serverless hub 服務端

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

部署好之後，重新整理一下自己的 函數計算，可以看到 已經配置好服務和函數，同樣我們把傳回的觸發器位址 配置到 全局變量 fc baseUrl上

部署apigateway

動靜态的依賴都配好之後，接下來就是gateway配置

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

這裡我們會幫您建立一個共享執行個體下的分組，然後在分組下建立了4個api

分别是

  • 通路 get 請求的api 【portal_get_api】
  • 通路 post 請求的 api 【portal_post_api】
  • 通路 全部靜态資源的 api 【portal_assets】
  • 首頁通路入口 api 【protal_index】

域名綁定相關

因為時間關系，我們沒有完全實作自動化的域名綁定，是以最後如果你希望通過自定義域名通路你的網站，還是需要打開産品控制台進行域名的綁定操作

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻
  • 1. 進入雲解析控制台，對自己的域名添加一個 cname 解析，解析内容指定到 apigateway 分組生成的 二級公網通路域名
  • 2.進入apigateway控制台 ，同樣再反綁定一下剛才的域名 hanxie.serverless-developer.com
  • 3.進入 oss 控制台 ，在傳輸管理->域名管理 中同樣綁定 hanxie.serverless-developer.com（注意這裡可能要你驗證一下dns 的解析，根據提示操作即可）

通路收尾

綜上配置好之後（域名解析可能需要一段時間，請耐心等待） 我們就可以通過通路

hanxie.serverless-developer.com 通路我們的域名了

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

當然這裡還沒添加 https證書，你可以考慮建立一個免費的證書，這樣最後可以得到一個完美的 https 站點

關于網站安全能力的設定

上面的執行個體有很多可以加的安全限制， 比如開通 apigateway 專項版，通過内網vpc轉發oss 以及函數計算服務，這部分後面會專門做一個分享，其次我們可以通過添加 apigateway 的插件來增加流控，安全通路，ip限制等能力，下面我們示範一下 通過apigateway 插件增加 basic auth 限制 api 通路

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

插件管理-> 建立 -> 選擇 basis auther -> 綁定 get api

可以看到 插件建立好之後我們再次通路 網站會提示401錯誤，我們再來用 postman 通路一下

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

一樣是401，然後我們添加一下 賬号密碼再測試一下

讓理想中的企業級站點開發走進大衆 - ServerlessDevs 1024特别奉獻

可以看到已經通過了。關于其他的安全設定您可以自行嘗試

關于通路性能的提升

目前我們使用的apigateway 的共享執行個體，在并發通路量不大的情況下沒有太大問題，當你的網站通路上升，遇到通路慢的時候可以考慮更新到專項執行個體，這樣可以直接通過内網通路靜态資源和函數，另外可以按照jamstak 理念盡量實作最大程度的靜态化，可以考慮一些相關的 jamstack架構，關于函數方面，我們目前使用的是js runtime 部署，冷啟動時間會在1s左右浮動， 另外還沒有做資料庫連接配接等。如果你覺得比較慢，可以考慮在函數計算上增加預留執行個體，保障函數的快速運作。

關于資費問題

到目前為止給大家展示的都是經計算最省錢的無服務化實作，你不必去使用主機就可以實作一個非常高性能的站點，需要花費的有 申請域名 （筆者申請的域名大概是60多元一年），

apigateway的共享執行個體是按照流量和api調用計費，本身新網站的話不會花費太高

fc 本身是有免費流量，新網站幾乎超不出這個限制

oss 本身也是按照存儲和公網流量計費，可以說微乎其微

綜上對于新上的站點而言花費是很低的，當然如果你的站點未來通路量上去之後也可以通過加配置無縫更新上去，您的程式無需做任何改進

關于多環境設定問題

真正開發生産過程中，多環境的問題是避不開的， 上面僅展示了 生産環境，你完全可以通過多個配置檔案來配置更多的測試和預發環境，按照 apigateway給的實踐進行配置使用，這部分歡迎更多實踐的小夥伴與我們交流探索

最後

基于這套模式你可以自由設定後端api 部分，使用serverelss ，微服務等，不會幹擾前端的使用，通過預發測試環境去實踐，然後釋出到生産。我們歡迎有更多的夥伴加入去探索這個最佳實踐，另外後續我會繼續展開介紹這套Serverless devs 應用模闆的産出細節，你可以自由定制元件，以及自由組合釋出流程。 用Iac 的理念通過Serverless Devs 更好的管理自己釋出生産流程

最後如果你覺得上面的文章對你有幫助，不妨去我們的官網幫忙點個贊

https://github.com/Serverless-Devs/Serverless-Devs
域名解析 存儲 安全 網絡協定 前端開發 serverless api 資料庫 對象存儲 開發者 severless資料 serverless企業 serverless彈性伸縮 serverless關聯 資料serverless
上一篇: ECS伺服器搭建
下一篇: 阿裡雲商标顧問注冊申請和智能注冊有什麼差別值得買嗎？阿裡雲商标顧問注冊申請

繼續閱讀