Fakultas Ilmu Komputer UI

Commit be129938 authored by YOGI LESMANA  SULESTIO's avatar YOGI LESMANA SULESTIO
Browse files

Add last blog except for one

parent a2e22278
---
layout: post
title: "DPRD"
date: 2019-05-02 10:00:00 +0700
author: yogi
---
Pada blog minggu ini, saya akan menceritakan pengalaman saya mengenai DPRD, bukan Dewan Perwakilan Rakyat Daerah, melainkan:
<!--more-->
Deployment, Persona, Refactoring, Docker, + Profiling
### Persona
![ ](/assets/images/2019-05-02/login.png)
![ ](/assets/images/2019-05-02/home.png)
![ ](/assets/images/2019-05-02/log.png)
![ ](/assets/images/2019-05-02/logdetail.png)
![ ](/assets/images/2019-05-02/filter.png)
![ ](/assets/images/2019-05-02/server.png)
![ ](/assets/images/2019-05-02/serverdetail.png)
![ ](/assets/images/2019-05-02/not.png)
### Refactoring
Berikut adalah implementasi Refactoring yang saya lakukan
```
<div class="bp3-non-ideal-state">
<div class="bp3-non-ideal-state-visual">
<span class="bp3-icon bp3-icon-warning-sign" />
</div>
<h4 class="bp3-heading">
This website does not support your resolution.
</h4>
<div>
Please make sure you are viewing this website on desktop browser or
continue at your own risk.
</div>
<button class="bp3-button bp3-intent-primary">Continue</button>
```
```
<div className="app_non-ideal-container bp3-dark">
<NonIdealState
icon="warning-sign"
title="This website does not support your resolution"
description="Please make sure you are viewing this website on desktop browser or continue at your own risk"
action={<Button intent={Intent.PRIMARY} onClick={this.disableWarning}>Continue</Button>}
/>
```
### Deployment & Docker
Docker adalah alat bagi developer untuk mendeploy app mereka dengan mengaktifkan image yang telah dibuild dalam container.
Image adalah bagian dari software yang mengandung source code, dan system-system serta pengaturan yang menjadi syarat dalam penjalanan app.
Container membantu developer dalam mempacking app bersama bagian lain seperti library lalu dijadikan sebagai suatu paket.
![ ](/assets/images/2019-05-02/container.png)
![ ](/assets/images/2019-05-02/image.png)
![ ](/assets/images/2019-05-02/volume.png)
Dalam pembuatan Docker Image terdapat beberapa hal penting yaitu
***requirements.txt***
merupakan package yang wajib dipasang pada project. Berikut adalah requirements.txt yang terdapat pada folder backend
```
black==18.9b0
coverage==4.5.2
django-cors-headers==2.4.1
Django==2.1.7
djangorestframework==3.9.1
factory-boy==2.11.1
gunicorn==19.9.0
coverage==4.5.2
black==18.9b0
psycopg2-binary==2.7.7
django-cors-headers==2.4.1
django-extensions==2.1.6
elasticsearch==5.5.3
fakeredis==1.0.3
redis==3.2.1
```
***Dockerfile***
berisi hal yang dibutuhkan oleh Docker untuk membuild image. Python yang dibutuhkan adalah 3.7.3-slim
```
FROM python:3.7.3-slim
WORKDIR /app
COPY requirements.txt /app/requirements.txt
RUN pip install -r requirements.txt
COPY . /app
CMD ["./start.sh"]
```
Untuk memudahkan pembuatan container, kami melakukannya dengan menggunakan docker-compose, atau dalam portainer disebut dengan stack.
```
# this is preprocessed .yml -- use generate-env to generate docker-compose.yml
# for specified environment
version: "2"
services:
postgres:
image: postgres:11.2
environment:
POSTGRES_DB: ${POSTGRES_DB}
POSTGRES_USER: ${POSTGRES_USER}
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
volumes:
- pplc7-%{ENVIRONMENT}-postgres_data:/var/lib/postgresql/data
networks:
private:
ipv4_address: ${POSTGRES_PRIVATE_IP}
restart: always
static:
image: nginx:1.15
ports:
- ${STATIC_PUBLIC_PORT}:80
volumes:
- pplc7-%{ENVIRONMENT}-backend_media:/usr/share/nginx/html/media
- pplc7-%{ENVIRONMENT}-backend_static:/usr/share/nginx/html/static
networks:
public:
restart: always
backend:
image: registry.docker.ppl.cs.ui.ac.id/pplc7/backend:${ENVIRONMENT}
ports:
- ${BACKEND_PUBLIC_PORT}:8000
environment:
DB_PORT: 5432
DB_HOST: ${POSTGRES_PRIVATE_IP}
DB_USER: ${POSTGRES_USER}
DB_PASSWORD: ${POSTGRES_PASSWORD}
DB_NAME: ${POSTGRES_DB}
DJANGO_ENV: PRODUCTION
STATIC_URL: http://152.118.201.222:${STATIC_PUBLIC_PORT}/static/
ELASTICSEARCH_HOST: ${ELASTICSEARCH_PRIVATE_IP}
REDIS_HOST: ${REDIS_PRIVATE_IP}
REDIS_PORT: 6379
volumes:
- pplc7-%{ENVIRONMENT}-backend_media:/media
- pplc7-%{ENVIRONMENT}-backend_static:/static
networks:
private:
public:
restart: always
frontend:
image: registry.docker.ppl.cs.ui.ac.id/pplc7/frontend:${ENVIRONMENT}
ports:
- ${FRONTEND_PUBLIC_PORT}:80
networks:
public:
restart: always
log-generator:
image: registry.docker.ppl.cs.ui.ac.id/pplc7/log-generator:${ENVIRONMENT}
ports:
- ${LOG_GENERATOR_PUBLIC_PORT}:8000
environment:
LOGSTASH_HOST: ${LOGSTASH_PRIVATE_IP}
LOGSTASH_BARNYARD2_PROTO: ${LOGSTASH_BARNYARD2_PROTO}
LOGSTASH_BARNYARD2_PORT: ${LOGSTASH_BARNYARD2_PORT}
SENSOR_NAME: log-generator-${ENVIRONMENT}-1
networks:
private:
public:
restart: always
logstash:
image: registry.docker.ppl.cs.ui.ac.id/pplc7/logstash:${ENVIRONMENT}
environment:
LOGSTASH_BARNYARD2_PROTO: ${LOGSTASH_BARNYARD2_PROTO}
LOGSTASH_BARNYARD2_PORT: ${LOGSTASH_BARNYARD2_PORT}
ELASTICSEARCH_HOST: ${ELASTICSEARCH_PRIVATE_IP}
AGGREGATOR_PRIVATE_IP: ${AGGREGATOR_PRIVATE_IP}
AGGREGATOR_WEBHOOK_PORT: ${AGGREGATOR_WEBHOOK_PORT}
LOGSTASH_CLIENT_SECRET_KEY: ${LOGSTASH_CLIENT_SECRET_KEY}
networks:
private:
ipv4_address: ${LOGSTASH_PRIVATE_IP}
restart: always
elasticsearch:
image: elasticsearch:5.6.15-alpine
networks:
private:
ipv4_address: ${ELASTICSEARCH_PRIVATE_IP}
restart: always
redis:
image: redis:5.0.4-alpine
networks:
private:
ipv4_address: ${REDIS_PRIVATE_IP}
restart: always
aggregator:
image: registry.docker.ppl.cs.ui.ac.id/pplc7/aggregator:${ENVIRONMENT}
ports:
- ${AGGREGATOR_PUBLIC_PORT}:8000
environment:
REDIS_HOST: ${REDIS_PRIVATE_IP}
REDIS_PORT: 6379
LOGSTASH_SECRET_KEY: ${LOGSTASH_CLIENT_SECRET_KEY}
networks:
private:
ipv4_address: ${AGGREGATOR_PRIVATE_IP}
public:
restart: always
volumes:
pplc7-%{ENVIRONMENT}-postgres_data:
external: true
pplc7-%{ENVIRONMENT}-backend_media:
external: true
pplc7-%{ENVIRONMENT}-backend_static:
external: true
networks:
private:
external:
name: pplc7-${ENVIRONMENT}-private
public:
external:
name: pplc7-${ENVIRONMENT}-public
```
Nilai dari environment variable yang diwrite ketika pembentukan stack akan mensubstitusi semua ${}
Selain itu dapat dilihat juga service yang kami punya seperti postgres, frontend, backend, log-generator, logstash, elasticsearch, redis, aggregator
***.gitlab-ci.yml***
```
variables:
LC_ALL: C.UTF-8
BLOG_ROOT_PATH: blog
BACKEND_ROOT_PATH: backend
FRONTEND_ROOT_PATH: frontend
LOGSTASH_ROOT_PATH: logstash
LOG_GENERATOR_ROOT_PATH: log-generator
AGGREGATOR_ROOT_PATH: aggregator
NETLIFY_API_ID: f6415942-1f66-4616-ba66-13150c19be45
REGISTRY: registry.docker.ppl.cs.ui.ac.id
DEPLOYER_TOKEN: d45d225f00cd0b7922cd0ee82c05df57bdf321e8
DEPLOYER_API_URL: https://stack.nugraha.xyz/api
stages:
- build
- test
- deploy
- release
```
Dapat dilihat bahwa pada gitlab-ci kami terdapat 4 tahapan, yaitu build, test, deploy, dan release.
Stage release adalah untuk membuat container di image menggunakan image terbaru
```
frontend:build:
stage: build
image: node:10-alpine
script:
- cd $FRONTEND_ROOT_PATH
- npm install
- REACT_APP_BUILD_ENV=$CI_COMMIT_REF_NAME npm run build
artifacts:
paths:
- $FRONTEND_ROOT_PATH/build
only:
changes:
- frontend/**/*
- .gitlab-ci.yml
```
Pada stage build, dilakukan pemasangan dan run build npm
```
frontend:test:
stage: test
image: node:10-alpine
script:
- cd $FRONTEND_ROOT_PATH
- npm install
- npm run test
coverage: '/All files\s*\|\s*(\d+.\d+)\s*\|.+/'
only:
changes:
- frontend/**/*
- .gitlab-ci.yml
```
Pada stage test, dilakukan pemasangan dan penjalanan test npm
```
frontend:deploy:
stage: deploy
image: docker:stable
services:
- docker:dind
script:
- cd $FRONTEND_ROOT_PATH
- docker build -t $REGISTRY/pplc7/frontend:$CI_COMMIT_REF_NAME .
- docker push $REGISTRY/pplc7/frontend:$CI_COMMIT_REF_NAME
tags:
- docker
dependencies:
- frontend:build
only:
refs:
- development
- staging
changes:
- frontend/**/*
- .gitlab-ci.yml
```
Pada stage deploy, dilakukan build dan push oleh docker.
![ ](/assets/images/2019-05-02/front.png)
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment