---
# System prepended metadata

title: Dokumentasi Deployment Xreader V.02
tags: [documentation, xirka]

---

###### 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
```sh
$ 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
```sh
$ sudo -u postgres psql
postgres=# CREATE DATABASE db_name;
```
Setup database user privileges
```sh
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
```sh
$ 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
```sh
$ 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. 
```sh
(env) $ sudo nano xreader_v2/settings.py
```

```python
...
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
```sh
(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
```txt
[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:
```sh
$ 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. 
```txt
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}`
