文档首页 > > 最佳实践> 构建AI(图片鉴黄)应用> 构建前端功能程序

构建前端功能程序

分享
更新时间: 2020/05/13 GMT+08:00

前端页面可以作为静态资源部署在对象存储服务OBS上,OBS服务提供静态网站托管服务,并可自定义域名。

本例提供了前端程序包,用户可以下载、学习使用。

下载程序包

下载前端程序包(functiongraph-demo.zip),解压后程序包目录如图1所示。

图1 程序包目录

修改“/functiongraph/assets/config/apis.json”文件中“checkImage”的值,更改为在为后端函数创建APIG触发器中创建的APIG触发器URL:https://d237af6bc4214cc383b5f2b40a3af234.apigw.cn-north-1.huaweicloud.com/AIDemo,如图2所示。

图2 修改checkImage值

上传程序文件至OBS桶

登录对象存储服务,进入创建OBS桶中创建的obs-aidemo桶,将程序包文件逐个上传至OBS桶,如图3所示。

图3 前端程序包目录

设置静态网站托管

  1. 进入obs-aidemo桶静态网站托管界面,单击“静态网站托管”的“未启用”,如图4所示,弹出静态网站配置页。
    图4 静态托管
  2. 在静态网站配置页配置托管信息,如图5所示。
    • 选择配置到当前桶。
    • 默认首页:输入“index.html”。
    • 其他选项不配置。
    • 记录静态网站访问地址,示例:https://obs-aidemo.obs-website.cn-north-1.myhwclouds.com。
    图5 静态网站托管配置
  3. 单击“确定”,完成静态网站托管。

配置OBS CORS规则

  1. 进入obs-aidemo桶CORS规则界面,单击“CORS规则”,弹出CORS规则配置页,如图6所示。
    图6 CORS规则配置
  2. 在CORS规则配置页,单击“创建”,进入CORS规则创建界面,如图7所示。
    • 允许的来源:输入“*”
    • 允许的方法:全选
    • 允许的头域:输入“*”
    • 补充头域:输入以下头域
      ETag
      x-obs-request-id
      Content-Type
      Content-Length
      Cache-Control
      Content-Disposition
      Content-Encoding
      Content-Language
      Expires
      x-obs-id-2
      x-reserved-indicator
      x-obs-version-id
      x-obs-copy-source-version-id
      x-obs-storage-class
      x-obs-delete-marker
      x-obs-expiration
      x-obs-website-redirect-location
      x-obs-restore
      x-obs-version
      x-obs-object-type
      x-obs-next-append-position
      Access-Control-Allow-Origin
    • 缓存时间:输入“100”
    图7 创建CORS规则

开启API跨域访问

登录API网关服务,为3创建的API_AIDemo开启非简单请求的跨域访问,具体请参考开启跨域访问

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!

非常感谢您的反馈,我们会继续努力做到更好!

反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问