宝塔环境下 Vue前端 Nginx反向代理 绑定域名

Nginx反代

server
{
    listen 80;
    # 您的域名
    server_name cms.demo.mallray.com;
    # 索引文档，建议将 index.html 放在第一个
    index index.html

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


    # HTTP反向代理相关配置开始 >>>
    location / {
        # 端口为3000，自定义后请注意修改
        proxy_pass http://127.0.0.1:3000;
        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;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_redirect off;
    }
    # HTTP反向代理相关配置结束 <<<

    # 有可能会存在的默认规则-【请删除它们】，否则很多资源会404 - START
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    # 有可能会存在的默认规则-【请删除它们】，否则很多资源会404 - END
}

使用面板

1. 进入面板，打开网站管理，切换到 Node 项目，并添加 Node 项目
2. 项目目录选择 web-nuxt 根目录
3. 启动选项请选择 start
4. 真实端口填写 3000
5. 填写正确的绑定域名，宝塔将自动配置好代理
6. 项目添加成功后，即可使用域名访问站点，并可以方便的配置 SSL 证书等