...
| Code Block |
|---|
# tree /var/www/html/ui/
/var/www/html/ui/
|-- config
| |-- client-config-custom.json
| |-- tutorials
...
|-- theme
| |-- abicloudDefault
... |
...
| Code Block |
|---|
# tree /var/www/html/ui/ /var/www/html/ui |-- config | |-- theme1.json | |-- theme2.json ... |-- theme | |-- abicloudDefault ... |-- theme1 ... |-- theme2 ... |
You can have different property configuration configurations in each config json file, but it is very important that the config.endpoint property points to its related API subdomain URL:
...
Now place your customized themes in the Abiquo UI root folder with a suitable name and ensure that the structure is as described above.
When users load the UI, to prevent a 404 error in the browser console because the default theme.css is not found, set a default theme, which can be the empty theme.
See Abiquo+branding+guide#Set-a-default-theme-for-login-and-enterprises-without-themes.
Apache SSL front-end
Apache will provide the SSL layer to Abiquo components and serve the Abiquo UI. We need to tell Apache to work with NameVirtualHost directive because we want to serve different content depending on the accessed hostname.
Ensure that NameVirtualHost directive is enabled for both HTTP and HTTPS protocols:
...
There are other sections and parameters such as the certificate configuration, Apache log files and ProxyPass extra options such retry, keepalive and timeout that can be modified depending on your environment. Refer to Apache website documentation for further information.
Now, we should create a VirtualHost configuration file per subdomain. All files will look almost the same:
...
| Code Block |
|---|
<VirtualHost *:80>
RewriteEngine On
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]
</VirtualHost>
<VirtualHost *:443>
ServerName theme1.example.com
RewriteEngine On
ProxyRequests Off
ProxyPreserveHost On
<Directory "/var/www/html/ui">
Options MultiViews
AllowOverride None
Order allow,deny
Allow from all
</Directory>
RewriteRule ^/$ /ui/ [R]
# Theme and config AliasMatch
AliasMatch ^/ui/theme/default/(.*)$ /var/www/html/ui/theme1/$1
AliasMatch ^/ui/config/client-config-custom.json /var/www/html/ui/config/theme1.json
<Location /api>
ProxyPass ajp://192.168.1.100:8010/api retry=0
ProxyPassReverse ajp://192.168.1.100:8010/api
</Location>
<Location /m>
ProxyPass ajp://192.168.1.100:8010/m retry=0
ProxyPassReverse ajp://192.168.1.100:8010/m
</Location>
<Location /am>
ProxyPass ajp://192.168.1.100:8010/am retry=0 timeout=1800
ProxyPassReverse ajp://192.168.1.100:8010/am
</Location>
<Location /am-barcelona>
ProxyPass ajp://192.168.1.150:8010/am retry=0 keepalive=On timeout=1800
ProxyPassReverse ajp://192.168.1.150:8010/am
</Location>
<Location /legal>
ProxyPass ajp://192.168.1.100:8010/legal retry=0
ProxyPassReverse ajp://192.168.1.100:8010/legal
</Location>
SSLEngine on
SSLProtocol all -SSLv2
SSLCipherSuite ALL:!ADH:!EXPORT:!SSLv2:RC4+RSA:+HIGH:+MEDIUM:+LOW
SSLCertificateFile /etc/httpd/ssl/example.com.pem
SSLCertificateKeyFile /etc/httpd/ssl/example.com.key
CustomLog /var/log/httpd/theme1-access.log combined
ErrorLog /var/log/httpd/theme1-error.log
</VirtualHost> |
...
theme2.conf
| Code Block |
|---|
<VirtualHost *:80>
RewriteEngine On
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]
</VirtualHost>
<VirtualHost *:443>
ServerName theme2.example.com
RewriteEngine On
ProxyRequests Off
ProxyPreserveHost On
<Directory "/var/www/html/ui">
Options MultiViews
AllowOverride None
Order allow,deny
Allow from all
</Directory>
RewriteRule ^/$ /ui/ [R]
# Theme and config AliasMatch
AliasMatch ^/ui/theme/default/(.*)$ /var/www/html/ui/theme2/$1
AliasMatch ^/ui/config/client-config-custom.json /var/www/html/ui/config/theme2.json
<Location /api>
ProxyPass ajp://192.168.1.100:8010/api retry=0
ProxyPassReverse ajp://192.168.1.100:8010/api
</Location>
<Location /m>
ProxyPass ajp://192.168.1.100:8010/m retry=0
ProxyPassReverse ajp://192.168.1.100:8010/m
</Location>
<Location /am>
ProxyPass ajp://192.168.1.100:8010/am retry=0 timeout=1800
ProxyPassReverse ajp://192.168.1.100:8010/am
</Location>
<Location /am-barcelona>
ProxyPass ajp://192.168.1.150:8010/am retry=0 keepalive=On timeout=1800
ProxyPassReverse ajp://192.168.1.150:8010/am
</Location>
<Location /legal>
ProxyPass ajp://192.168.1.100:8010/legal retry=0
ProxyPassReverse ajp://192.168.1.100:8010/legal
</Location>
SSLEngine on
SSLProtocol all -SSLv2
SSLCipherSuite ALL:!ADH:!EXPORT:!SSLv2:RC4+RSA:+HIGH:+MEDIUM:+LOW
SSLCertificateFile /etc/httpd/ssl/example.com.pem
SSLCertificateKeyFile /etc/httpd/ssl/example.com.key
CustomLog /var/log/httpd/theme2-access.log combined
ErrorLog /var/log/httpd/theme2-error.log
</VirtualHost> |
...
| Code Block |
|---|
ServerName theme1.example.com AliasMatch ^/ui/theme/default/(.*)$ /var/www/html/ui/theme1/$1 AliasMatch ^/ui/config/client-config-custom.json /var/www/html/ui/config/theme1.json |
...
| Code Block |
|---|
ServerName theme2.example.com AliasMatch ^/ui/theme/default/(.*)$ /var/www/html/ui/theme2theme1/$1 AliasMatch ^/ui/config/client-config-custom.json /var/www/html/ui/config/theme2.json |
...
If you are not using a wildcard SSL certificate, repeat steps #3# and #4# for each DNS name involved in the environment. (In the sample scenario: theme1.example.com, theme2.example.com, api.example.com and dc2rs.example.com)
Having done the steps indicated above, you can now access https://theme1.example.com and https://theme2.example.com with each having a different theme.