您当前的位置是:  首页 > 技术 > 企业通信 > 资讯 >
当前位置:首页 > 技术 > 企业通信 > 资讯 > 一文彻底搞懂如何使用云托管一键部署网站,助力网站快速上线

一文彻底搞懂如何使用云托管一键部署网站,助力网站快速上线

2020-12-16 10:10:42   作者:   来源:CTI论坛   评论:0  点击:2500


  在越来越多的场景中,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翻译服务的宣传页,宣传页的内容包含翻译服务的介绍以及相关供应商的宣传资料,宣传页包含文字和图片两部分,内容的代码示例如下:
  index.html文件代码,托管程序包根目录中的index.html文件,用作网站的默认主页。具体index.html文件代码如下:
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
  flexible.js文件代码,此文件用来帮助落地页适配各种分辨率的屏幕。
  main.css和index.css文件代码,包含网站的设计样式,例如长度、宽度等。
  main.css文件代码(见下图)
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
  index.css文件代码(见下图)
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
  资料文件夹结构如下:
闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿垂妤e啫绠涘ù锝呮贡缁嬩胶绱撻崒姘偓鐑芥倿閿曚焦鎳岄梻浣告啞閻熴儳鎹㈠鈧濠氭偄绾拌鲸鏅梺鎸庣箓濞诧絽效濡ゅ懏鍋℃繝濠傛噹椤eジ鎮介娑樻诞闁诡喗鐟︾换婵嬪炊閵娧冨妇濠电姷鏁搁崐顖炲焵椤掑嫬纾婚柟鍓х帛閻撴盯鎮楅敐搴′簽濠⒀冪仛閹便劍绻濋崨顕呬哗闂佸湱鎳撶€氱増淇婇幖浣肝ㄩ柨鏃€鍎崇紞鎺楁⒒閸屾瑨鍏岄柟铏崌瀹曠敻寮介鐐殿唵闂佽法鍣﹂幏锟�...
  需要注意的是,index.html文件单独列出,css文件保存于css文件夹中,JavaScript文件保存于js文件夹中,所有图像都位于images文件夹中。请大家严格按照这种方式保存,否则网站将无法正常托管。
  4、将网站文件压缩为zip文件夹,由于托管文件上传有大小限制,为了确保文件能够成功上传,开发者需要压缩文件,这里需要注意几点:
  中国站点压缩包和解压包现在400M,海外站点还是原来大小,后续也会提高到400M;
  压缩包只支持zip格式,压缩包文件名不能包含中文和空格;
  压缩包中的文件中国站点最大支持20000个,海外站点暂时是2000个,后续会提升到20000个;
  解压文件根目录必须包含index.html页面,作为域名默认访问地址。
  5、创建并上传版本
  我们可以为网站创建版本,每个站点最多可以创建100个;
  选择管理版本后,我们需要点击新版本。在弹出的对话框中,单击“浏览”,选择要上传的静态网页zip文件,单击“上传”,然后输入描述,并确定;
  创建版本后,它会显示在站点版本列表中,并且处于“发布”状态;
  版本发布后,单击“域名”,它将在浏览器中打开托管网站。在那里,我们将获得托管URL。
  在整个过程中,我们还需要注意:
  1.等待1至2分钟,然后单击“刷新”,如果版本状态更改为“已发布”,则说明版本已成功发布;开发者可以在“操作” 列中单击“删除”,以删除没有发布的版本;
  2.删除的版本无法恢复,执行此操作时请小心。
  以上关于使用AppGallery Connect云托管一键部署托管网站的操作实例分享到这里就结束了,如果开发者伙伴们想要了解更详细的信息,建议访问华为开发者联盟官网,找到AppGallery Connect研习社高效开发系列课程中的构建服务,在线观看视频课程,了解应用开发场景中的各种Serverless服务和工具。
【免责声明】本文仅代表作者本人观点,与CTI论坛无关。CTI论坛对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考,并请自行承担全部责任。
  • 0

  • 0

  • 0

  • 0

  • 0

  • 0

  • 0

  • 0

专题

CTI论坛会员企业