Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member681427
Participant
0 Kudos
在上一篇文章中,我们简单实现了一个静态页面index.html去获取当前登陆的用户,以及通过Standalone Approuter去访问建立在企业内网的OnPremise上OData数据源的小APP。
通过Standalone Approuter 消费OnPremise数据源

目前SAP业务技术平台(以下简称SAP BTP)支持多种HTML5应用:包括SAPUI5,VUE,React以及AngularJS。本文以SAPUI5 Free Style应用为示例,其他技术架构在项目部署时是类似的。在SAP BTP上,所有的HTML5应用都将被部署到HTML5仓库中,然后配合Approuter来访问,Approuter分为SAP Managed Approuter和Standalone Approuter两种不同的形式。

SAP Managed Approuter是SAP管理的,所有绑定SAP Managed Approuter的HTML5应用都能在BTP控制台里的HTML5 Applications中直接可见。一般配合SAP Build Work Zone来使用,开发人员是不能控制SAP Managed Approuter的;所有开发好的应用都会以磁贴的形式在SAP Build Work Zone上呈现。

Standalone Approuter是可以由开发人员自己控制,虽然前端应用也是部署在HTML5仓库中,但是在BTP控制台里的HTML5 Applications中看不见我们的应用,在Cloud Foundry的组织/空间中可以看到我们部署上去的应用(Standalone approuter)。Standalone approuter通过HTML5-repo-runtime来访问HTML5-repo-host中的UI应用。同时可以根据自己的需要,为不同的应用配置不同的访问链接。

总体来讲,在approuter的功能上,两者并没有什么区别,客户完全可以根据自己的业务需求选择适合自己的方案。SAP Managed Approuter配合SAP Build Work Zone使用,方便快捷,开发人员只需要专注于开发自己的业务需求就可以了。如果有多个应用要发布,可以保持统一的风格布局,可以很快就在SAP Build Work Zone上看到自己的APP展现,而Standalone approuter具有更高的灵活性,客户可以定制自己的前端界面风格。

 

架构图




简要描述


本文中会有两个应用,一个是简单应用helloworld,直接通过connectivity服务配合Destination服务访问在企业内网的OnPremise数据资源。第二个productslist会访问云端Northwind上的OData数据源。



前期准备


安装并配置SAP云连接器




  1. 安装并配置好SAP云连接器(SAP Cloud Connector),您可以参考这里 install SAP Cloud Connector with Docker, 或者在这里下载可安装版本。




  2. 在本项目中,我们使用 ES5 作为我们后端基于ABAP的OData数据源. Configure OP system in SAP Cloud Connector, 在SAP Cloud Connector里您需要配置自己的Location ID(任何利于区分的字符串即可).




项目配置


