文分享自華為云社區《三分鐘完成靜態網站托管 ——一行代碼秒上云實踐-云社區-華為云》，作者：AppCloud小助手。

1 前言

無服務器托管靜態網站，你的第一個Serverless實戰，快來體驗吧！

對更多云上實踐感興趣的小伙伴，歡迎掃描文末二維碼加入我們的實踐群，完成每周一練~

2 操作流程

• 創建函數
• 修改代碼
• 在線調試
• 創建觸發器
• 訪問頁面
• 刪除函數

3 操作指導

3.1 創建函數

登錄華為云后，按“產品”-“計算”-“函數工作流FunctionGraph”路徑，進入華為云函數工作流FunctionGraph平臺首頁。

華為云官網：https://www.huaweicloud.com/

點擊“立即使用”按鈕，進入FunctionGraph首頁。

將區域切換至“廣州”，點擊“創建函數”按鈕

在創建函數頁，按如下參數配置項目

• 選擇“創建空白函數”
• 函數類型：事件函數
• 區域：華南-廣州
• 函數名稱：homepage
• 運行時：js 14.18
• 點擊“創建函數”完成創建

3.2 修改函數代碼

訪問開源代碼倉：https://gitee.com/HuaweiCloudDeveloper/code-on-huaweicloud

選擇“函數工作流靜態網站托管-homepage”文件夾

打開“index.js”文件，復制代碼

回到FunctionGraph，點擊函數頁“代碼”，打開“index.js”文件，粘貼代碼，點擊“部署”按鈕。

訪問代碼倉，打開“homepage.html”文件，復制代碼

點擊“文件”-“新建文件”，重命名為“homepage.html”，將代碼倉內“homepage.html”內代碼復制進去后，點擊“部署”

3.3 在線調試

點擊“測試”，右側出現“執行成功”的結果反饋。

3.4 創建觸發器

在函數概述頁，點擊“創建觸發器”。

在創建觸發器頁面，完成如下配置：

• 觸發器類型：API網關服務（APIG）
• API名稱：API_homepage
• 分組：需自行創建，刷新后可選（詳見下文）
• 安全認證：None
• 請求協議：HTTPS
• 其他項默認

點擊“創建分組”，進入API網關，自定義分組名，點擊“確定”即可完成創建。

在創建觸發器頁面，點擊“確定”按鈕即可完成創建，如下。

3.5 訪問頁面

復制觸發器中“調用URL”，在瀏覽器內進行訪問，即可訪問個人主頁。

3.6 刪除函數

實驗結束可刪除觸發器，刪除函數，防止大量用戶繼續訪問造成資源消耗。

關注#華為云開發者聯盟# 點擊下方，第一時間了解華為云新鮮技術~

華為云博客_大數據博客_AI博客_云計算博客_開發者中心-華為云

越來越多的場景中，Serverless依靠其核心優勢挺進云計算的腹地，發揮著至關重要的作用。今天就和大家一起看看云托管服務在營銷活動落地頁或新建網站托管，以及網站遷移的使用場景，以托管AppGallery Connect翻譯服務的宣傳頁為例，帶您了解如何通過全托管Serverless服務能力來快速部署和托管網站，體現Serverless上線快、成本低且免運維的技術優勢。

一、什么是AppGallery Connect云托管

AppGallery Connect云托管提供網站的全托管服務能力，是一項Serverless服務，它能夠幫助開發者伙伴們快速完成網站的部署工作。依托云托管的托管能力，讓開發者抽出更多的精力聚焦在界面交互、頁面樣式等業務邏輯上，不必關注運維工作，以便快速構建更安全和更流暢的網站。

二、云托管服務是怎樣工作的

云托管服務能力設置的核心是開發者在沒有云側設備的情況下，向用戶提供網頁應用和靜態頁面的訪問。通過CDN實現內容分發，讓用戶就近訪問，速度更快，體驗也更流暢。更重要的是，開發者可以管理一個項目里的多個站點，每個站點還可以使用多版本管理。

