
本文中会有两个应用,一个是简单应用helloworld,直接通过connectivity服务配合Destination服务访问在企业内网的OnPremise数据资源。第二个productslist会访问云端Northwind上的OData数据源。
安装并配置好SAP云连接器(SAP Cloud Connector),您可以参考这里 install SAP Cloud Connector with Docker, 或者在这里下载可安装版本。
在本项目中,我们使用 ES5 作为我们后端基于ABAP的OData数据源. Configure OP system in SAP Cloud Connector, 在SAP Cloud Connector里您需要配置自己的Location ID(任何利于区分的字符串即可).
我们将2个应用放在app文件夹下,在mta.yaml中指定到相应的文件目录即可:
在文件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
配置自定义域名
在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>/**"
]
}
}
配置standalone approuter 路由信息。所有前端应用的路由都会通过我们此approuter来转发到正确地址。打开文件app/approuter/xs-app.json
,确认配置信息。
"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"
}
}
{
"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
}
]
}
浏览到 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的应用包括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"
}
}
}
编译整个项目为mtar文件:
mbt build -t ./
cf deploy standalone-op-es5_1.0.0.mtar
当部署成功后,浏览到Cloud Foundry 组织/空间/应用,就能看到我们的应用html5_app_router,或者通过命令行 cf apps
也可以查看到我们部署的应用。
登陆到您的SAP BTP控制台,浏览到Cloud Foundry 组织/空间。打开应用html5_app_router。点击URL打开,您将看到个Not Found的空页面,不要着急,我们继续往下。
将后缀更改为/htm5apphello/index.html
,再刷新一下页面。
将后缀更新为/odata/Products?format=json
,OnPremise系统的数据正常显示
将后缀更新为/freeuiappproductslist-0.0.1/index.html
,northwind上的数据将会在我们定义的SAP UI5页面上正常显示
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
7 | |
7 | |
7 | |
6 | |
6 | |
5 | |
5 | |
5 | |
5 | |
4 |