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 ¶

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-backend
apt-get install mariadb-server
mysql
CREATE DATABASE fleio CHARACTER SET utf8;
GRANT ALL PRIVILEGES ON fleio.* TO 'fleio'@'localhost' IDENTIFIED BY 'HEREWETYPEPASSWORD';

/var/webapps/fleio/scripts/bootstrap

Ubuntu 18.04 ¶

apt 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-backend
apt-get install mariadb-server
mysql
CREATE DATABASE fleio CHARACTER SET utf8;
GRANT ALL PRIVILEGES ON fleio.* TO 'fleio'@'localhost' IDENTIFIED BY 'HEREWETYPEPASSWORD';

Centos 7 ¶

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

With the default MariaDB package on CentOS 7 we encountered database corruption issues leading to Fleio hanging. This is why we recommend MariaDB 10.1.

First we will need to check if there is mariadb already installed:

yum list-installed |  grep mariadb

If you find a different version of MariaDB than 10.1, you need to remove it and install the correct version. Proceed on your own risk.

yum remove mariadb mariadb-server

Create and edit file /etc/yum.repos.d/mariadb.repo to add the MariaDB 10.1 repository:

touch /etc/yum.repos.d/mariadb.repo
vi /etc/yum.repos.d/mariadb.repo

And put the following text into the file.

# MariaDB 10.1 CentOS repository
# http://downloads.mariadb.org/mariadb/repositories/
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.1/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1

Save and clone, then install MariaDB, MariaDB-client and MariaDB-shared:

yum update
yum install MariaDB-server MariaDB-client MariaDB-shared

Start the service and make it autostart on system boot:

systemctl start mariadb
systemctl enable mariadb

Lastly, you will need to create the database and the database user, and run the bootstrap script:

CREATE DATABASE fleio CHARACTER SET utf8;
GRANT ALL PRIVILEGES ON fleio.* TO 'fleio'@'localhost' IDENTIFIED BY 'HEREWETYPEPASSWORD';

/var/webapps/fleio/scritps/bootstrap

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:

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/project/fleio/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']

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 ¶

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
touch /etc/nginx/sites-enabled/domain.tld.conf
cp /var/webapps/fleio/frontend/site/template_constants.js /var/webapps/fleio/frontend/site/constants.js
cp /var/webapps/fleio/frontend/site/staff/template_constants.js /var/webapps/fleio/frontend/site/staff/constants.js
sed -i 's|http://localhost:8000/api|http://backend.domain.tld/backend/api|g' /var/webapps/fleio/frontend/site/constants.js
sed -i 's|http://localhost:8000/staffapi|http://backend.domain.tld/backend/staffapi|g' /var/webapps/fleio/frontend/site/staff/constants.js

You will need to add the django CSRF cookie name in `/var/webapps/fleio/frontend/site/constants.js` and `/var/webapps/fleio/frontend/site/staff/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 {
    root /var/webapps/fleio/frontend/site/;
    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 / {
    alias /var/webapps/fleio/frontend/site/;
    expires -1;
    try_files $uri $uri/ /index.html;
}
}

Ubuntu 18.04 ¶

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
touch /etc/nginx/sites-enabled/domain.tld.conf
cp /var/webapps/fleio/frontend/site/template_constants.js /var/webapps/fleio/frontend/site/constants.js
cp /var/webapps/fleio/frontend/site/staff/template_constants.js /var/webapps/fleio/frontend/site/staff/constants.js
sed -i 's|http://localhost:8000/api|http://backend.domain.tld/backend/api|g' /var/webapps/fleio/frontend/site/constants.js
sed -i 's|http://localhost:8000/staffapi|http://backend.domain.tld/backend/staffapi|g' /var/webapps/fleio/frontend/site/staff/constants.js

You will need to add the django CSRF cookie name in `/var/webapps/fleio/frontend/site/constants.js` and `/var/webapps/fleio/frontend/site/staff/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 {
    root /var/webapps/fleio/frontend/site/;
    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 / {
    alias /var/webapps/fleio/frontend/site/;
    expires -1;
    try_files $uri $uri/ /index.html;
}
}

Centos 7 ¶

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

You will need to add the django CSRF cookie name in /var/webapps/fleio/frontend/site/constants.js and /var/webapps/fleio/frontend/site/staff/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 {
    root /var/webapps/fleio/frontend/site/;
    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 / {
    alias /var/webapps/fleio/frontend/site/;
    expires -1;
    try_files $uri $uri/ /index.html;
}
}

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.