文分享自华为云社区《三分钟完成静态网站托管 ——一行代码秒上云实践-云社区-华为云》，作者：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服务和工具。