Cara melakukan Docker pada aplikasi React menggunakan Vite – Beragampengetahuan

Pada artikel ini, saya akan menunjukkan cara melakukan Docker pada aplikasi React yang dibangun dengan Vite. Kita akan mengalami:

1. Mengonfigurasi Vite untuk Docker
2. Buat Dockerfile
3. Buat file Tulis Docker
4. Bangun dan jalankan kontainer Docker

Setelah membaca artikel ini, Anda akan memiliki aplikasi React portabel yang dapat diterapkan di lingkungan apa pun.

Kami akan menggunakan aplikasi React yang dibuat dengan Vite, dan saya akan memandu Anda langkah demi langkah dalam membuat image Docker dan menjalankan aplikasi di container.

Untuk mengikuti tutorial ini, saya berasumsi bahwa Anda sudah familiar dengan dasar-dasar image dan container Docker. Kita akan mulai dengan penjelasan singkat tentang apa itu Docker, lalu mendalami proses praktisnya.

Docker adalah platform sumber terbuka yang mengemas aplikasi dan dependensinya ke dalam lingkungan terisolasi yang disebut container. Hanya dengan serangkaian instruksi kecil, Anda dapat dengan mudah membuat image dan menjalankannya sebagai container, menjadikan aplikasi Anda portabel dan konsisten di berbagai lingkungan.

Langkah 1: Konfigurasikan Vite untuk Docker

Pertama, kita perlu mengkonfigurasi Vite agar berjalan lancar di lingkungan Docker. Mari kita perbarui vite.config.js file untuk memastikan kompatibilitas.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    watch: {
      usePolling: true,
    },
  },
});

Dengan konfigurasi ini, kami memastikan bahwa server pengembangan mendengarkan pada port dan host yang benar, dan menggunakan polling sistem file untuk memantau perubahan saat berjalan di container.

Langkah 2: Buat Dockerfile

Sebelum membuat Dockerfile, izinkan saya menjelaskan terlebih dahulu apa itu Dockerfile. satu file buruh pelabuhan adalah skrip yang digunakan Docker untuk membuat image Docker. Ini berisi serangkaian instruksi yang menentukan cara mengatur lingkungan di dalam kontainer.

Sekarang, mari kita buat a Dockerfile Di direktori root proyek kami, tambahkan instruksi untuk membuat image Docker.

# Use an official Node runtime as a parent image
FROM node:alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 5173

# Command to run the app
CMD ["npm", "run", "dev"]

Langkah 3: Buat file Docker Compose

Sekarang, mari kita lanjutkan dan membuat file Docker Compose. Tapi pertama-tama, apa itu Docker Compose? Docker Compose adalah alat untuk mendefinisikan dan menjalankan aplikasi Docker multi-kontainer.

Mari kita membuat docker-compose.yml Tempatkan file di direktori root proyek kami dan tambahkan deskripsi yang diperlukan:

version: '3.8'
services:
  web:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true

Mari kita uraikan langkah-langkahnya docker-compose.yml File yang digunakan untuk menyebarkan proyek React Vite:

• version: '3.8':Tentukan versi file Docker Compose
• services:: Mendefinisikan daftar layanan yang akan dikelola Docker Compose
• web:: Ini adalah nama layanan kami.
• build: .: Memberi tahu Docker Compose untuk membuat image Docker menggunakan perintah berikut: Dockerfile di direktori saat ini
• ports: "5173:5173": Memetakan port internal kontainer 5173 ke port host 5173, memungkinkan Anda mengakses aplikasi Anda melalui
• volumes::Pasang direktori proyek pada host ke /app Direktori dalam wadah, memungkinkan pembaruan waktu nyata. Jilid 2 memastikan node_modules tidak akan ditimpa.
• environment::Menetapkan variabel lingkungan di dalam wadah. CHOKIDAR_USEPOLLING=true Pastikan aplikasi memantau dengan benar perubahan file dalam Docker.

Langkah 4: Bangun dan jalankan kontainer Docker

Sekarang, mari kita buat image Docker menggunakan perintah berikut:

docker-compose up --build

Perintah ini memberitahu Docker Compose untuk membuat image Docker berdasarkan Dockerfile dan kemudian memulai layanan. ini --build flag akan memaksa pembuatan ulang gambar meskipun tidak ada yang berubah.

Jalankan wadah

Setelah build selesai, Docker Compose akan memulai container secara otomatis. Anda dapat mengakses aplikasi Anda dengan menavigasi ke di peramban Anda.

sebagai kesimpulan

Kami telah berhasil melakukan Docker pada proyek React Vite dan menjalankannya dalam container Docker. Pengaturan ini memastikan bahwa aplikasi kita bersifat portabel dan dapat dengan mudah diterapkan di lingkungan apa pun.