###### tags : `xirka` `documentation`

# Dokumentasi Deployment Xreader V.02
### 0. Pendahuluan
Xreader V.02 merupakan aplikasi pengelolaan informasi data log Xirka Smart Attendance.

### 1. Prerequisite
| Item | Detail |
| ------ | ------ |
| Sistem Operasi | Ubuntu Server 18.04 |
| Backend | Python 3.6, Django |
| Database | PostgresSQL |
| Frontend | Nodejs 10, ReactJs |
| Webserver | Nginx |

### 2. Instalasi Dependency

$ cd ~
$ sudo apt-get update
$ sudo apt-get install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx
$ sudo apt-get install build-essential libssl-dev libffi-dev python-dev
$ sudo pip3 install virtualenv
$ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
$ sudo bash nodesource_setup.sh
$ sudo apt install nodejs

### 3. Setup Database
Setup Database

$ sudo -u postgres psql
postgres=# CREATE DATABASE db_name;

Setup database user privileges

postgres=# CREATE USER db_user WITH PASSWORD 'user_password';
postgres=# ALTER ROLE db_user SET client_encoding TO 'utf8';
postgres=# ALTER ROLE db_user SET default_transaction_isolation TO 'read committed';
postgres=# ALTER ROLE db_user SET timezone TO 'UTC';
postgres=# GRANT ALL PRIVILEGES ON DATABASE myproject TO db_user;
postgres=# \q

### 4. Setup Django Server
Clone direktori server

$ cd /var/www/
$ sudo git https://github.com/mraditya89/xreader_v2.git
$ sudo chown -R user:user xreader_v2 

`Note : Ubah user menjadi ubuntu user`

Buat virtual environment python dan Install requirements pada direktori server

$ cd /var/www/xreader_v2/backend
$ virtualenv -p python3 env
$ source env/bin/activate
(env) $ pip install -r doc/requirements.txt

Ubah konfigurasi database di xreader_v2/settings.py. Nilai parameter db_name, db_user, dan user_password disesuaikan dengan setting database postgre sebelumnya.

(env) $ sudo nano xreader_v2/settings.py

...
DEBUG = False
...
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'db_name',
        'USER': 'db_user',
        'PASSWORD': 'user_password',
        'HOST': 'localhost',
        'PORT': '',
    }
}

Buat user admin & device pada server django

(env)$ python manage.py makemigrations
(env)$ python manage.py migrate
(env)$ python manage.py createsuperuser

Daftarkan user admin dengan menginput `username, email dan password`.
Jalankan django server

(envxreader)$ python manage.py runserver {ip_address}:{port}

Buka browser dengan alamat `http://{ip_address}:{port}/smartlocksystem/admin`
Pada menu users daftarkan user device dengan `username: xisa-ulti, password: A3!NkkkM7BK3@e6`

### 5. Setup Frontend

$ cd /var/www/xreader_v2/frontend
$ npm install

Ubah ip_address request pada file : config.js pada direktori /src/components/content/config.js, sesuaikan dengan ip_address dan port django server.

const url = "http://{ip_address}:{port}"

Jalankan command `npm start`. Perhatikan console akan memunculkan notifikasi error : `Module not found can't resolve xlsx ...`
Solusi : hapus file ods.js pada direktori node_modules/tempa-xlsx

$ sudo rm node_modules/tempa-xlsx
$ touch node_modules/tempa-xlsx/ods.js

Jalankan kembali command : `npm start`. Pastikan tidak ada pesan error. Kemudian akses frontend pada browser dengan alamat `http://{ip_address}:{port}`. Input username dan password sesuai dengan user admin yang telah didaftarkan.

### 6. Deploy Aplikasi Xreader_v2

(env)$ cd /var/www/xreader_v2/backend
(env)$ gunicorn --bind 0.0.0.0:8000 xreader_v2.wsgi

Buat file pada service xreader_v2 dengan nama : xreader_v2.service.

$ sudo nano /etc/systemd/system/xreader.service

Isi file sesuai dengan konfigurasi server

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User={ubuntu_user}
Group=www-data
WorkingDirectory=/var/www/xreader_v2/backend/
ExecStart=/var/www/xreader_v2/backend/env/bin/gunicorn --access-logfile - --workers 5 --bind unix:/var/www/xreader_v2/backend/xreader_v2.sock xreader_v2.wsgi:application

[Install]
WantedBy=multi-user.target

Jalankan service dengan command berikut:

$ sudo systemctl start xreader_v2
$ sudo systemctl enable xreader_v2
$ sudo systemctl daemon-reload

Untuk mengecek status service, jalankan command :` sudo systemctl status xreader_v2`

#### Buat file konfigurasi server pada direktori nginx
Buat file xreader pada direktori nginx

$ sudo nano /etc/nginx/sites-availabe/xreader

Isi file tersebut sesuai dengan konfigurasi server meliputi : port, ip(server_name), alias, dan location.

server {
    listen {port_backend};
    server_name {ip_address};

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        alias /var/www/xreader_v2/backend/static-root/;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/var/www/xreader_v2/backend/xreader_v2.sock;
    }
}

server {
    listen {port_frontend};
    server_name {ip_addr};
    root /var/www/xreader_v2/frontend/build;
    index index.html index.htm;
    location / {
        try_files $uri /index.html;
    }
}

Aktifkan setingan nginx dengan perintah :

sudo ln -s /etc/nginx/sites-available/xreader_v2 /etc/nginx/sites-enabled
sudo systemctl restart nginx

Periksa konfigurasi nginx : `sudo nginx -t`. jika tidak ada pesan error, seharusnya akses aplikasi xreader_v2 bisa diakses melalui browser dengan alamat `http://{ip_address}:{port_frontend}`