Melabuhkan Aplikasi Bahagian Hadapan Anda dengan Nginx untuk Penggunaan Yang Lancar

pengenalan

Lazimnya, menggunakan aplikasi bahagian hadapan memerlukan pengasingan penyajian aset statik daripada API bahagian belakang. Pendekatan yang baik untuk ini adalah dengan menggabungkan Nginx sebagai proksi terbalik dan pelayan web dengan Docker untuk kontena. Panduan ini membawa anda melalui proses cara menggunakan aplikasi frontend menggunakan Nginx dan Docker.

Prasyarat

Cara Mengatur Aplikasi Frontend Menggunakan Nginx dan Docker
Pengenalan
Menggunakan aplikasi bahagian hadapan dengan cekap selalunya melibatkan pengasingan penyajian aset statik daripada API bahagian belakang. Pendekatan yang hebat adalah menggabungkan Nginx sebagai proksi terbalik dan pelayan web dengan Docker untuk kontena. Panduan ini membimbing anda melalui proses menggunakan aplikasi frontend menggunakan Nginx dan Docker.

Prasyarat
Untuk mengikuti panduan ini, anda sepatutnya mempunyai:

• Pengetahuan asas React (atau mana-mana rangka kerja frontend).
• Keakraban dengan Docker dan Nginx.

Menyediakan Aplikasi

Struktur projek yang jelas memudahkan penggunaan. Letakkan semua fail yang diperlukan dalam folder untuk membina imej Docker anda. Fail ini hendaklah mengandungi:

• binaan/ folder (mengandungi fail statik sedia pengeluaran).
• Fail Docker(mentakrifkan cara imej dibina).
• nginx.conf (konfigurasi Nginx tersuai).
• didayakan tapak/ (konfigurasi Nginx tambahan pilihan).

Untuk penjelasan mendalam tentang konfigurasi Nginx, rujuk ini

Tingkatkan Tindak Balas: Melepaskan Kuasa Nginx untuk Penggunaan Yang Mudah

Amit Kumar Rout ・ 9 Dis '23

#javascript #tutorial #react #nginx

Langkah-langkah:

1. Bina versi pengeluaran aplikasi anda:

npm run build

Arahan ini mencipta binaan/ direktori yang mengandungi fail statik yang dioptimumkan.

1. Buat fail Docker: Tulis fail Docker berikut untuk menentukan bekas:

FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Membina Imej Docker

Setelah fail anda sedia, bina imej Docker:

docker build -t my-app-img:prod .

Jika menggunakan VM lain, anda boleh membungkus imej sebagai fail .tar:

docker save my-app-img > my-app-img.tar

Menjalankan Imej Docker

Pilihan 1: Menjalankan imej secara terus

1. Muat imej Docker daripada fail .tar (jika memindahkan antara sistem):

cat my-app-img.tar | docker load

1. Jalankan bekas:

docker run -itd -p 80:80 --name my-app my-app-img

Ini memulakan bekas, mendedahkannya pada port 80.

Pilihan 2: Menjalankan Docker Compose

Mencipta fail docker-compose.yml:

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled

Kemudian, mulakan bekas:

docker-compose up -d

Kesimpulan

Penggunaan Nginx dan Docker untuk menggunakan aplikasi frontend memberikan penyelesaian yang kukuh dan berskala. Ini kerana ia memisahkan aset statik daripada API bahagian belakang, memberikan prestasi terbaik. Sesuaikan konfigurasi Nginx anda untuk memenuhi keperluan anda, seperti:

• Menambah SSL/TLS untuk sokongan HTTPS.
• Hidupkan caching untuk prestasi tinggi.

Persediaan ini membolehkan aplikasi bahagian hadapan anda boleh dipercayai dalam persekitaran sedia pengeluaran.

Jika anda mempunyai sebarang cadangan untuk menambah baik proses, sila tinggalkan di bahagian komen. Jika anda mendapati siaran ini membantu, sila like dan kongsikannya.

Selamat Pengekodan!

Atas ialah kandungan terperinci Melabuhkan Aplikasi Bahagian Hadapan Anda dengan Nginx untuk Penggunaan Yang Lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!