☰
Navigation :

Frontend Configuration

Frontend Configuration

Introduction

The OCS frontend is a “single page” Angular web-application consisting of static files (HTML, Javascript, CSS and graphic images). The configuration of the frontend requires:

  1. A HTTP web server, to serve these static files.
  2. An Oauth 2 installation (such as Keycloak) to provide authentication and authorization for users.
  3. Proxy configuration, to proxy OCS server requests through the HTTP web server, to the OCS backend’s HTTP API (as configured)

Base Apache Configuration

In the Apache2 configuration, configure the ServerName variable to be the name of the host. On Red Hat:

vi /etc/httpd/conf/httpd.conf

On debian based installations, the configuration will be in:

vi /etc/apache2/apache2.conf

Firewall Rules

Open ports for HTTP applications. On Red Hat:

firewall-cmd --zone=public --add-port=80/tcp  --permanent
firewall-cmd --zone=public --add-port=443/tcp --permanent

Restart firewalld to apply the new configuration:

service firewalld restart

SELinux Configuration

On Red Hat, set rules that allow Apache to perform various tasks.

This can be achieved with:

setsebool -P httpd_can_network_connect 1

Apache Configuration

Configure Apache to serve the frontend application code, proxy OCS backend queries, and use SSL. The following Apache configuration template can be copied in to (on Red Hat):

/etc/httpd/conf.d/n2ocs-frontend.conf

or on Debian:

/etc/apache2/sites-available/n2ocs-frontend.conf
Apache Template
#
# N-Squared OCS admin frontend.
# Example frontend apache configuration
#
<VirtualHost *:443>
    DocumentRoot "/opt/nsquared/n2ocs-frontend/htdocs/"
    ServerName ocsadmin.nsquared.nz

    # SSL Configuration.
    SSLEngine on
    SSLProtocol -all +TLSv1.2
    SSLCipherSuite HIGH:!aNULL:!MD5
    SSLCertificateFile /etc/httpd/ocsadmin.nsquared.nz.crt
    SSLCertificateKeyFile /etc/httpd/ocsadmin.nsquared.nz.key

    # Ensure that index.html is barely cached
    # Ensuring updates to JS/CSS are always captured.
    <filesMatch "^index.html$">
      ExpiresActive on
      ExpiresDefault "access plus 5 minutes"
    </filesMatch>
    # Any JSON we serve up is also on a 5 minute cycle
    <filesMatch "\.json$">
      ExpiresActive on
      ExpiresDefault "access plus 5 minutes"
    </filesMatch>
    # Any js or CSS is on a 24 hour cycle.
    # Changes will actually be picked up with new hashes
    # used by angular builds
    <filesMatch "\.(js|css|png|gif|jpg)$">
      ExpiresActive on
      ExpiresDefault "access plus 24 hours"
    </filesMatch>

    # Redefine the assets directory for our
    # deployment directory hierarchy
    Alias /assets/config /opt/nsquared/config/ocs
    <Directory /opt/nsquared/config/ocs>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
        Require all granted
    </Directory>

    # We must support large input requests
    LimitRequestFieldSize 81920

    # Direct access to the OCS engine via proxy request
    ProxyPreserveHost On
    RequestHeader set X-Forwarded-Proto "https"
    RequestHeader set X-Forwarded-Port "443"
    ProxyPass /resource http://127.0.0.1:5490/resource
    ProxyPassReverse /resource http://127.0.0.1:5490/resource
    ProxyPass /engine http://127.0.0.1:5490/engine
    ProxyPassReverse /engine http://127.0.0.1:5490/engine

    # Finally, grant access to our HTML and JS/CSS files.
    Alias / /opt/nsquared/n2ocs-frontend/htdocs/
    <Directory /opt/nsquared/n2ocs-frontend/htdocs/>
        require all granted

        # Ensure our single page app URLs work
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . index.html [L]
    </Directory>
</VirtualHost>

Configuration Notes:

Field Description
ServerName Set to the hostname users will access the OCS frontend through. The ServerAlias configuration option may also be given to provide additional names.
SSLProtocol SSLCipherSuite The SSLProtocol option is, by default, relatively insecure. Enforce higher security by enabling a limited number of algorithms. Similar logic should apply to the settings for SSLCipherSuite.
SSLCertificateFile SSLCertificateKeyFile The SSL certification should not be self signed.
LimitRequestFieldSize The OCS is secured using JWT, which may be large. Ensure that requests to the server can be sent with large sizes.
proxy configuration The URL prefixes /resource and /engine must be proxied through to the OCS.
rewrite rules The OCS frontend is an Angular single page application. All URL requests must be rewritten to use index.html. The browser then accesses the right page within the application using Javascript.