Cara menggunakan aplikasi bahagian hadapan dan belakang yang kompleks menggunakan React dan Docker Compose-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-09-26 10:17:07

asal

1081 orang telah melayarinya

如何利用React和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:

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.
Buat aplikasi React
Buka terminal dan laksanakan arahan berikut untuk mencipta aplikasi React:
```
npx create-react-app my-app
cd my-app
```
Salin selepas log masuk

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"]

Salin selepas log masuk

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

Salin selepas log masuk

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

Bina imej aplikasi bahagian hadapan React
Laksanakan arahan berikut untuk membina imej aplikasi bahagian hadapan React:
```
docker-compose build
```
Salin selepas log masuk
Mulakan bahagian hadapan dan bahagian belakang applications
Laksanakan arahan berikut untuk memulakan aplikasi bahagian hadapan dan bahagian belakang:
```
docker-compose up
```
Salin selepas log masuk

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!