Config Docker Untuk Webapp React Dan Nginx Dengan Aws EC2

Source : https://miro.medium.com/max/923/1*KfU9UUw0k96uLAvDmCjs2A.png

Hai teman-teman, pada tulisan kali ini saya akan berbagi cara mengkonfigurasi docker yang didalamnya menjalankan webapp dengan web server nginx yang kurang lebih arsitekturnya seperti ini

Arsitektur WebApp

binggungkan? :D, dari pada lama-lama mari langsung kita eksekusi aja ya

Persiapan

• WebApp React yang sudah siap, kalau belum punya bisa menggunakan repo ini
• Siapakan Server EC2 Aws
• Siapkan Putty atau Bitvise untuk ssh server jika menggunakan windows, kalau menggunakan Linux Install dulu ssh buat client

Siapkan Server

1. Masuk Kedalam server EC2 yang telah anda buat dengan ssh, pada tulisan ini os untuk server menggunakan Ubuntu server 18.04
2. Update repo dengan

$ sudo apt update

$ sudo apt upgrade

3. install docker

$ sudo apt install docker.io

4. Install docker-compose

$ sudo curl -L “https://github.com/docker/compose/releases/download/1.26.0/docker-compose-$(uname -s)-$(uname -m)” -o /usr/local/bin/docker-compose

$ sudo chmod +x /usr/local/bin/docker-compose

$ sudo docker-compose -v

output

docker-compose version 1.25.5, build 8a1c60f6

5. Install NodeJs

$ sudo apt-get install curl

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

$ sudo apt-get install nodejs

Setelah server selesai mari kita lanjutkan untuk build webapp

Build WebApp (Production Mode)

1. git clone dulu project dari github

$ git clone <link repo>

2. masuk kedalam project

$ cd <nama project>

3. Install semua package

$ npm install

4. build webappnya

$ npm run build

oke WebApp siap untuk di Dockerize menggunakan docker-compose, tapi sebelum itu kita siapkan config untuk webserver-nya dalam tulisan ini kita menggunakan nginx

Config nginx

1. buat sebuah directory (folder) didalam project kita untuk menyimpan config nginx-nya.

$ mkdir <nama directory>

2. masuk kedalam directory tersebut dan file baru dengan nama nginx.conf

$ cd <nama directory>

$ touch nginx.conf

3. buka file nginx.conf dan masukan config seperti dibawah ini

$ sudo nano nginx.conf

nginx.conf

Jika ingin menggunakan DNS default dari aws dapat dilihat pada gambar dibawah ini.

DNS Default AWS

kemudian keluar dengan crtl+x lalu ketikan y kemudian enter, setelah selesai config file nginx.conf kembali ke root folder dengan cara

$ cd ..

Oke setelah config untuk webserver telah selesai mari kita lanjutkan untuk config docker-compose.

Config docker-compose

1. buat file docker-compose nya

$ touch docker-compose.yml

2. masukan config ini

3. setelah itu jalankan docker-compose

$ sudo docker-compose up -d

4. lihat docker-compose sudah berjalan dengan baik apa belum dengan cara

$ sudo docker-compose ps

jika sudah seperti ini maka docker anda telah berjalan dengan baik

$ sudo docker-compose ps

mari kita cek apakah menggunakan dns default dari AWS nya (sesuai dengan config nginx.conf)

jika sudah muncul seperti ini

tampilan home dari webapp

Selamat WebApp anda telah berhasil dideploy menggunakan docker !!! :)