cf webui - cloudfoundry user group dach
TRANSCRIPT
![Page 1: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/1.jpg)
Zürcher Fachhochschule
CF WebUI
ICCLabZurich University of Applied Sciences
![Page 2: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/2.jpg)
Zürcher Fachhochschule
What is CF WebUI
Single web page front-end for Cloud Foundry
Based on Cloud Foundry API
Open Source
![Page 3: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/3.jpg)
Zürcher Fachhochschule
How we developed CF WebUI
Bootstrap
AngularJS
Nginx
![Page 4: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/4.jpg)
Zürcher Fachhochschule
Challenges
Same Origin Policy
API Features
![Page 5: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/5.jpg)
Zürcher Fachhochschule
Same Origin Policy
Problem:• Same Origin Policy in browser
Two solutions: • Cross-Origin Resource Sharing (CORS)• Proxy
![Page 6: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/6.jpg)
Zürcher Fachhochschule
Same Origin Policy using CORS
![Page 7: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/7.jpg)
Zürcher Fachhochschule
Same Origin Policy using proxy
![Page 8: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/8.jpg)
Zürcher Fachhochschule
Proxy Implementations
First version: PHP Proxy• Based on cURL• Buildpack: PHPSecond version• Based on reverse proxy (nginx)• Buildpack: staticfile-buildpack
![Page 9: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/9.jpg)
Zürcher Fachhochschule
Proxy - First Version
![Page 10: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/10.jpg)
Zürcher Fachhochschule
Proxy - Second Version
![Page 11: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/11.jpg)
Zürcher Fachhochschule
API Endpoint
‘List all apps’
Not showing crashed ones
Alternative solution: compare running instances
![Page 12: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/12.jpg)
Zürcher Fachhochschule
API Endpoint
![Page 13: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/13.jpg)
Zürcher Fachhochschule
API Endpoint
![Page 14: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/14.jpg)
Zürcher Fachhochschule
How to configure CF WebUI - manifest.yml
---applications:- name: cf-webui memory: 64M host: console-cf-webui-${random-word} path: ./build buildpack: https://github.com/cloudfoundry/staticfile-buildpack env:
API_ENDPOINT: https://api.run.pivotal.io# Use Google DNS by defaultNGINX_RESOLVER: 8.8.8.8#Enforce https is used (using x_forwarded_proto check). Default: enabledFORCE_HTTPS: 1
![Page 15: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/15.jpg)
Zürcher Fachhochschule
Roadmap
Upcoming Features:• Show applications logs• Create/deploy new application• Update for Cloud Foundry API v3
Update to AngularJS 2
![Page 16: CF WebUI - CloudFoundry User Group DACH](https://reader036.vdocuments.mx/reader036/viewer/2022062401/58e542281a28ab3a468b495d/html5/thumbnails/16.jpg)
Zürcher Fachhochschule
Contribute & Questions
Questions?
Thank you!
https://icclab.github.io/cf-webui/https://github.com/icclab/cf-webuihttps://blog.zhaw.ch/icclab/