Bagaimana untuk Melindungi Aplikasi React

Bagaimana untuk Melabuhkan Aplikasi React

Mengedok aplikasi React boleh menyelaraskan aliran kerja pembangunan anda, memastikan persekitaran yang konsisten merentas pelbagai peringkat pembangunan dan memudahkan proses penggunaan. Panduan ini akan memandu anda melalui langkah-langkah untuk Dockerize aplikasi React, daripada menyediakan persekitaran Docker kepada membina dan menjalankan imej Docker.

Prasyarat

1. Docker: Pastikan Docker dipasang pada mesin anda. Anda boleh memuat turunnya daripada tapak web rasmi Docker.

2. Aplikasi React: Anda sepatutnya mempunyai aplikasi React yang dibuat menggunakan create-react-app atau kaedah lain. Jika anda tidak mempunyai satu, anda boleh mencipta apl asas menggunakan create-react-app.
   

npx create-react-app my-react-app
cd my-react-app

Langkah 1: Buat fail Docker

Fail Docker ialah skrip yang mengandungi satu siri arahan tentang cara membina imej Docker untuk aplikasi anda. Dalam direktori akar aplikasi React anda, buat fail bernama Dockerfile dengan kandungan berikut:

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

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the React app
RUN npm run build

# Install a simple server to serve the React app
RUN npm install -g serve

# Set the command to run the server
CMD ["serve", "-s", "build"]

# Expose port 3000
EXPOSE 3000

Langkah 2: Cipta Fail .dockerignore

Fail .dockerignore menentukan fail dan direktori yang harus diabaikan semasa menyalin fail ke imej Docker. Ini boleh membantu mengurangkan saiz imej dan mempercepatkan proses binaan. Cipta fail .dockerignore dalam direktori akar dengan kandungan berikut:

node_modules
build
.dockerignore
Dockerfile
.git
.gitignore

Langkah 3: Bina Imej Docker

Untuk membina imej Docker untuk aplikasi React anda, navigasi ke direktori akar aplikasi anda dan jalankan arahan berikut:

docker build -t my-react-app .

Arahan ini memberitahu Docker untuk membina imej dengan tag my-react-app menggunakan direktori semasa (.) sebagai konteksnya.

Langkah 4: Jalankan Kontena Docker

Setelah imej Docker dibina, anda boleh menjalankannya dalam bekas menggunakan arahan berikut:

docker run -p 3000:3000 my-react-app

Arahan ini memetakan port 3000 pada mesin tempatan anda kepada port 3000 dalam bekas, membolehkan anda mengakses aplikasi React dalam penyemak imbas anda di http://localhost:3000.

Langkah 5: Karang Docker (Pilihan)

Jika anda ingin mengurus berbilang bekas atau menambah lebih banyak konfigurasi, anda boleh menggunakan Docker Compose. Cipta fail docker-compose.yml dalam direktori akar dengan kandungan berikut:

version: '3'

services:
  react-app:
    build: .
    ports:
      - "3000:3000"

Untuk memulakan perkhidmatan yang ditakrifkan dalam fail docker-compose.yml, jalankan arahan berikut:

docker-compose up

Kesimpulan

Dengan mengikuti langkah-langkah ini, anda telah berjaya melabuhkan aplikasi React anda. Melakukan dockering aplikasi anda bukan sahaja memastikan konsistensi merentas persekitaran yang berbeza tetapi juga memudahkan proses penempatan, menjadikannya lebih mudah untuk mengurus dan menskalakan aplikasi anda.

Sumber Tambahan

• Dokumentasi Docker
• Dokumentasi React
• Dokumentasi Karang Docker

Jangan ragu untuk menyesuaikan konfigurasi Dockerfile dan Docker Compose mengikut keperluan khusus projek anda. Selamat Berlabuh!

Atas ialah kandungan terperinci Bagaimana untuk Melindungi Aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!