Run Angular App on Docker

Docker Dec 31, 2021

Dear Pembaca setia,

Saat kita selesai men-develop suatu aplikasi menggunakan Angular, dan ingin men-deploy di semua tempat (server) tanpa harus bergantung dengan environment tempat tersebut, maka kita bisa menggunakan Docker untuk menaruh aplikasi kita. Informasi tentang Docker dapat dilihat di web resminya di https://www.docker.com/. Dan informasi tentang Angular juga dapat dilihat di web resminya di https://angular.io/.

Angular Build

Setelah pembuatan aplikasi Angular selesai, maka proses development akan berakhir di penulisan perintah berikut di terminal

ng build

Kemudian akan muncul folder /dist hasil compile-an dari perintah diatas. Folder /dist ini yang akan kita pergunakan untuk membuat Docker Image, yang akan kita distribusikan ke server dan di-deploy di sana.

Write a Dockerfile

Cara membuat Docker Image dari folder /dist tadi adalah, dengan cara membuat file Dockerfile, yang isinya

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

COPY /dist/my-angular-app /usr/share/nginx/html

Dockerfile (https://docs.docker.com/engine/reference/builder/) diatas berisi perintah untuk membuat Docker Image untuk aplikasi kita menggunakan Image dari NGINX (https://www.nginx.com/).

Write an nginx.conf

Setelah mendapatkan base image dari nginx, kemudian kita meng-copy file nginx.conf ke dalam Docker Image kita. Isi dari nginx.conf nya adalah

events{}

http {
    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Perintah terkahir dari Dockerfile, adalah meng-copy isi dari folder /dist/my-angular-app ke dalam Docker Image kita nantinya

Build our Docker Image

Setelah Dockerfile siap, folder /dist tersedia, dan file nginx.conf tersedia, maka perintah terakhir adalah membuat Docker Image dengan menjalankan perintah berikut di terminal

$ docker build -t my-docker-app

Tunggu hingga semua proses selesai: Download nginx image, sekitar 1-2 menit (tergantung kecepatan internet), dan pembuatan layering di Docker Image kita selesai. Total ~5 menit.

Kemudian, Docker Image kita bisa dijalankan dengan perintah berikut

$ docker run --name my-docker-app-container -p 127.0.0.1:8080:80 my-docker-app

Dan Container sudah siap diakses lewat browser di http://127.0.0.1:8080/.

Selamat mencoba.

Salam,

Penulis

Tags

Eldest Pasirula

Software Engineer, Blog Writer, $TSLA follower

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.