ngnix部署ruoyi项目

### 如何在 Nginx 上部署 RuoYi 项目

#### 打包前端 Vue 应用程序
为了准备用于生产的静态资源，在 `package.json` 文件中定义了不同的构建命令来针对不同环境进行打包。对于生产环境，可以运行如下命令来进行打包：

npm run build:prod

这会创建一个名为 `dist` 的目录，其中包含了编译后的静态文件[^2]。

#### 配置 Nginx 来服务这些静态文件
配置 Nginx 是至关重要的一步，以确保它能够正确地提供由 Vue CLI 构建工具生成的 HTML 和 JavaScript 资源。下面是一个基本的 Nginx 配置示例，假设应用程序位于 `/home/ubuntu/myapp/ruoyi/ruoyi-ui/dist`:

server {
    listen       80;
    server_name  yourdomain.com;

    location / {
        root   /home/ubuntu/myapp/ruoyi/ruoyi-ui/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

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

此配置指定了服务器监听端口以及域名，并设置了根路径指向应用的发布目录。特别注意的是 `try_files` 指令，其作用是在找不到请求的具体文件时返回 `index.html` 页面，这对于单页面应用 (SPA) 至关重要[^1]。

#### 处理权限问题
如果遇到像 "500 Internal Server Error" 这样的错误消息，可能是因为 Nginx 对目标文件夹没有足够的读取权限。确认 Web 用户（通常是 www-data 或 nginx）拥有对 `/home/ubuntu/myapp/ruoyi/ruoyi-ui/dist` 及其内部文件和子目录的适当访问权是非常必要的。可以通过更改文件夹所有权或调整 Linux 文件系统的 ACL 设置来解决这个问题[^3]。