Skip to content

Deploying LiberouterGUI

Jump to bottom
Petr Stehlík edited this page Nov 7, 2017 · 24 revisions

Table of Contents

  1. Introduction
  2. Installing modules
  3. Installing internal dependencies
    1. Frontend dependencies
    2. Backend dependencies
  4. Deploying system itself
    1. Development version
    2. Production version

Introduction

There are two ways how to run Liberouter GUI:

  1. Development
  • Frontend is run in development mode which slows the whole page down (longer loading times).
  • Frontend is able to report errors with line numbers and more precise errors.
  • Frontend reloads every time you change a file in frontend/ folder.
  • Backend runs in debug mode (Flask's debug mode) with extensive reporting of errors and events.
  • Requests from frontend are proxied via Angular CLI to standalone-running backend (using Flask server).
  1. Production
  • Frontend code is compiled into static minified .js files, index.html, CSS and assets.
  • You must specify base-href if the frontend is run outside root folder of webserver.
  • Backend should be run via WSGI and proxied according to frontend configuration.

This guide details both approaches, but the first step is bootstrapping modules you want to have in Liberouter GUI. This process is the same for both approaches.

Installing Modules

Once you have decided on what mixture of your own modules and "official" modules for lgui you want to run, you can clone them into the modules/ folder. Modules developed by CESNET organization are guaranteed to work that way, for the third party modules please double-check the presence of config.json with module's root.

NOTE: By 'guaranteed to work' we mean that module does not require any additional steps before it can be bootstrapped. You still have to perform feature configuration. For example, SecurityCloud module requires paths to various binaries and auxiliary files to be configured as these are not installation independent.

With the modules in place, you can run the bootstrap.py located in the root of lgui project. If it finishes without any message, huzzah! If it reports any errors, try to resolve them and run it again.

And what bootstrapping does? It symlinks backend/frontend codes of each module to proper folders within lgui project, merges all dependencies into package.json, .angular-cli.json and requirements.txt and generates a file that tells Angular to include the frontend sources into main app.

Installing Internal Dependencies

Once you successfully set up bootstrapped modules, you have to install internal dependencies. This step has to be performed each time you update your modules both by adding a new one or updating existing one. You can only install internal dependencies once you've installed the main ones.

Frontend Dependencies

Go to frontend/. Run this command:

npm install

Backend Dependencies

Go to backend/. At this point, you can set up virtual environment for python packages you're going to install. If you don't want to, just skip the following step:

virtualenv venv
source venv/bin/activate

Now simply tell pip to install the dependencies:

pip3 install -r requirements.txt

If you're using virtualenv run deactivate to exit it now.

Deploying System Itself

Development Version

Follow this guide if you're creating a new module, otherwise use the production deployment. For the next steps, screen utility may come in handy as you will be running two (three) separate processes and want to see their outputs.

First off, start whatever database server you fancy and lgui is supporting. As you might now need output from this one, you can run it as a service.

Backend

Second, we'll be running the backend part. Before you can run anything, co to backend/ and rename config-sample.ini to config.ini. Then activate virtual environment (if you opted to using it). After that, return to root of lgui project and run:

python3 backend

Frontend

Go to frontend/ and run following command:

In order to use ng command you need to install angular-cli globally. This can be done via this command: npm install @angular/cli -g.

ng serve --host <your_ip> --proxy proxy.json

Where your_ip is either:

  • IP of your device on the interface you want to run the lgui
  • If you just need localhost functionality, use 0.0.0.0 as your ip

If both backend and frontend started properly, open your browser on your_ip:4200. Try to log in, gui will detect first time startup and throw you to the setup page, where you'll create the admin account and then to gui itself.

Production Version

Apart from running the database, production version behaves quite differently. Instead of having frontend dynamically recompiled each time you'll edit a source code, production version compiles all sources into *.html and *.js files that will be server by Apache (or your favourite web server). Python backend will be executed via persistent wsgi.

Backend

You need to install mod_wsgi for your web server to be able to make rest of this guide to work. In case you are using Python3.4 and CentOS7, which does not have correct version available for the apache, do the following:

yum install httpd-devel gcc
pip3 install mod_wsgi
mod_wsgi-express module-config >/etc/httpd/conf.modules.d/00-wsgi.conf
systemctl restart httpd

With the proper wsgi module installed, you need to configure /etc/httpd/conf/httpd.conf. In README in backend/ you can find configuration for secure connections, following configuration is simplified for local use:

ErrorLog '/tmp/log.txt'
LogLevel info

<VirtualHost *:80>
    DocumentRoot "/var/www/html/"
    WSGIDaemonProcess libapi threads=5
    WSGIScriptAlias "/libapi" "/path/to/backend/wsgi.py"
    WSGIPassAuthorization on

    <directory "/path/to/backend">
        WSGIProcessGroup libapi
        WSGIApplicationGroup %{GLOBAL}
        WSGIScriptReloading On

        Options All
        AllowOverride All
        Require all granted
    </directory>
</VirtualHost>

Don't forget to set up proper paths within that configuration. Also make sure that this path is open for reading for the apache user. In case of any errors, check /tmp/log.txt file for more info the matter. Selinux is known to cause a lot of headaches.

Frontend

For the sake of the guide, we'll be serving frontend from /var/www/html/lgui. In frontend/, instead of ng serve execute this command:

ng build --prod --bh="/lgui/" --aot=false

After a succeful compilation, there should be now directory frontend/dist. Copy all of its contents to /var/www/html/lgui. Please note that --bh parameter determines path to root of the gui from root of the web server. Apache has its root at /var/www/html and thus path to root og ui is /lgui/. Do not omit the final slash!

Make sure that within lgui/assets there is a config.json. Restart httpd and at this point your web browser should be able to load and display login screen of gui at http://localhost/lgui/.

Clone this wiki locally