Add last blog except for one

_posts/2019-05-02-dprd.md

+---
+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)
+