我们将2个应用放在app文件夹下,在mta.yaml中指定到相应的文件目录即可:





  1. 在文件mta.yaml中配置Destination属性
    定义名称为es5,可以从您配置好的SAP云连接器中获取到OData数据源的URL。将User和Password更新为您在es5系统上的用户名和密码,另外添加附加属性sap-client: "002",注意这里002必须用绰号括起来,否则会被识别成数字2。同时,可以为您的app router配置自定义的hostname,前提是您在SAP BTP上已经有可用的合法域名了。
    由于使用Standalone Approuter,要想正常访问HTML5 仓库中的应用的话,还需要借助html5-repo-runtime服务才可达成,而对于SAP managed approuter来说,是不需要依赖于html5-repo-runtime的。



    ID: standalone-op-es5
    _schema-version: "2.1"
    version: 1.0.0

    modules:
    - name: html5_app_router
    type: approuter.nodejs
    path: app/approuter
    parameters:
    disk-quota: 256M
    memory: 256M
    routes:
    - route: opes5.<YOUR.CUSTOM.DOMAIN.COM>
    requires:
    - name: h5app_repo_runtime
    - name: html5_destination
    - name: html5_uaa
    - name: html5_connectivity
    - name: html5_deployer
    type: com.sap.application.content
    path: .
    requires:
    - name: html5_repo_host
    parameters:
    content-target: true
    build-parameters:
    build-result: resources
    ignore: ["*.DS_Store"]
    requires:
    - artifacts:
    - helloworld.zip
    name: helloworld
    target-path: resources/
    - artifacts:
    - freeuiappproductslist.zip
    name: freeuiappproductslist
    target-path: resources/
    - name: helloworld
    type: html5
    path: app/helloworld
    build-parameters:
    build-result: dist
    builder: custom
    commands:
    - npm install
    - npm run build
    supported-platforms: []
    - name: freeuiappproductslist
    type: html5
    path: app/productslist
    build-parameters:
    build-result: dist
    builder: custom
    commands:
    - npm install
    - npm run build:cf
    supported-platforms: []
    resources:
    - name: html5_repo_host
    type: org.cloudfoundry.managed-service
    parameters:
    service: html5-apps-repo
    service-plan: app-host
    - name: html5_connectivity
    type: org.cloudfoundry.managed-service
    parameters:
    service: connectivity
    service-plan: lite
    - name: h5app_repo_runtime
    parameters:
    service-plan: app-runtime
    service: html5-apps-repo
    type: org.cloudfoundry.managed-service
    - name: html5_uaa
    parameters:
    path: ./xs-security.json
    service-plan: application
    service: xsuaa
    type: org.cloudfoundry.managed-service
    - name: html5_destination
    type: org.cloudfoundry.managed-service
    parameters:
    config:
    HTML5Runtime_enabled: true
    init_data:
    instance:
    destinations:
    - Authentication: BasicAuthentication
    Name: es5
    ProxyType: OnPremise
    Type: HTTP
    URL: http://<Your.OnPremise.OData.Service>;
    User: <i000000>
    Password: <xxxxxxxxxxxxx>
    sap-client: "002"
    - Authentication: NoAuthentication
    Name: ui5
    ProxyType: Internet
    Type: HTTP
    URL: https://ui5.sap.com
    - Authentication: NoAuthentication
    Name: northwind
    ProxyType: Internet
    Type: HTTP
    URL: https://services.odata.org/
    existing_destinations_policy: update
    version: 1.0.0
    service: destination
    service-name: html5_destination
    service-plan: lite



  2. 配置自定义域名
    在SAP BTP@AliCloud上,自定义域名是必须配置内容(如果没有可用域名,请联系您的SAP BTP管理员)。您可以通过Cloud Foundry命令行确认 cf domains您是否具有合法可用的域名。如果有的话,您将会看到如下图所示内容:

    打开文件xs-security.josn,将自有域名信息添加到oauth2-configuration中,请更换成您真实的域名信息:



    {
    "xsappname": "html5_app_repo_router",
    "tenant-mode": "dedicated",
    "description": "Security profile of called application",
    "scopes": [
    {
    "name": "uaa.user",
    "description": "UAA"
    }
    ],
    "role-templates": [
    {
    "name": "Token_Exchange",
    "description": "UAA",
    "scope-references": [
    "uaa.user"
    ]
    }
    ],
    "oauth2-configuration": {
    "redirect-uris": [
    "https://*.<YOUR.CUSTOM.DOMAIN.COM>/**"
    ]
    }
    }



  3. 配置standalone approuter 路由信息。所有前端应用的路由都会通过我们此approuter来转发到正确地址。打开文件app/approuter/xs-app.json,确认配置信息。




    • Destination htm5apphello
      此路由为应用helloworld使用。在这里该名称需要匹配到您在应用helloworld中定义的"id": "htm5.app.hello" 名称,但是需要去除非字符符号,该id定义在文件app/helloworld/manifest.json中,实际工作时,系统会自动识别并实现路由功能。另外,“sap.cloud”结点是必配内容,只有将public属性设置成true的时候,该应用才能被正常访问和启用。




