云服务器nginx配置前后端访问路径

云服务器nginx配置前后端访问路径

在宝塔面板中部署已打包好的 Vue.js 项目（即 dist 目录），通常需要将这些静态文件通过 Nginx 或者 Apache 等 Web 服务器进行托管。以下是基本的部署步骤：

1. 上传打包好的文件：
   将本地 Vue.js 项目的 dist 文件夹上传至宝塔面板中的网站根目录，比如 /www/wwwroot/yourdomain.com。

2. 配置 Nginx：

   • 进入宝塔面板 -> 网站 -> 选择你的网站 -> 配置。
   • 在“Nginx 设置”或“自定义规则”区域添加以下内容以设置默认首页和静态资源访问路径（请根据实际情况替换 yourdomain.com 和实际路径）：

server {
    listen 80;
    server_name; # 替换为你的域名

    root /www/wwwroot/yourdomain.com/dist; # 替换为你的 dist 目录的实际路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 如果有其他静态资源如图片、CSS、JS等，也需要正确配置
    location ~ \.(css|js|jpg|png|gif|ico)$ {
        root /www/wwwroot/yourdomain.com/dist;
        expires 30d;
    }
}

3. 保存并重启 Nginx：

   • 完成配置后，点击“保存”按钮保存 Nginx 配置。
   • 接着，在“软件管理”找到 Nginx，点击“设置”，然后点击“重载配置”或者“启动”/“重启”服务，确保新配置生效。

4. 验证部署：

   • 打开浏览器访问你的域名（例如：http://yourdomain.com），如果页面能正常加载，说明部署成功。

注意：如果是 HTTPS 站点，请确保同时配置了 SSL 证书，并在 Nginx 配置中监听 443 端口。同时，确认防火墙和安全组规则允许 80 和 443 端口的访问。

server {
        listen 80 default_server;
        listen [::]:80 default_server;
		root /www/wwwroot/dist;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.html;
        }

        # 新增API请求的反向代理设置
        location /api/ {
                proxy_pass http://localhost:8089/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

server
{
    listen 80;
    server_name *.你的域名.com;
    index index.html index.htm default.htm default.html;
    #root /www/wwwroot/dist;

    #SSL-START SSL相关配置
    #error_page 404/404.html;
    
    #SSL-END

    #ERROR-PAGE-START  错误页相关配置
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END


    #REWRITE-START 伪静态相关配置
    include /www/server/panel/vhost/rewrite/node_dist.conf;
    #REWRITE-END

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md|package.json|package-lock.json|\.env) {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location /.well-known/ {
        root  /www/wwwroot/dist;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }


    # HTTP反向代理相关配置开始 >>>
    location ~ /purge(/.*) {
        proxy_cache_purge cache_one $host$request_uri$is_args$args;
    }

    location / {
        proxy_pass http://127.0.0.1:8081;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        add_header X-Cache $upstream_cache_status;
        proxy_set_header X-Host $host:$server_port;
        proxy_set_header X-Scheme $scheme;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    # HTTP反向代理相关配置结束 <<<

    access_log  /www/wwwlogs/dist.log;
    error_log  /www/wwwlogs/dist.error.log;
}