Cara menggunakan aplikasi bahagian hadapan dan belakang yang kompleks menggunakan React dan Docker Compose

Cara untuk menggunakan aplikasi bahagian hadapan dan belakang yang kompleks menggunakan React dan Docker Compose

Ikhtisar
Dalam pembangunan perisian moden, menggunakan aplikasi menggunakan teknologi kontena telah menjadi amalan arus perdana dan disyorkan. Antaranya, Docker ialah alat penggunaan kontena yang popular, dan React ialah perpustakaan JavaScript yang berkuasa yang digunakan untuk membina antara muka pengguna. Artikel ini akan memperkenalkan cara menggunakan React dan Docker Compose untuk menggunakan aplikasi bahagian hadapan dan belakang yang kompleks.

1. Persediaan
Sebelum kita mula, kita perlu mempunyai persediaan berikut:

1. Pasang Docker dan Docker Compose
   Lawati tapak web rasmi Docker (https://www.docker.com/get-started) untuk memuat turun dan Pasang Docker dan Docker Compose.

2. Buat aplikasi React
   Buka terminal dan laksanakan arahan berikut untuk mencipta aplikasi React:

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

2. Buat fail bernama Dockerfile dalam direktori akar projek dan tambah kandungan berikut:

# 基于Node镜像构建
FROM node:14-alpine

# 创建工作目录
WORKDIR /app

# 安装项目依赖
COPY package*.json ./
RUN npm install

# 拷贝项目代码
COPY . .

# 构建生产环境代码
RUN npm run build

# 暴露容器端口
EXPOSE 80

# 启动应用
CMD ["npm", "start"]

3. Buat fail docker-compose.yml

Buat fail bernama docker-compose.yml dalam direktori akar projek dan tambah kandungan berikut:

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 3000:80
    volumes:
      - ./src:/app/src
      - ./public:/app/public
  backend:
    image: your-backend-image
    ports:
      - 8080:8080

Dalam konfigurasi di atas, kami menentukan dua perkhidmatan:

Penggantian Gunakan imej nama ke bahagian belakang anda sendiri. web 和 backend。web服务是我们的React前端应用，backend是我们的后端应用。注意，将 your-backend-image

4. Bina dan mulakan aplikasi

1. Bina imej aplikasi bahagian hadapan React

   Laksanakan arahan berikut untuk membina imej aplikasi bahagian hadapan React:
   

   docker-compose build

2. Mulakan bahagian hadapan dan bahagian belakang applications

   Laksanakan arahan berikut untuk memulakan aplikasi bahagian hadapan dan bahagian belakang:
   

   docker-compose up

Pada ketika ini, kami telah berjaya menggunakan aplikasi bahagian hadapan React dan aplikasi bahagian belakang bersama-sama dalam bekas Docker. Anda boleh melihat antara muka aplikasi React dengan melawati http://localhost:3000, dan mengakses aplikasi backend dengan melawati http://localhost:8080.

5. Penyepaduan dan penggunaan berterusan

Untuk mencapai penyepaduan dan penggunaan berterusan, anda boleh menggunakan alatan CI/CD, seperti Jenkins, GitLab CI, dsb. Anda boleh menambah langkah binaan dan penggunaan pada saluran paip CI/CD anda untuk membina dan menggunakan aplikasi terkini secara automatik apabila kod berubah.

6. Ringkasan

Artikel ini memperkenalkan cara menggunakan React dan Docker Compose untuk menggunakan aplikasi bahagian hadapan dan belakang yang kompleks. Melalui penggunaan kontena, kami boleh memudahkan konfigurasi persekitaran dan meningkatkan kemudahalihan dan kebolehskalaan aplikasi. Saya berharap melalui pengenalan artikel ini, anda boleh berjaya menggunakan aplikasi bahagian hadapan dan belakang serta mendalami pemahaman anda tentang React dan Docker Compose. Semoga permohonan anda berjalan dalam talian dengan lancar!

Atas ialah kandungan terperinci Cara menggunakan aplikasi bahagian hadapan dan belakang yang kompleks menggunakan React dan Docker Compose. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!