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

Copy
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:

Copy
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

Copy
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.

2. Kita perlu update package.json untuk client karena ada beberapa package yang sudah tidak dibutuhkan lagi

Copy
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

Copy
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:

Copy
1$ cd api
2$ git init
3$ echo node_modules > .gitignore

2. Buat sebuah aplikasi di heroku lewat heroku-cli

Copy
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

ganti password dengan password yang sudah ditentukan sebelumnya.

• Update code dari deploy/api/server.js:

Copy
1...
2// Connection URL
3const url = process.env.MONGODB_URL;
4...

3. Commit & Push repository ke heroku

Copy
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:

4. 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

• Pilih Allow access from anywhere kemudian klik confirm

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

Kemudian kita bisa test menggunakan Postman.

Deploy client

Step by Step

1. Inisialisasi sebuah git repository. Jalankan perintah berikut:

Copy
1$ cd client
2$ git init
3$ echo node_modules > .gitignore

2. Buat sebuah aplikasi di heroku lewat heroku-cli

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

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

3. 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

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

4. Commit & Push repository ke heroku

Copy
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

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

api

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

2. Deploy

Selesai update, deploy kembali ke heroku

Copy
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

2. Dari dalam folder deploy/api. Jalankan perintah berikut untuk push ke github

Copy
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:

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.

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

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

5. Terakhir klik button Enable Automatic Deploys

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:

• API

• Client