How to setup separate frontend and backend¶

How to install backend depending on OS
Backend setup
How to install and configure frontend depending on OS

If you want to have a setup with separate frontend from backend we recommend to use a domain configuration like the following:

frontend: domain.tld
backend: backend.domain.tld

How to install backend depending on OS ¶

In order to setup the backend, please follow the steps for the operating system of your choice.

Ubuntu 16.04 ¶

You need to follow the Ubuntu16.04 guide, but skip the fleio-frontend package installation.

Ubuntu 18.04 ¶

You need to follow the Ubuntu18.04 guide, but skip the fleio-frontend package installation.

Centos 7 ¶

You need to follow the Centos 7 guide, but skip the fleio-frontend package installation.

Backend setup ¶

After you finish the bootstrap you need to create a CSRF middleware with the following content (no mater what OS you are using (take care at the indentation):

vi /var/webapps/fleio/project/fleio/csrf_pass.py

from django.conf import settings
from django.http.request import split_domain_port
from django.utils.deprecation import MiddlewareMixin

class CsrfMid(MiddlewareMixin):
    def process_request(self, request):
        dom, port = split_domain_port(request.get_host())
        if dom.endswith('domain.tld'):
            settings.CSRF_COOKIE_DOMAIN = 'domain.tld'
            settings.CSRF_COOKIE_NAME = 'csrfback'
        else:
            settings.CSRF_COOKIE_DOMAIN = None
            settings.CSRF_COOKIE_NAME = 'csrftoken'

    def process_response(self, request, response):
        dom, port = split_domain_port(request.get_host())
        if dom.endswith('domain.tld'):
            settings.CSRF_COOKIE_DOMAIN = 'domain.tld'
            settings.CSRF_COOKIE_NAME = 'csrfback'
        else:
            settings.CSRF_COOKIE_DOMAIN = None
            settings.CSRF_COOKIE_NAME = 'csrftoken'
        return response

Using this configuration, you need to also add the following lines in /var/webapps/fleio/project/fleio/fleiosettings/settings.py:

INSTALLED_APPS += (
    'corsheaders',  # you need this only if backend and frontend hosts are different
)

NEW_MIDDLEWARE_CLASSES = list(MIDDLEWARE)
NEW_MIDDLEWARE_CLASSES.insert(1, 'corsheaders.middleware.CorsMiddleware')
NEW_MIDDLEWARE_CLASSES.insert(1, 'fleio.csrf_pass.CsrfMid')
MIDDLEWARE = tuple(NEW_MIDDLEWARE_CLASSES)
CORS_ORIGIN_WHITELIST = (
    'http://domain.tld',
    'http://backend.domain.tld',
 )
CORS_ALLOW_CREDENTIALS = True
CSRF_TRUSTED_ORIGINS = ['domain.tld', 'backend.domain.tld']

After editing the settings.py file, you must restart all the fleio services (see Restarting Fleio).

How to install and configure frontend depending on OS ¶

In order to setup additional a separate frontend, please follow the steps for the operating system of your choice:

Ubuntu 16.04 ¶

First we will need to install the prerequisites:

apt-get update
apt-get install curl software-properties-common apt-transport-https
curl  https://repos.fleio.com/public.key | apt-key add -
add-apt-repository "deb [arch=amd64] https://repos.fleio.com/ubuntu xenial main"
apt-get update
apt-get install fleio-frontend nginx

The next step will be to configure Fleio:

cp /var/webapps/fleio/frontend/site/template_constants.js /var/webapps/fleio/frontend/site/constants/constants.js
cp /var/webapps/fleio/frontend/site/staff/template_constants.js /var/webapps/fleio/frontend/site/staff/constants/constants.js
sed -i 's|http://localhost:8000/api|http://backend.domain.tld/backend/api|g' /var/webapps/fleio/frontend/site/constants/constants.js
sed -i 's|http://localhost:8000/staffapi|http://backend.domain.tld/backend/staffapi|g' /var/webapps/fleio/frontend/site/staff/constants/constants.js

You will need to add the django CSRF cookie name in `/var/webapps/fleio/frontend/site/constants/constants.js` and `/var/webapps/fleio/frontend/site/staff/constants/constants.js`

...
djangoCsrf: {
'cookieName': 'csrfback',
'headerName': 'X-CSRFToken'
},
...

After that you need to create the frontend Nginx configuration file:

vi /etc/nginx/sites-enabled/domain.tld.conf

server {
listen      80;
client_max_body_size 5000m;
server_name domain.tld;

location /images {
    alias /var/webapps/fleio/frontend/site/images/;
    break;
}

location /js {
    alias /var/webapps/fleio/frontend/site/js/;
    expires max;
    break;
}

location /vendor {
    alias /var/webapps/fleio/frontend/site/vendor/;
    expires max;
    break;
}

location /styles {
    alias /var/webapps/fleio/frontend/site/styles/;
    expires max;
    break;
}

location /reseller {
    alias /var/webapps/fleio/frontend/reseller/;
    expires -1;
    try_files $uri $uri/ /../reseller/index.html;
}

location /staff {
    alias /var/webapps/fleio/frontend/site/staff/;
    expires -1;
    try_files $uri $uri/ /staff/index.html;
}

location /newstaff {
    alias /var/webapps/fleio/frontend/staff/;
    expires -1;
    try_files $uri $uri/ /../staff/index.html;
}

location / {
    alias /var/webapps/fleio/frontend/site/;
    expires -1;
    try_files $uri $uri/ /index.html;
}
}

Lastly you need to check the Nginx configuration using nginx -t command. If everything is ok you can restart it using the following command:

systemctl restart nginx

Ubuntu 18.04 ¶

First we will need to install the prerequisites:

apt-get update
apt-get install curl software-properties-common apt-transport-https
curl  https://repos.fleio.com/public.key | apt-key add -
add-apt-repository "deb [arch=amd64] https://repos.fleio.com/ubuntu bionic main"
apt-get update
apt-get install fleio-frontend nginx

The next step will be to configure Fleio:

cp /var/webapps/fleio/frontend/site/template_constants.js /var/webapps/fleio/frontend/site/constants/constants.js
cp /var/webapps/fleio/frontend/site/staff/template_constants.js /var/webapps/fleio/frontend/site/staff/constants/constants.js
sed -i 's|http://localhost:8000/api|http://backend.domain.tld/backend/api|g' /var/webapps/fleio/frontend/site/constants/constants.js
sed -i 's|http://localhost:8000/staffapi|http://backend.domain.tld/backend/staffapi|g' /var/webapps/fleio/frontend/site/staff/constants/constants.js

You will need to add the django CSRF cookie name in `/var/webapps/fleio/frontend/site/constants/constants.js` and `/var/webapps/fleio/frontend/site/staff/constants/constants.js`

...
djangoCsrf: {
'cookieName': 'csrfback',
'headerName': 'X-CSRFToken'
},
...

After that you need to create the frontend nginx configuration file:

vi /etc/nginx/sites-enabled/domain.tld.conf

server {
listen      80;
client_max_body_size 5000m;
server_name domain.tld;

location /images {
    alias /var/webapps/fleio/frontend/site/images/;
    break;
}

location /js {
    alias /var/webapps/fleio/frontend/site/js/;
    expires max;
    break;
}

location /vendor {
    alias /var/webapps/fleio/frontend/site/vendor/;
    expires max;
    break;
}

location /styles {
    alias /var/webapps/fleio/frontend/site/styles/;
    expires max;
    break;
}

location /reseller {
    alias /var/webapps/fleio/frontend/reseller/;
    expires -1;
    try_files $uri $uri/ /../reseller/index.html;
}

location /staff {
    alias /var/webapps/fleio/frontend/site/staff/;
    expires -1;
    try_files $uri $uri/ /staff/index.html;
}

location /newstaff {
    alias /var/webapps/fleio/frontend/staff/;
    expires -1;
    try_files $uri $uri/ /../staff/index.html;
}

location / {
    alias /var/webapps/fleio/frontend/site/;
    expires -1;
    try_files $uri $uri/ /index.html;
}
}

Lastly you need to check the Nginx configuration using nginx -t command. If everything is ok you can restart it using the following command:

systemctl restart nginx

Centos 7 ¶

Fleio is using dependencies that are available in epel. This package ensures that this extra repository is enabled along with Fleio repository.

First we will need to install the prerequisites, and to disable Selinux:

setenforce 0
yum install https://repos.fleio.com/rhel/7/fleio-release-1-2.el7.noarch.rpm
yum install fleio-frontend nginx

The next step will be to configure Fleio:

cp /var/webapps/fleio/frontend/site/template_constants.js /var/webapps/fleio/frontend/site/constants/constants.js
cp /var/webapps/fleio/frontend/site/staff/template_constants.js /var/webapps/fleio/frontend/site/staff/constants/constants.js
sed -i 's|http://localhost:8000/api|http://backend.domain.tld/backend/api|g' /var/webapps/fleio/frontend/site/constants/constants.js
sed -i 's|http://localhost:8000/staffapi|http://backend.domain.tld/backend/staffapi|g' /var/webapps/fleio/frontend/site/staff/constants/constants.js

You will need to add the django CSRF cookie name in /var/webapps/fleio/frontend/site/constants/constants.js and /var/webapps/fleio/frontend/site/staff/constants/constants.js

...
djangoCsrf: {
'cookieName': 'csrfback',
'headerName': 'X-CSRFToken'
},
...

After that you need to create the frontend nginx configuration file:

vi /etc/nginx/conf.d/domain.tld.conf

server {
listen      80;
client_max_body_size 5000m;
server_name domain.tld;

location /images {
    alias /var/webapps/fleio/frontend/site/images/;
    break;
}

location /js {
    alias /var/webapps/fleio/frontend/site/js/;
    expires max;
    break;
}

location /vendor {
    alias /var/webapps/fleio/frontend/site/vendor/;
    expires max;
    break;
}

location /styles {
    alias /var/webapps/fleio/frontend/site/styles/;
    expires max;
    break;
}

location /reseller {
    alias /var/webapps/fleio/frontend/reseller/;
    expires -1;
    try_files $uri $uri/ /../reseller/index.html;
}

location /staff {
    alias /var/webapps/fleio/frontend/site/staff/;
    expires -1;
    try_files $uri $uri/ /staff/index.html;
}

location /newstaff {
    alias /var/webapps/fleio/frontend/staff/;
    expires -1;
    try_files $uri $uri/ /../staff/index.html;
}

location / {
    alias /var/webapps/fleio/frontend/site/;
    expires -1;
    try_files $uri $uri/ /index.html;
}
}

Lastly you need to check the Nginx configuration using nginx -t command. If everything is ok you can restart it using the following command:

systemctl restart nginx

Documentation

Navigation

Related Topics

How to setup separate frontend and backend¶

How to install backend depending on OS ¶

Ubuntu 16.04 ¶

Ubuntu 18.04 ¶

Centos 7 ¶

Backend setup ¶

How to install and configure frontend depending on OS ¶

Ubuntu 16.04 ¶

Ubuntu 18.04 ¶

Centos 7 ¶

How to setup separate frontend and backend¶

Join our mailing list to stay up to date on Fleio development, discounts, OpenStack tutorials and OpenStack news.