Page cover

ReactJs

Dockerize ReactJs Application

Menyiapkan Project

Clone react application yang akan di deploy dan masuk ke dalam directory tersebut. Jika belum ada, buat project terlebih dahulu. Dokumentasi menyiapkan framework reactjs ada disini: ReactJs

Menyiapkan File Docker

Siapkan beberapa file docker yang diperlukan

File
Deskripsi

file konfigurasi dari nginx

berisi file konfigurasi dari docker

list file dan directory yang diabaikan

mendefinisikan dan menjalankan aplikasi multi-kontainer Docker

nginx.conf

Buat directory .config terlebih dahulu, kemudian buat file nginx.conf didalam folder tersebut

nginx.conf
server {
    listen 5000;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

Dockerfile

Pada directory utama, buat file Dockerfile

.dockerignore

Pada directory utama, buat file .dockerignore

docker-compose.yml

Pada directory utama, buat file docker-compose.yml

Menjalankan Container

Build image dan jalankan container

Seharusnya aplikasi sudah bisa berjalan, buka browser dan akses IP server dengan port 5000 (http://127.0.0.1:5000arrow-up-right). Untuk menggunakan port lain, ganti setiap port pada file nginx.conf, Dockerfile, dan docker-compose.yml

tampilan pada browser

Referensi

github.com
ikantongkol.gitbook.io
www.digitalocean.com

Last updated