Installation Guide - CankayaUniversity/ceng-407-408-2020-2021-Monitoring-System-of-Water-Quality-and-Efficiency-of-Wastewater-Treatment GitHub Wiki

Installing and Running Backend

Steps to install and run the backend is as follows:

  • Install Python 3.8+
  • Create a virtual environment and activate it. See detailed instructions here (archive link). (This is optional if never installed Python libraries before)
  • Launch a linux terminal and run cd /source/backend/ to change the working directory to backend folder.
  • Install the dependencies, listed in requirements.txt, by executing pip install -r requirements.txt.
  • To run the server run py manage.py runserver command.

Please note that the water quality data provided by the Ministry is also needed, and we're not able to distribute the data without their permission.

Installing and Running Frontend

Steps to install and run the frontend is as follows:

  • Install Node.JS
  • Launch a linux terminal and run cd /source/frontend/ to change the working directory to frontend folder.
  • Run npm install to install the dependencies.
  • Run npm start to start frontend server.

Please note that the backend must also be running for the frontend to function correctly.

Deployment - English

This steps are heavily based on "How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 20.04". Following the tutorial is recommended in case of encountering any errors. Steps to deploy the system in a Ubuntu 20.04 server is as follows:

Dependencies

  • Download the repository.
  • Extract it to home/sammy/ where "sammy" is an example name of the user and rename the folder as "wqpms" to ease the future work.
  • File hierarchy should be like the following: 
    home
└── sammy
    └── wqpms
        └── Documents
        └── source
        ...
  • Move db.sqlite3 file to wqpms/source/backend.
  • Move .env file to wqpms/source/backend/backend.
  • Install packages from the Ubuntu Repositories by executing the following: 
    $ sudo apt update
$ sudo apt install python3-pip python3-dev libpq-dev nginx curl
  • Create the virtual environment inside "wqpms" folder. See detailed instructions here (archive link).
  • After creating the virtual environment, file hierarchy should be like the following: 
    home
└── sammy
    └── wqpms
        └── Documents
        └── source
        └── venv
        ...
  • Open the settings file source/backend/backend/settings.py and add server domain or ip to ALLOWED_HOST. 
    ALLOWED_HOSTS = ['your_server_domain_or_IP', 'second_domain_or_IP', . . ., 'localhost']

Installing and Configuring Gunicorn

  • Activate the virtual environment inside "wqpms" folder by executing source venv/bin/activate.
  • Install Gunicorn by executing pip install gunicorn.
  • Allow access to the port 8000 by executing sudo ufw allow 8000.
  • Test Gunicorn's ability to serve the project by executing the following: 
    $ cd /source/backend/backend
$ gunicorn --bind 0.0.0.0:8000 myproject.wsgi
  • Deactivate the virtual environment by executing deactivate.
  • Create and open a systemd socket file for gunicorn by executing sudo nano /etc/systemd/system/gunicorn.socket.
  • Inside type the following: 
    [Unit]
Description=gunicorn socket

[Socket]
ListenStream=/run/gunicorn.sock

