第一次尝试部署前端，把dist文件夹上传到/home/magicat/Ruoyi/ruoyi_ui中,下面是我的目录结构

/home/magicat/RuoYi/ruoyi_ui/
├── html/          # 子目录
├── static/
├── styles/
├── favicon.ico
├── index.html     # 主文件在此层级
└── robots.txt

然后去修改对应的nginx.conf文件，location部分内容是这样的（错误示范）

location / {
           root   /home/magicat/RuoYi_try/ruoyi_ui;

            index  index.html index.htm;
            try_files $uri $uri/ /index.html?$args;
            autoindex off;
            charset utf-8;
        }

然后就是死活找不到我的html文件，一直显示500的报错。

后来看到docker安装nginx,转发时500报错_docker nginx 500-CSDN博客文章的最后一句去试了一下，把我打包好的前端文件复制了一份到nginx/html文件里，这是改正后的location部分代码（正确版）

location / {
          
            root /usr/share/nginx/html/ruoyi_ui;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html?$args;
            autoindex off;
            charset utf-8;
        }

竟然行了！（小白泪目）

为了防止像我一样的小白看不懂，下面是我移动文件的详解。

这是我创建nginx容器时的命令：
 

docker run \
-p 9002:80 \
--name nginx1 \
-v /nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /nginx/conf/conf.d:/etc/nginx/conf.d \
-v /nginx/log:/var/log/nginx \
-v /nginx/html:/usr/share/nginx/html \
-d nginx:latest

所以我是这样执行文件复制操作的：

sudo cp -r /home/magicat/RuoYi/ruoyi_ui /nginx/html
#sudo cp -r 源文件夹路径 目标文件夹路径

然后再把nginx.conf文件里的location改成我前面说的正确版就不会报500的错误了！

这里再贴一份我完整的配置文件：
 

user  root;
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  localhost;

        location / {
            root /usr/share/nginx/html/ruoyi_ui;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html?$args;
            autoindex off;
            charset utf-8;
        }

        location /prod-api/ {
        proxy_pass http://localhost:8080/;  # 必须带斜杠，路径会替换
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 增加超时配置
        proxy_connect_timeout 60s;
        proxy_read_timeout 600s;
        proxy_send_timeout 600s;

        # 解决跨域问题
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Allow-Headers *;
        add_header Access-Control-Allow-Credentials true;

        # 处理OPTIONS预检请求
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }

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

OK！现在访问不会报500了，但是...出现了系统接口404异常？？？？！对小白真的很不友好了

其实很好解决：

(注意：如果你的后端端口号不是默认的8080，那么这张图里的8080也要改掉，否则只改IP依旧会出现系统接口404异常)

刷新页面，如果出现验证码刷不出来和请求超时的问题，检查一下后端服务有没有打开，服务器有没有开放8080端口。（本人就是忘记开端口了）

Ubuntu系统开放端口命令：
 

sudo ufw allow 8080/tcp

大功告成！恭喜你又迈过一关！