Search by

    Terakhir diperbaharui: Oct 24, 2020

    Deploy ke Heroku

    Setelah kita berhasil membuat koneksi ke MongoDB Atlas, sekarang saatnya kita deploy DinoTes ke Heroku Dynos.

    Dynos adalah linux container yang didesain untuk mengeksekusi perintah dari user.

    Setup Heroku

    Step by Step

    1. Buat akun baru di heroku

    2. Download dan Install heroku-cli

    3. Jalankan perintah berikut untuk login ke heroku

    1$ heroku login

    Pisahkan client & API

    Kita tidak bisa deploy dua aplikasi sekaligus. Kita harus deploy satu per satu.

    Saatnya memisahkan client dan server/api.

    Step by Step

    1. Buah sebuah folder baru dengan nama deploy diluar folder dinotes-app

    2. Pindah folder api dari folder dinotes-app ke folder deploy

    3. Buat sebuah subfolder dengan nama client di dalam folder deploy dan pindahkan semua file dari dinotes-app ke folder client

    Sehingga struktur folder akhir:

    1deploy
    2 |--api
    3 |--middlewares
    4 |--handler.js
    5 |--routes.js
    6 |--server.js
    7 |--client
    8 |--node_modules
    9 |--public
    10 |--src
    11 |--package.json
    12 |--README.md

    Update package.json

    Karena api dan client sekarang terpisah, masing-masing harus memiliki file package.json yang berisi package yang dibutuhkan.

    Step by Step

    1. Buat file package.json di dalam folder deploy/api dan salin konfigurasi berikut
    1{
    2 "name": "dinotes-api",
    3 "version": "0.1.0",
    4 "private": true,
    5 "dependencies": {
    6 "body-parser": "^1.19.0",
    7 "cors": "^2.8.5",
    8 "express": "^4.17.1",
    9 "mongodb": "^3.6.2",
    10 "prettier": "^2.1.1"
    11 },
    12 "scripts": {
    13 "start": "node server.js"
    14 },
    15 "devDependencies": {
    16 "eslint-config-airbnb": "^18.2.0",
    17 "eslint-config-prettier": "^6.11.0",
    18 "eslint-plugin-jsx-a11y": "^6.3.1",
    19 "eslint-plugin-prettier": "^3.1.4",
    20 "nodemon": "^2.0.4"
    21 },
    22 "engines": {
    23 "node": "12.x"
    24 }
    25}

    Jalankan perintah yarn install untuk menginstall semua package.

    1. Kita perlu update package.json untuk client karena ada beberapa package yang sudah tidak dibutuhkan lagi
    1{
    2 "name": "dinotes-app",
    3 "version": "0.1.0",
    4 "private": true,
    5 "dependencies": {
    6 "@testing-library/jest-dom": "^4.2.4",
    7 "@testing-library/react": "^9.3.2",
    8 "@testing-library/user-event": "^7.1.2",
    9 "prettier": "^2.1.1",
    10 "react": "^16.13.1",
    11 "react-dom": "^16.13.1",
    12 "react-router": "^5.2.0",
    13 "react-router-dom": "^5.2.0",
    14 "react-scripts": "3.4.3",
    15 "styled-components": "^5.1.1",
    16 "uuid": "^8.3.0"
    17 },
    18 "scripts": {
    19 "start": "react-scripts start",
    20 "build": "react-scripts build",
    21 "test": "react-scripts test",
    22 "eject": "react-scripts eject"
    23 },
    24 "eslintConfig": {
    25 "extends": "react-app"
    26 },
    27 "browserslist": {
    28 "production": [
    29 ">0.2%",
    30 "not dead",
    31 "not op_mini all"
    32 ],
    33 "development": [
    34 "last 1 chrome version",
    35 "last 1 firefox version",
    36 "last 1 safari version"
    37 ]
    38 },
    39 "devDependencies": {
    40 "eslint-config-airbnb": "^18.2.0",
    41 "eslint-config-prettier": "^6.11.0",
    42 "eslint-plugin-jsx-a11y": "^6.3.1",
    43 "eslint-plugin-prettier": "^3.1.4",
    44 "nodemon": "^2.0.4"
    45 },
    46 "engines": {
    47 "node": "12.x"
    48 }
    49}

    Jalankan perintah yarn install untuk install ulang semua package.

    Deploy API

    API akan menggunakan port yang disediakan heroku, oleh karena itu update file deploy/api/server.js pada bagian deklarasi port

    1...
    2const port = process.env.PORT || 3001;
    3...

    Heroku membutuhkan setiap project/aplikasi memiliki sebuah git repository.

    Step by Step

    1. Inisialisasi sebuah git repository untuk API. Jalankan perintah berikut:
    1$ cd api
    2$ git init
    3$ echo node_modules > .gitignore
    1. Buat sebuah aplikasi di heroku lewat heroku-cli
    1$ heroku create dinotes-api

    dinotes-api adalah nama dari aplikasi kita di heroku, kamu bisa menggunakan nama yang lain.


    Sebelum commit dan push repository ke heroku, kita perlu meningkatkan keamanan dari aplikasi DinoTes dengan tidak menyimpan informasi yang bersifat rahasia seperti password koneksi database di dalam source code.

    Hal ini dikarenakan kita menggunakan repository yang bersifat shared dan juga disimpan di github.

    Besar kemungkinan password atau informasi rahasia lainnya bisa tersebar dan diakses publik tanpa sengaja.

    Pada heroku kita bisa menggunakan feature config var untuk menyimpan info password koneksi ke database yang ada di dalam aplikasi DinoTes.

    • Navigasi ke heroku dashboard lalu pilih aplikasi dinotes-api.

    • Pada bagian Settings -> Config Vars isi dengan value berikut:

    KEY: MONGODB_URL

    VALUE: mongodb+srv://admin:password@cluster0.jznkw.mongodb.net/dinotesDB?retryWrites=true&w=majority

    heroku config var

    ganti password dengan password yang sudah ditentukan sebelumnya.

    • Update code dari deploy/api/server.js:
    1...
    2// Connection URL
    3const url = process.env.MONGODB_URL;
    4...

    1. Commit & Push repository ke heroku
    1$ heroku git:remote -a dinotes-api
    2$ git add .
    3$ git commit -m "Initial commit"
    4$ git push heroku master

    Jika tidak ada kendala maka kita akan mendapatkan output seperti ini:

    deploy process

    1. Agar heroku dapat mengakses MongoDB Atlas kita perlu membuka akses MongoDB Atlas agar bisa diakses dari semua alamat IP
    • Navigasi ke sidebar menu di MongoDB Atlas, pilih Network Access kemudian Edit koneksi

    mongodb atlas network access edit

    • Pilih Allow access from anywhere kemudian klik confirm

    mongodb atlas network access edit 2

    Testing API

    Sekarang REST API bisa diakses dari internet dengan alamat https://dinotes-api.herokuapp.com/.

    Alamat REST API dapat berbeda-beda, untuk mengetahui alamat dari REST API kita bisa lihat di dashboard heroku -> Settings -> Domains

    heroku find url

    Kemudian kita bisa test menggunakan Postman.

    Deploy client

    Step by Step

    1. Inisialisasi sebuah git repository. Jalankan perintah berikut:
    1$ cd client
    2$ git init
    3$ echo node_modules > .gitignore
    1. Buat sebuah aplikasi di heroku lewat heroku-cli

    Untuk memudahkan proses deployment di heroku kita akan menggunakan tool create-react-app-buildpack

    1$ heroku create -a dinotes-client -b https://github.com/mars/create-react-app-buildpack.git
    1. Update alamat REST API

    Kita tidak lagi menggunakan alamat http://localhost:3001 untuk alamat REST API, kita perlu update setiap file agar menggunakan alamat REST API yang baru yaitu https://dinotes-api.herokuapp.com.

    Tapi bagaimana jika alamat REST API terus berubah-ubah?

    Akan sangat merepotkan jika kita harus melakukannya secara manual dan satu per satu.

    Oleh karena itu kita akan memanfaatkan heroku config vars.

    • Tambahkan sebagai berikut

    KEY: REACT_APP_API_URL

    VALUE: https://dinotes-api.herokuapp.com

    heroku config var 2

    Kemudian dengan memanfaatkan fitur Search & Replace di VS Code kita bisa mengganti alamat http://localhost:3001 dengan process.env.REACT_APP_API_URL.

    search replace

    1. Commit & Push repository ke heroku
    1$ heroku git:remote -a dinotes-client
    2$ git add .
    3$ git commit -m "Initial commit"
    4$ git push heroku master

    Testing Client

    Sekarang kita bisa akses aplikasi dinotes dengan alamat https://dinotes-client.herokuapp.com

    Update aplikasi

    Jika kita ingin melakukan perubahan pada aplikasi DinoTes maka kita bisa lakukan langkah berikut:

    1. Clone repository dari heroku

    client

    1$ heroku git:clone -a dinotes-client
    2$ cd dinotes-client

    api

    1$ heroku git:clone -a dinotes-api
    2$ cd dinotes-api
    1. Deploy

    Selesai update, deploy kembali ke heroku

    1$ git add .
    2$ git commit -am "<message>"
    3$ git push heroku master

    perintah di atas berlaku baik untuk client atau server.

    Automatic Deploy

    Kita bisa memanfaatkan github untuk proses deploy otomatis.

    Setiap perubahan yang kita push ke github repository, heroku akan secara otomatis melakukan proses deploy.

    API

    Step by Step

    1. Buat sebuah repository baru di github

    Untuk repository API kita akan beri nama dinotes-api

    github create new repository

    1. Dari dalam folder deploy/api. Jalankan perintah berikut untuk push ke github
    1git remote add origin git@github.com:devsaurus-class/dinotes-api.git
    2git push -u origin master

    Sehingga jika kita jalankan perintah git remote -v kita akan dapatkan output seperti ini:

    github remote list

    Hal ini menunjukan bahwa aplikasi client DinoTes dapat di push ke dua git remote repository, satu di heroku dan satu lagi di github

    Selanjutnya kita ke dashboard heroku untuk mengatur automatic deployment menggunakan github.

    1. Pada menu Deploy -> Deployment method, pilih Github kemudian klik connect to GitHub

    heroku connect to github

    1. Setelah proses authorize berhasil cari repository dinotes-api kemudian klik connect

    heroku connect to github 2

    1. Terakhir klik button Enable Automatic Deploys

    heroku connect to github 3

    Dengan ini setiap kita update github repository, heroku akan deploy branch master secara otomatis.

    Client

    Karena langkahnya sama, maka kita bisa ulangi langkah 1-5 di atas namun dengan nama repository yang berbeda


    GitHub Repository aplikasi DinoTes: