【保姆级教程】RuoYi前端项目在Linux服务器中使用宝塔面板进行Docker部署

本文是为初入前端、后端的小伙伴们准备的保姆级教程，也是我在学习中慢慢摸索出的一套基本流程，内容可能会有不正确的地方，欢迎在评论区指正，作者会持续关注错误之处，并完善这份文档。

---

前言

本文给出的是基于Linux服务器、RuoYi前端技术栈和Nginx运行环境的Docker部署方案，这样的部署方案在第一次的配置之后，可以做到非常方便的重新部署，只需要将新的dist包上传到文件夹，并在终端执行两段运行代码即可，相较于传统的Nginx或Tomcat部署方案，其运行环境相对独立，不会干扰服务器本身的运行环境，并且理论上可以在同一台服务器上部署非常多的前端系统，而不会相互干扰。

---

服务器准备

1.准备一个云服务器或者本地Linux服务器

这是一些云服务器厂商的官网：腾讯云官网 阿里云官网 华为云官网，各位自行按需选择，并且给服务器安装好Linux系统，建议Linux系统版本选择Centos7.x，对宝塔面板的兼容性更好，如果自己在本地配置Linux服务器，则需要自行配置好各项硬件和软件。

2.为服务器安装宝塔面板

进入宝塔面板官网，按照其中的教程给服务器安装宝塔面板，建议使用在线安装，输入服务器的IP、账号和密码，直接一键安装，安装时建议勾选安装MySQL和Nginx，其余的可以自行选择安装与否。安装好宝塔面板后，需要确认各端口是否已开启，例如宝塔面板的默认端口、MySQL的默认端口等，并且别忘了把要部署的前端接口也打开，如果没有开启，需要先在服务器的控制台中开启，再在宝塔面板的安全中开启，也就是说服务器本身有一道防火墙，宝塔面板也提供了一道防火墙，两道防火墙都开启，才可以正常访问对应的服务。

3.在服务器中安装Docker并下载镜像

在宝塔面板中点击Docker菜单，如果没有安装过Docker，则会显示安装提示，可以直接点击一键安装（比较省心），也可以在Docker官网中使用脚本方法进行安装（更复杂）。Docker安装完成之后，点开Docker菜单可以看到类似下面这样的页面：

在镜像页面中，点击搜索镜像，输入nginx，点击搜索，选择图中框选的镜像进行拉取，这个镜像是用来构建必要的Nginx环境。

---

开始部署

1.创建文件夹

在部署前端时，因为部署思路是使用Nginx镜像运行一个容器，容器内运行前端代码，所以首先在根目录中创建一个docker_files文件夹，用于放置dist包和配置文件：

在docker_files文件夹里面新建一个文件夹，用来存放前端的相关文件，名字随意，这里示例使用nginx命名，个人建议命名为你的项目名称，之后同一文件夹下部署多个项目时，可以有所区分：

新建的文件夹中分别创建conf（用于存放nginx配置文件）、html（用存放dist包）和logs（用于存放运行日志文件）文件夹：

2.创建Nginx配置文件

在conf文件夹中新建nginx.conf文件，里面书写如下nginx配置：

user  nginx;
worker_processes 1;
error_log  /var/log/nginx/error.log  warn;
pid        /var/run/nginx.pid;
events
    {
        worker_connections 1024;
    }
http {
    include /etc/nginx/mime.types ;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request"'
                    '$status $body_bytes_sent "$http_referer"' 
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile on;
    #tcp_nopush on;
    keepalive_timeout 65;
    #gzip on;
    include /etc/nginx/conf.d/*.conf;
}

注意，上面的配置文件仅限于普通Vue项目的部署，而对于RuoYi项目，则需要更进一步进行配置，配置代码如下：

user  nginx;
worker_processes 1;
error_log  /var/log/nginx/error.log  warn;
pid        /var/run/nginx.pid;
events
    {
        worker_connections 1024;
    }
http {
    include /etc/nginx/mime.types ;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request"'
                    '$status $body_bytes_sent "$http_referer"' 
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile on;
    #tcp_nopush on;
    keepalive_timeout 65;
    #gzip on;
    include /etc/nginx/conf.d/*.conf;
    server {
        listen 80;
        #所部署的服务器IP
        server_name xx.xxx.x.xxx ;
        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;
            #配套的RuoYi后端的IP地址+端口号
            proxy_pass http://xx.xxx.x.xxx:xxxx/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

如果你严格按照我提供的步骤进行部署，那么你只需要修改server_name xx.xxx.x.xxx和proxy_pass http://xx.xxx.x.xxx:xxxx/这两行即可，其他的不需要更改，而此配置文件中，proxy_pass必须是后端的IP地址+端口号，如果你的后端是域名，即https://xx.xx.xx这样的地址，那还需要进行域名解析，这部分需要另寻他法，作者没有研究过域名类型的部署方法。

代码含义：
监听80端口（Docker内部的nginx是运行在80端口的）；
将serve_name设置为服务器的地址；
将location当中的root是Docker中前端运行代码存放的位置，这是因为我们之后要将宿主机（部署的服务器）中的/docker_files/nginx/html/dist地址映射绑定到了Docker（运行Nginx的容器）内的/usr/share/nginx/html地址，所以我们root处修改为Docker内的/usr/share/nginx/html地址；
使用location /prod-api/中的配置将前端和后端相连，proxy_pass http://xx.xxx.x.xxx:xxxx/这条即为后端接口的地址，具体后端的接口地址根据自己的填写。

3.上传dist包

接下来，将打包好的dist包上传到html文件夹下：

4.运行Docker容器

一切准备就绪，接下来在控制台中分步执行如下指令，注意第二条指令好多行是一条指令，建议先在txt文档中编辑好，直接粘贴：

# 第一条指令
cd ../
# 第二条指令
docker run -id --name=bdosr-ui-ruoyi \
-p 82:80 \
-v $PWD/docker_files/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v $PWD/docker_files/nginx/logs:/var/log/nginx \
-v $PWD/docker_files/nginx/html/dist:/usr/share/nginx/html \
nginx

代码含义：
第二行，回到根目录，这点很重要
第三行，运行容器，容器的名字是bdosr-ui-ruoyi，这个自己根据需求随意起；
第四行，将容器的80端口映射到宿主机的82端口，根据自己的需求随意修改，别忘了在安全中开启该端口；
第五至七行，将宿主机的docker_files/nginx里面的那些文件夹或文件映射到容器里对应的位置，具体位置根据自己刚刚创建文件夹的路径修改；
第八行，运行的镜像是nginx。

指令输入完，点击回车，如果一切操作没问题，你会看到终端返回了一串字符，这个是容器的ID，也就证明部署完成。

5.部署完成

如图方式点击日志后，可以查看容器的运行日志，可以看到，容器日志和控制台输出是一样的，至此RuoYi前端的Docker部署就完成了。

---

重新部署

当修改前端项目程序后，就需要重新部署服务，而经过第一遍的配置之后，重新部署变得非常容易，熟练之后，操作会非常迅速。

1.删除容器

在Docker页面，点击容器，删除旧的容器：

2.重新上传dist包并运行指令

将/docker_files/nginx/html文件夹内的旧dist包删除，之后上传新的dist包，再到终端中重新运行这两条命令即可：

cd ../

docker run -id --name=bdosr-ui-ruoyi \
-p 82:80 \
-v $PWD/docker_files/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v $PWD/docker_files/nginx/logs:/var/log/nginx \
-v $PWD/docker_files/nginx/html/dist:/usr/share/nginx/html \
nginx