Tutorial on using Docker to deploy the front-end and back-end separated version of Ruoyi

• introduce
• Preparation
• Build the Vue front-end Docker image
• Build the Spring Boot backend Docker image
• Start the Dockerized Zoey application

---

1 Introduction

In modern application development, using Docker for application deployment has become a trend. This article will introduce in detail how to use Docker to deploy the front-end and back-end separated versions of the RuoYi project in order to manage and expand the application more efficiently.

2. Preparation

Before starting, make sure you have Docker installed. If the project includes Vue.js front-end and Spring Boot back-end, we will create Docker images for them respectively.

3. Build the Vue front-end Docker image

First, we need to build the Docker image for the Vue frontend. The build steps are already defined in the Dockerfile you provided. We can deploy the Vue frontend as a static resource by copying the application code into Nginx's default web directory.

Create docker-compose.yml, Dockerfile, nginx.conf in the ruoyi-ui root directory

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

Dockerfile

# 使用 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;
        }
    }
}

Finally run the command to create the docker image

docker build -t xhs-frontend -f Dockerfile .

4. Build the Spring Boot backend Docker image

For the Spring Boot backend, your Dockerfile defines the build steps. This will be based on the official OpenJDK 8 image, copy the built JAR file into the container, and set the application's startup command.

Created in the root directory of Ruoyi ruoyi-admin

Dockerfile

# 使用官方的 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

Finally run the command to create the docker image

docker build -t xhs-backend -f Dockerfile .

5. Start the Dockerized Zoey application

docker-compose up -dYou can launch your entire Dockerized Zoey application by navigating to the directory containing the Docker Compose file in the terminal and running the command. Nginx will listen on port 80 and distribute requests to the front-end and back-end containers.

By following the above steps, you can easily use Docker to deploy the front-end and back-end separated versions of your project. This deployment method provides better scalability, management, and environmental isolation, allowing you to focus more on application development and feature improvements.

docker-compose up -d