Jika Anda bekerja di perusahaan teknologi sebagai insinyur perangkat lunak, kemungkinan besar Anda akan sering diminta untuk membuat dan menerapkan aplikasi. Aplikasi ini biasanya aplikasi web yang dibangun di atas kerangka kerja seperti React, Redux, atau Vue.js. Aplikasi adalah hasil akhir dari pengembangan perangkat lunak dan bukan hanya file lain dengan beberapa lapisan folder dan file.

Kontainer Docker dapat digunakan untuk mengemas aplikasi Anda sehingga dapat berjalan di lingkungan apa pun tanpa memerlukan dependensi atau pustaka yang telah diinstal sebelumnya. Dalam tutorial ini, kami akan membahas semua yang perlu Anda ketahui tentang Aplikasi Web berbasis Dockerizing React serta contoh proyek yang akan membawa Anda melalui seluruh proses dari awal hingga akhir.
Apa itu Docker?

Docker adalah perangkat lunak sumber terbuka yang memungkinkan Anda untuk menampung aplikasi Anda. Containerization adalah proses yang memungkinkan Anda menjalankan aplikasi di dalam lingkungan mesin virtual. Kontainer dapat berjalan di mesin apa pun tanpa perlu menginstal dependensi pada mesin host.

Containerization adalah opsi yang bagus untuk menerapkan aplikasi ke lingkungan produksi. Ini memastikan bahwa aplikasi sepenuhnya mandiri dan hanya membutuhkan set dependensi minimal untuk berfungsi dengan baik. Ini mengurangi risiko memperkenalkan dependensi yang dapat memengaruhi aplikasi atau layanan lain pada host yang sama. Ini juga memudahkan untuk mereproduksi lingkungan produksi pada mesin pengembangan.
Mengapa Anda Harus Meng-Dockerisasi Aplikasi Web Anda?

Jika Anda berencana untuk menerapkan aplikasi Anda ke produksi, Anda harus mempertimbangkan untuk menggunakan Docker. Ini akan memungkinkan Anda untuk menjalankan aplikasi Anda di lingkungan apa pun tanpa persyaratan menginstal dependensi pada machine.

Dockerizing aplikasi Anda memastikan bahwa aplikasi Anda akan berjalan dalam produksi persis seperti yang dimaksudkan. Ini juga memungkinkan Anda berbagi aplikasi dengan mudah dengan orang lain di organisasi Anda dengan menerbitkannya di Docker Hub atau registry publik lainnya. Ada beberapa alasan mengapa Anda harus mempertimbangkan Dockerisasi aplikasi Anda.

Alasan pertama adalah karena ini menjamin aplikasi Anda akan berjalan dalam produksi persis seperti yang dimaksudkan karena Anda dapat mengujinya di lingkungan yang sama pada mesin pengembangan Anda. Alasan kedua adalah memungkinkan orang-orang di organisasi Anda untuk dengan mudah mereproduksi lingkungan produksi Anda di mesin mereka dengan menjalankan aplikasi Anda di dalam sebuah container.
Langkah 1 – Membuat Aplikasi React

Pertama, buat aplikasi reaksi dasar di sistem Anda. Petunjuk di bawah ini akan membantu Anda menginstal Node.js dan create-react-app module.
Sebelum memulai, Anda harus menginstal Node.js di mesin Anda. Pada sistem berbasis Debian, Anda dapat menggunakan perintah berikut untuk menginstal Node.js.

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt install nodejs 

Setelah menginstal Node.js, gunakan perintah npm untuk menginstal modul create-react-app secara global.

sudo npm install create-react-app --target=global 

Once Anda telah menginstal CRA, Anda dapat melanjutkan dan membuat proyek React dengan menjalankan perintah berikut.

npx create-react-app my-app 

Perintah di atas akan membuat direktori my-app dengan aplikasi reaksi dasar. Anda dapat mengubah ke direktori yang baru dibuat dan mulai mereaksikan aplikasi menggunakan perintah yang disebutkan di bawah ini.

cd my-app npm start ]praAplikasi reaksi default akan dimulai pada port 3000. Anda dapat membuka browser web dan akses aplikasi reaksi di http://localhost:300 atau gunakan alamat IP sistem.

Aplikasi reaksi default Anda sudah siap sekarang.
Langkah 2 – Buat Dockerfile untuk Aplikasi React

