cf webui - cloudfoundry user group dach
TRANSCRIPT
Zürcher Fachhochschule
CF WebUI
ICCLabZurich University of Applied Sciences
Zürcher Fachhochschule
What is CF WebUI
Single web page front-end for Cloud Foundry
Based on Cloud Foundry API
Open Source
Zürcher Fachhochschule
How we developed CF WebUI
Bootstrap
AngularJS
Nginx
Zürcher Fachhochschule
Challenges
Same Origin Policy
API Features
Zürcher Fachhochschule
Same Origin Policy
Problem:• Same Origin Policy in browser
Two solutions: • Cross-Origin Resource Sharing (CORS)• Proxy
Zürcher Fachhochschule
Same Origin Policy using CORS
Zürcher Fachhochschule
Same Origin Policy using proxy
Zürcher Fachhochschule
Proxy Implementations
First version: PHP Proxy• Based on cURL• Buildpack: PHPSecond version• Based on reverse proxy (nginx)• Buildpack: staticfile-buildpack
Zürcher Fachhochschule
Proxy - First Version
Zürcher Fachhochschule
Proxy - Second Version
Zürcher Fachhochschule
API Endpoint
‘List all apps’
Not showing crashed ones
Alternative solution: compare running instances
Zürcher Fachhochschule
API Endpoint
Zürcher Fachhochschule
API Endpoint
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
Zürcher Fachhochschule
Roadmap
Upcoming Features:• Show applications logs• Create/deploy new application• Update for Cloud Foundry API v3
Update to AngularJS 2
Zürcher Fachhochschule
Contribute & Questions
Questions?
Thank you!
https://icclab.github.io/cf-webui/https://github.com/icclab/cf-webuihttps://blog.zhaw.ch/icclab/