Tutorial sobre el uso de Docker para implementar la versión separada de front-end y back-end de Ruoyi

• introducir
• Preparación
• Cree la imagen Docker del front-end de Vue
• Cree la imagen de Docker del backend de Spring Boot
• Inicie la aplicación Dockerizada Zoey

---

1. Introducción

En el desarrollo de aplicaciones moderno, el uso de Docker para la implementación de aplicaciones se ha convertido en una tendencia. Este artículo presentará en detalle cómo usar Docker para implementar las versiones separadas de front-end y back-end del proyecto RuoYi para administrar y expandir la aplicación de manera más eficiente.

2. Preparación

Antes de comenzar, asegúrese de tener instalado Docker. Si el proyecto incluye el front-end de Vue.js y el back-end de Spring Boot, crearemos imágenes de Docker para ellos respectivamente.

3. Cree la imagen de Docker del front-end de Vue

Primero, necesitamos crear la imagen de Docker para la interfaz de Vue. Los pasos de compilación ya están definidos en el Dockerfile que proporcionó. Podemos implementar la interfaz de Vue como un recurso estático copiando el código de la aplicación en el directorio web predeterminado de Nginx.

Cree docker-compose.yml, Dockerfile, nginx.conf en el directorio raíz de ruoyi-ui

docker-compose.yml

version: '3'
services:
  spring-backend:
    image: xhs-backend
    networks:
      - xhs-network
    ports:
      - "8080:8080"

  vue-frontend:
    image: xhs-frontend
    networks:
      - xhs-network
    ports:
      - "81:80"

networks:
  xhs-network:
    driver: bridge

archivo acoplable

# 使用 Nginx 作为基础镜像
FROM nginx:latest

COPY nginx.conf /etc/nginx/nginx.conf

# 将构建好的应用拷贝到 Nginx 的默认 web 目录
COPY dist /usr/share/nginx/html

# Expose 端口
EXPOSE 80

# 启动 Nginx 服务器
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  127.0.0.1;
		    charset utf-8;

		location / {
			root   /usr/share/nginx/html;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://spring-backend:8080/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Finalmente ejecute el comando para crear la imagen de la ventana acoplable.

docker build -t xhs-frontend -f Dockerfile .

4. Cree la imagen de Docker del backend de Spring Boot

Para el backend de Spring Boot, su Dockerfile define los pasos de compilación. Esto se basará en la imagen oficial de OpenJDK 8, copiará el archivo JAR creado en el contenedor y configurará el comando de inicio de la aplicación.

Creado en el directorio raíz de Ruoyi ruoyi-admin

archivo acoplable

# 使用官方的 OpenJDK 8 镜像作为基础镜像
FROM openjdk:8-jre-slim

RUN apt-get update && apt-get install -y libfreetype6 fontconfig
ENV JAVA_OPTS="-Djava.awt.headless=true -Djava.awt.fonts=/usr/lib/x86_64-linux-gnu"

# 设置工作目录
WORKDIR /app

# 将构建好的 JAR 文件复制到容器中
COPY target/ruoyi-admin.jar app.jar

# 暴露应用程序端口
EXPOSE 8080

# 启动应用程序
CMD java $JAVA_OPTS -jar app.jar

Finalmente ejecute el comando para crear la imagen de la ventana acoplable.

docker build -t xhs-backend -f Dockerfile .

5. Inicie la aplicación Dockerizada Zoey.

docker-compose up -dPuede iniciar toda su aplicación Dockerized Zoey navegando al directorio que contiene el archivo Docker Compose en la terminal y ejecutando el comando. Nginx escuchará en el puerto 80 y distribuirá solicitudes a los contenedores front-end y back-end.

Si sigue los pasos anteriores, puede usar Docker fácilmente para implementar las versiones separadas de front-end y back-end de su proyecto. Este método de implementación proporciona mejor escalabilidad, administración y aislamiento ambiental, lo que le permite concentrarse más en el desarrollo de aplicaciones y mejoras de funciones.

docker-compose up -d