nginx部署vue3项目

一、安装nginx后，先增加项目配置

先在/etc/nginx/conf.d目录下创建一个自己的项目配置，在启动nginx时，会自动include conf.d这个目录下的所有配置

root@newserver:/usr/sbin# cat /etc/nginx/conf.d/businessDep.conf 
server {
    listen 3700;
    server_name 10.229.191.82;

    location / {
        root /root/Tool/businessDep/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    location /pblt/ {
        proxy_pass http://localhost:5000;
        proxy_cookie_path / /pblt;
        proxy_redirect default;
        rewrite ^/pblt/(.*) /$1 break;
        client_max_body_size 500m;
        proxy_read_timeout 900;
    }
}

二、打包项目，上传至服务器

本地项目的终端中npm run bulid，会生成一个dist文件

将这个文件放到服务器的/root/Tool/businessDep中

三、启动nginx

root@newserver:/usr/sbin# which nginx
/usr/sbin/nginx

则cd 至/usr/sbin启动nginx

root@newserver:/usr/sbin# ./nginx

四、访问url

访问10.229.191.82:3700后报错500 Internal Server Error
 

查看错误日志后发现，是nginx配置的用户有问题(13: Permission denied)，具体如下：

root@newserver:/usr/sbin# cat /var/log/nginx/error.log
"/root/UFPTool/businessDep/dist/index.html" failed (13: Permission denied), client: 10.56.***.***, server: 10.229.191.82, request: "GET /favicon.ico HTTP/1.1", host: "10.229.191.82:3700", referrer: "http://10.229.191.82:3700/"
2024/10/11 06:30:00 [error] 44229#44229: *6 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 10.56.***.***, server: 10.229.191.82, request: "GET /favicon.ico HTTP/1.1", host: "10.229.191.82:3700", referrer: "http://10.229.191.82:3700/"

这个时候需要修改/etc/nginx/nginx.conf文件

把user改为root（可能需要根据具体情况，改为dist文件的用户）

再次运行，就能访问成功了