[Install]
WantedBy=sockets.target
  • Create and open a systemd service file by executing sudo nano /etc/systemd/system/gunicorn.service.
  • Inside type the following: 
    [Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=sammy
Group=www-data
WorkingDirectory=/home/sammy/wqpms/source/backend
ExecStart=/home/sammy/wqpms/venv/bin/gunicorn \
        --access-logfile - \
        --workers 3 \
        --bind unix:/run/gunicorn.sock \
        myproject.wsgi:application

[Install]
WantedBy=multi-user.target
    Please note that "sammy" is an example name for the user. Please change "sammy" to server's user.
  • Start and enable the Gunicorn socket by executing the following: 
    $ sudo systemctl start gunicorn.socket
$ sudo systemctl enable gunicorn.socket
  • Send a connection to the socket through curl by executing curl --unix-socket /run/gunicorn.sock localhost.

Configuring Nginx

  • Create and open a new server block by executing sudo nano /etc/nginx/sites-available/wqpms.
  • Inside type the following: 
    server {
    listen 80;
    server_name server_domain_or_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/sammy/wqpms/source/backend/base;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}
    Please note that "server_domain_or_IP" is an example. Please change it with the IP of the server. Please note that "sammy" is an example name for the user. Please change "sammy" to server's user.
  • Enable the file by linking it to the "sites-enabled" directory by executing sudo ln -s /etc/nginx/sites-available/wqpms /etc/nginx/sites-enabled.
  • Test your Nginx configuration for syntax error by executing sudo nginx -t.
  • If nor error are reported, restart Nginx by executing sudo systemctl restart nginx.
  • Open up firewall to normal traffic on port 80 and remove the rule to open port 8000 by executing the following: 
    sudo ufw delete allow 8000
sudo ufw allow 'Nginx Full'

Please visit "How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 20.04" for more informations.

Deployment - Türkçe

Buradaki adımlar "How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 20.04" sayfasından baz alınarak hazırlanmıştır. Herhangi bir hata ile karşılaşmanız durumunda sayfayı ziyaret etmenizi öneririz. Sistemi Ubuntu 20.04 sunucusuna deploy etmenin adımları:

Gereksinimler

  • Repository indirin.
  • İndirdiğiniz dosyayı home/sammy/ klasörüne çıkartın ve klasörün ismini "wqpms" olarak yeniden adlandırın. "sammy" kullanıcı için örnek bir isimdir. "sammy" yerine bilgisayarın kullanıcı ismini girin.
  • Dosya sıradüzeni aşağıdaki gibi olmalıdır: 
    home
└── sammy
    └── wqpms
        └── Documents
        └── source
        ...
  • db.sqlite3 dosyasını wqpms/source/backend klasör yoluna taşıyın.
  • .env dosyasını wqpms/source/backend/backend klasör yoluna taşıyın.
  • Aşağıdaki kodu çalıştırarak gerekli olan paketleri indirin: 
    $ sudo apt update
$ sudo apt install python3-pip python3-dev libpq-dev nginx curl
  • "wqpms" dosyasının içinde virtual environment oluşturun. Detaylı bilgi için buraya (archive link) tıklayın.
  • Virtual environment kurduktan sonra dosya sıradüzeni aşağıdaki gibi olmalıdır: 
    home
└── sammy
    └── wqpms
        └── Documents
        └── source
        └── venv
        ...
  • source/backend/backend/settings.py dosyasını açın ve sunucunun domain'i veya ip adresini ALLOWED_HOSTS kısmına ekleyin. 
    ALLOWED_HOSTS = ['your_server_domain_or_IP', 'second_domain_or_IP', . . ., 'localhost']

Gunicorn Kurulumu ve Ayarları

  • "wqpms" dosyasının içindeki virtual environment'ı source venv/bin/activate kodunu çalıştırarak aktive edin.
  • Gunicorn'u kurmak için pip install gunicorn kodunu çalıştırın.
  • Port 8000'e ulaşım izni sağlamak için sudo ufw allow 8000 kodunu çalıştırın.
  • Gunicorn'un projeyi servis etmesini kontrol etmek için aşağıdaki kodu çalıştırın. 
    $ cd /source/backend/backend
$ gunicorn --bind 0.0.0.0:8000 myproject.wsgi
  • Virtual environment'ı deactivate kodunu çalıştırarak deaktive edin.
  • Gunicorn için systemd soketi oluşturmak ve açmak için sudo nano /etc/systemd/system/gunicorn.socket kodunu çalıştırın.
  • İçerisine aşağıdakileri yazın: 
    [Unit]
Description=gunicorn socket

[Socket]
ListenStream=/run/gunicorn.sock

[Install]
WantedBy=sockets.target
  • Systemd servis dosyası oluşturmak ve açmak için sudo nano /etc/systemd/system/gunicorn.service kodunu çalıştırın.
  • İçerisine aşağıdakileri yazın: 
    [Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=sammy
Group=www-data
WorkingDirectory=/home/sammy/wqpms/source/backend
ExecStart=/home/sammy/wqpms/venv/bin/gunicorn \
        --access-logfile - \
        --workers 3 \
        --bind unix:/run/gunicorn.sock \
        myproject.wsgi:application

[Install]
WantedBy=multi-user.target
    Lütfen burada "sammy" yazan yerleri kullanıcı isminiz ile değiştirin.
  • Gunicorn soketini çalıştırmak ve etkinleştirmek için aşağıdaki kodu çalışltırın: 
    $ sudo systemctl start gunicorn.socket
$ sudo systemctl enable gunicorn.socket
  • Sokete bağlantı yollamak için curl --unix-socket /run/gunicorn.sock localhost kodunu çalıştırın.

Nginx Ayarları

  • Yeni bir sunucu bloğu oluşturmak ve açmak için sudo nano /etc/nginx/sites-available/wqpms kodunu çalıştırın.
  • İçerisine aşağıdakileri yazın: 
    server {
    listen 80;
    server_name server_domain_or_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/sammy/wqpms/source/backend/base;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}
    Lütfen "server_domain_or_IP" yazan yerleri sunucunun domaini veya ip adresi ile değiştiriniz. Lütfen "sammy" yazan yerleri kullanıcı isminiz ile değiştiriniz.
  • Dosyayı etkinleştirmek için sudo ln -s /etc/nginx/sites-available/wqpms /etc/nginx/sites-enabled kodunu çalıştırarak dosyayı "sites-enabled" klasörüne bağlayın.
  • Yazım yanlışı olup olmadığını görmek için sudo nginx -t kodunu çalıştırın.
  • Eğer bir hata almazsanız, Nginx'i sudo systemctl restart nginx kodunu çalıştırarak yeniden başlatın.
  • Port 80 için güvenlik duvarını normal trafiğe açmak ve port 8000 için kuralları silmek için aşağıdaki kodu çalıştırın: 
    sudo ufw delete allow 8000
sudo ufw allow 'Nginx Full'

Daha fazla bilgi almak için lütfen "How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 20.04" sayfasını ziyaret edin.