Setelah Anda membuat aplikasi reaksi, Anda dapat melanjutkan dan membuat Dockerfile untuk aplikasi Anda. File ini akan berisi semua instruksi untuk membangun aplikasi Anda di dalam sebuah wadah. Buat file baru bernama Dockerfile di dalam direktori root proyek Anda, dan tambahkan kode berikut ke dalamnya.
vim Dockerfile 

Tambahkan kode berikut ke file:
# Using node:16- alpine base image FROM node:16-alpine # Atur /app sebagai direktori kerja default WORKDIR /app # salin package.json ke direktori kerja untuk instalasi paket COPY package.json /app # Instal dependensi npm RUN yarn install # Salin semua file proyek ke direktori kerja COPY . . # Buka port aplikasi Anda untuk diikat dengan port host EXPOSE 3000 # jalankan aplikasi Anda CMD [`yarn`, `run`, `start`] 

Mari kita urai setiap baris kode di atas untuk memahami apa yang dilakukannya.
FROM – Ini adalah nama gambar dasar yang akan Anda gunakan untuk membuat wadah Anda. Anda harus menggunakan Alpine Linux, karena ringan dan memiliki semua alat yang diperlukan untuk aplikasi Anda. WORKDIR – Ini menentukan direktori kerja untuk mengeksekusi instruksi selanjutnya di Dockerfile. Ini akan menjadi direktori yang dipasang di dalam wadah sebagai /app. COPY – Ini digunakan untuk menyalin semua file dan folder dari direktori saat ini ke direktori kerja. SALIN. . akan menyalin semua file dan folder dari direktori saat ini ke direktori kerja menggunakan salinan rekursif. Ini berarti, bahkan folder tersembunyi akan disalin juga. RUN – Ini digunakan untuk menjalankan perintah di dalam container. Di sini, kami menggunakan npm install, yang akan menginstal semua dependensi di dalam wadah. EXPOSE – Ini digunakan untuk mengekspos port 3000 pada container. Port ini akan digunakan untuk meng-host aplikasi React. Langkah 3 – Bangun dan Jalankan Docker Container
 Selanjutnya, buat image Docker dengan menjalankan perintah yang disebutkan di bawah ini. Di sini "react-app" adalah nama gambar.
docker build -t react-app . ]praGambar ini akan dibuat di registri gambar lokal. Kemudian Anda dapat membuat wadah Docker dengan perintah berikut.
sudo docker run -it -p 3000:3000 -d react-app 
Sekarang, verifikasi bahwa wadah sedang berjalan di sistem Anda.
docker container ls ]sebelumnya, buka browser dan sambungkan ke localhost pada port 3000 (atau gunakan port yang Anda tentukan sendiri). Anda akan melihat react application.

Anda dapat menggunakan Dockerfile untuk mengotomatiskan pembuatan dan pembaruan gambar Anda. Ini berguna jika Anda bekerja dengan tim dan orang-orang menambahkan kode ke aplikasi yang sama.
Langkah 4 – Membuat File Konfigurasi Docker-compose

Mari kita lanjutkan dan jalankan aplikasi React dengan Docker Compose. Buka file baru bernama docker-compose.yml di dalam direktori root proyek Anda, dan tambahkan kode berikut ke it.
version: `3` services: client: stdin_open: true build: context: . port: - "3000:3000" 

Simpan file dan tutup.

Kemudian jalankan perintah berikut untuk membangun dan menjalankan wadah buruh pelabuhan.
sudo docker-compose build Sudo docker-compose up -d
Conclusion

Dalam ini artikel, kami membahas mengapa Anda harus melakukan Dockerisasi aplikasi Anda dan bagaimana melakukannya. Kami juga membahas manfaat menggunakan Docker, versi Docker yang berbeda, struktur file Docker, dan cara menjalankan container. Kami juga membahas cara membangun dan menerapkan aplikasi React menggunakan Create-React-App dan Docker.

Jika Anda bekerja dengan aplikasi berbasis React, Anda akan mendapat banyak manfaat dari Dockerizing aplikasi Anda. Ini memastikan bahwa aplikasi Anda akan berjalan dalam produksi persis seperti yang dimaksudkan dengan mengujinya di lingkungan yang sama dengan mesin pengembangan Anda. Ini juga memudahkan orang-orang di organisasi Anda untuk mereproduksi lingkungan produksi Anda di mesin mereka.


Referensi tecadmin.com