{
"_version": "1.12.0",
"sap.app": {
"id": "htm5.app.hello",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.cloud": {
"public": true,
"service": "h5app.service"
}
}​


  • Destination odata
    此destination是为helloworld所用。主要是用来访问OnPremise端的内网OData数据源。 此路由对应到 destination es5。

  • Destination northwind
    此路由配置为productslist应用所使用。所有URL中包含”northwindodata“的请求都会自动转发到Destination northwind


 
{
"welcomeFile": "/index.html",
"authenticationMethod": "route",
"routes": [
{
"source": "/user-api/currentUser$",
"target": "/currentUser",
"service": "sap-approuter-userapi"
},
{
"source": "^/htm5apphello/(.*)$",
"target": "/htm5apphello/$1",
"service": "html5-apps-repo-rt"
},
{
"source": "/odata/(.*)$",
"target": "/$1",
"destination": "es5",
"csrfProtection": false
},
{
"source": "^/northwindodata/(.*)$",
"target": "/$1",
"destination": "northwind",
"csrfProtection": false
}
]
}​

 

HTML5 应用配置


通过standalone approuter消费OnPremise数据源


浏览到 app/helloworld, 我们创建了个简单的index.html页面来获取当前登陆用户,通过最简单的URL更新即可验证我们路由功能是否能正常工作。



<html>
<header>
<title>Welcome</title>
<meta charset="UTF-8">
</header>

<script>
setTimeout(() => {
fetch("/user-api/currentUser").then((res) => {
return res.json();
}).then((user) => {
document.getElementsByTagName("body")[0].innerText = `Hi ${user.firstname} 👋`
});
}, 1000);
</script>

<body>
Hi there 👋
</body>

</html>

HTML5仓库中的UI应用配合standalone approuter运行


通常,我们将HTML5的应用包括SAPUI5,VUE,React以及AngularJS部署到SAP HTML5仓库中,然后SAP Build Work Zone配合SAP Managed Approuter来消费这些应用。开发人员登陆到SAP BTP子账户中,在HTML5 Applications仓库中可以看见自己部署上去的应用。在使用SAP Managed Approuter时,客户是无法完全控制approuter的,在Cloud Foundry的组织/空间/应用中也不会看到自己的应用。


在这里,我们不希望使用SAP Build Work Zone来集成我们的应用,希望有自己的整体风格。我们仍然将APP部署到HTML5仓库中,然后绑定到一个standalone Approuter,开发人员具有此Approuter的完全控制权。部署好后,在SAP BTP控制台中HTML5 Applications检查,并不能看见部署上去的standalone应用,实际上该应用已经在HTML5仓库中了。当浏览到Cloud Foundry的组织/空间/应用中时,会发现我们的APP应用html5_app_router显示在这里。
在app/productslist/webapp/manifest.json中,将dataSource指向正确的Destination,通过关键字/northwindodata将会被自动路由到正确的OData服务地址



    "dataSources": {
"mainService": {
"uri": "/northwindodata/V3/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"annotations": [],
"localUri": "localService/metadata.xml",
"odataVersion": "2.0"
}
}
}

应用编译与部署





  1. 编译整个项目为mtar文件:


    mbt build -t ./


  2. 部署项目到Cloud Foundry运行时:

    cf deploy standalone-op-es5_1.0.0.mtar


  3. 部署成功后的配置
    登陆到您的SAP BTP子账户,浏览到Instances and Subscriptions,点击html5_destination链接进入Destination实例。从左侧菜单中选择Destination,选中destination es5, 将Location ID添加进去并保存。Location ID可以在配置SAP云连接器(SCC)的Cloud To On-Premise配置信息中找到。


当部署成功后,浏览到Cloud Foundry 组织/空间/应用,就能看到我们的应用html5_app_router,或者通过命令行 cf apps也可以查看到我们部署的应用。



检验结果


检验应用helloworld


登陆到您的SAP BTP控制台,浏览到Cloud Foundry 组织/空间。打开应用html5_app_router。点击URL打开,您将看到个Not Found的空页面,不要着急,我们继续往下。



检查获取当前用户


将后缀更改为/htm5apphello/index.html,再刷新一下页面。



检查es5 OnPremise数据源


将后缀更新为/odata/Products?format=json,OnPremise系统的数据正常显示



检查应用productslist


将后缀更新为/freeuiappproductslist-0.0.1/index.html,northwind上的数据将会在我们定义的SAP UI5页面上正常显示