nginx反向代理部署vue项目(history模式)的方法

部署Vue项目时使用Nginx反向代理的方法如下：

1. 首先，确保已经安装了Nginx服务器。如果没有安装，请先进行安装。

2. 在Nginx的配置文件中添加一个新的服务器块，用于反向代理Vue项目。可以在以下位置找到配置文件：/etc/nginx/nginx.conf。

3. 在新的服务器块中，设置监听的端口号和域名。例如，我们可以使用端口号80和域名项目.example.com（请替换为您自己的域名）。

4. 在服务器块中添加以下配置，以将所有请求代理到Vue项目的IP地址和端口上：

location / {
    try_files $uri $uri/ /index.html;
    proxy_pass http://127.0.0.1:8080;
}

这些配置指令的作用是将所有请求先尝试以文件形式查找，如果找不到则重定向到index.html文件。然后，将请求代理到Vue项目运行的IP地址和端口上。

5. 保存并关闭Nginx的配置文件。

6. 重启Nginx服务器，使更改生效。在终端中输入以下命令进行重启：

sudo service nginx restart

7. 现在，您可以使用域名或IP地址访问Vue项目。例如，http://项目.example.com。

通过使用Nginx反向代理部署Vue项目，可以实现将所有请求代理到Vue项目上，并使用Vue的history模式进行路由。这样，您就可以在服务器上为Vue项目提供服务，并在浏览器中以友好的URL格式进行访问。

相关问题

vue项目 history nginx部署访问报404

在Vue.js项目中，当通过`history`模式部署到服务器，并依赖Nginx做反向代理时，遇到404错误通常是由于以下原因：

1. **路由配置**：确认Vue应用的`router`配置是否设置为`history`模式，并且设置了合适的base URL。例如，在`main.js`中：

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'

   // 使用history模式
   Vue.config.historyApiFallback = true

   new Vue({
     render: h => h(App),
     router,
   }).$mount('#app')

2. **Nginx配置**：在Nginx的server block中，你需要配置`try_files`和`proxy_pass`，确保静态文件请求和Vue应用的代理。例如：

   location / {
       try_files $uri $uri/ @vue-app;
       proxy_pass http://localhost:8080; # 指向Vue应用的端口
   }

   location @vue-app {
       proxy_pass http://localhost:8080; # 同上
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }

3. **权限问题**：检查服务器上的目录权限，确保Nginx有访问静态文件和Vue应用打包后的dist目录的权限。

如果上述步骤都做了还是报404，检查浏览器的控制台网络请求，看看是否有正确的资源路径被请求。另外，记得清理一下缓存，重启Nginx服务试试。

docker的nginx.conf部署vue项目是不是默认就支持ws协议

Docker的Nginx镜像默认情况下并不支持WebSocket协议，需要在Nginx配置文件中进行相应的配置才能支持。而对于部署Vue.js项目来说，需要在Nginx配置文件中添加一些特殊的配置，才能支持Vue.js的history模式。

以下是一个示例的Nginx配置文件，可以用于部署Vue.js项目并支持WebSocket协议：

worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    access_log /var/log/nginx/access.log combined;

    sendfile on;

    upstream websocket {
        server backend:8000; # 将backend替换为实际的WebSocket服务器地址和端口
    }

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html;

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

        location /api/ {
            proxy_pass http://backend:8000; # 将backend替换为实际的后端API服务器地址和端口
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        location /ws/ {
            proxy_pass http://websocket;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }
    }
}

需要注意的是，以上配置文件假定您的Vue.js应用程序已经构建并部署到了Nginx容器中的/usr/share/nginx/html目录下。此外，如果您的Vue.js应用程序需要访问后端API，需要在Nginx配置文件中添加相应的反向代理配置。您需要将上述配置文件中的backend和websocket分别替换为实际的后端API服务器地址和端口以及WebSocket服务器地址和端口。