接下來，我們重點解析快速部署的幾個方面：

第一個是一鍵式部署，我們通過管理臺的Portal頁面，可以將網站頁面部署到云托管的運行環境當中，實現版本的快速部署；

第二個是一鍵式回滾，云托管具備版本的回滾能力，我們可以通過頁面操作將網站回退到某個歷史版本；

第三個是自有品牌運營管理。云托管服務為每個托管的站點自動提供CDN加速能力，通過豐富的CDN節點，實現網站的流暢訪問，安全接入。云托管除了給每個托管站點提供CDN加速能力之外，還提供CA證書，通過內置的證書實現網站Https協議安全接入。

另外，AppGallery Connect的云托管支持一鍵遷移，也就是說使用云托管服務，我們可以將自己之前搭建的網站毫不費力地遷移到新的網址域名當中，省時省力。

三、AppGallery Connect云托管部署和托管網站的操作實例

1、準備工作

我們在AppGallery Connect中創建一個項目，并啟用“云托管”服務。

2、創建靜態網站

我們需要先創建一個靜態網站，因為當前版本的云托管還不支持動態網站，但是在這個靜態網站中，開發者能夠使用JavaScript調用API 。

3、制作開始

我們即將制作的網站，將用于托管AppGallery Connect翻譯服務的宣傳頁，宣傳頁的內容包含翻譯服務的介紹以及相關供應商的宣傳資料，宣傳頁包含文字和圖片兩部分，內容的代碼示例如下：

1. index.html文件代碼，托管程序包根目錄中的index.html文件，用作網站的默認主頁。具體index.html文件代碼如下：

1. flexible.js文件代碼，此文件用來幫助落地頁適配各種分辨率的屏幕。
2. main.css和index.css文件代碼，包含網站的設計樣式，例如長度、寬度等。

main.css文件代碼(見下圖)

index.css文件代碼（見下圖）

資料文件夾結構如下：

需要注意的是，index.html文件單獨列出，css文件保存于css文件夾中，JavaScript文件保存于js文件夾中，所有圖像都位于images文件夾中。請大家嚴格按照這種方式保存，否則網站將無法正常托管。

4、將網站文件壓縮為zip文件夾，由于托管文件上傳有大小限制，為了確保文件能夠成功上傳，開發者需要壓縮文件，這里需要注意幾點：

1. 中國站點壓縮包和解壓包現在400M，海外站點還是原來大小，后續也會提高到400M；
2. 壓縮包只支持zip格式，壓縮包文件名不能包含中文和空格；
3. 壓縮包中的文件中國站點最大支持20000個，海外站點暫時是2000個，后續會提升到20000個；
4. 解壓文件根目錄必須包含index.html頁面，作為域名默認訪問地址。

5、創建并上傳版本

1. 我們可以為網站創建版本，每個站點最多可以創建100個；
2. 選擇管理版本后，我們需要點擊新版本。在彈出的對話框中，單擊“瀏覽”，選擇要上傳的靜態網頁zip文件，單擊“上傳”，然后輸入描述，并確定；
3. 創建版本后，它會顯示在站點版本列表中，并且處于“發布”狀態；
4. 版本發布后，單擊“域名”，它將在瀏覽器中打開托管網站。在那里，我們將獲得托管URL。

在整個過程中，我們還需要注意：

1. 等待1至2分鐘，然后單擊“刷新”，如果版本狀態更改為“已發布”，則說明版本已成功發布；開發者可以在“操作” 列中單擊“刪除”，以刪除沒有發布的版本；

2.刪除的版本無法恢復，執行此操作時請小心。

以上關于使用AppGallery Connect云托管一鍵部署托管網站的操作實例分享到這里就結束了，如果開發者伙伴們想要了解更詳細的信息，建議訪問華為開發者聯盟官網，找到AppGallery Connect研習社高效開發系列課程中的構建服務，在線觀看視頻課程，了解應用開發場景中的各種Serverless服務和工具。