vue3项目上线配置 nginx代理

vue3项目上线配置 nginx代理

啥是Nginx代理

你可以把Nginx想象成一个小区的门卫大叔。小区里有好多户人家（就像服务器上的不同服务），外面的人（用户）想要进来找某户人家（访问某个服务），都得先跟门卫大叔说。门卫大叔呢，就会根据外面人的需求，把他们带到对应的人家去。这就是Nginx代理干的事儿，它能把用户的请求转发到对应的服务上。

为啥要给Vue 3项目配置Nginx代理

Vue 3项目上线后，有时候会遇到一些问题，比如跨域问题。就好比小区里的人家规定，只能让小区内部的人互相串门，外面的人不能直接进来找某户人家。但是用户可能是在不同的地方（不同域名）访问你的项目，这就像外面的人想进小区找人，直接进不来。这时候Nginx代理就可以帮个忙，它就像门卫大叔有特殊权限，能把外面人的请求接收过来，然后以小区内部人的身份去找到对应的人家，再把结果拿给外面的人，这样就解决了跨域问题。

配置步骤

1. 安装Nginx

首先得把Nginx这个“门卫大叔”请到你的服务器上。不同的服务器系统安装方法不太一样，咱们以常见的Ubuntu系统为例。你在服务器的命令行里输入下面这个命令，就像给“快递员”（服务器软件源）下订单，让它把Nginx送到你的服务器上：

sudo apt-get update
sudo apt-get install nginx

2. 准备Vue 3项目文件

在配置Nginx之前，得先把你的Vue 3项目打包好。就像你要把家里的东西整理好，准备迎接客人一样。在你的项目目录下，打开命令行，输入下面的命令来打包项目：

npm run build

打包好后，会生成一个dist文件夹，里面装的就是可以直接上线的项目文件。

3. 配置Nginx

找到Nginx的配置文件，一般在/etc/nginx/sites-available/目录下，里面有个默认的配置文件。你可以复制一份出来，然后修改这个复制的文件，比如命名为your_project.conf。

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/your_project.conf

接着，用文本编辑器打开这个新的配置文件：

sudo nano /etc/nginx/sites-available/your_project.conf

在文件里写上下面这些配置内容，我来一句一句给你解释：

server {
    listen 80;  # 这就好比门卫大叔在小区门口的80号岗亭值班，监听着外面人的请求。这里的80是端口号，一般HTTP请求默认就是用80端口。
    server_name yourdomain.com;  # 这是你的域名，就像小区的名字。当外面的人说要找这个小区时，门卫大叔就知道是这里了。如果你还没有域名，也可以写服务器的IP地址。

    root /path/to/your/vue3-project/dist;  # 这是你的Vue 3项目打包后的`dist`文件夹的路径，就像告诉门卫大叔小区里哪栋楼是你家。

    index index.html;  # 这是默认的首页文件，当外面的人进来小区后，默认先带你去这个文件对应的页面，就像先带你去小区的接待处。

    location / {
        try_files $uri $uri/ /index.html;  # 这是个很重要的配置。当外面的人说要找某个具体的地方（请求某个URL）时，门卫大叔先看看小区里有没有这个地方（服务器上有没有对应的文件）。如果有，就带他去；如果没有，就把他带到接待处（返回`index.html`页面）。这在单页面应用里很有用，因为单页面应用的URL变化其实很多时候只是前端路由在变，页面还是同一个。
    }

    location /api {  # 这里是配置代理的关键部分。假设你的Vue 3项目要和后端接口通信，接口的URL都以`/api`开头。
        proxy_pass http://backend-server-address;  # 这就像告诉门卫大叔，如果外面的人要找以`/api`开头的地方，就把他们带到另一个小区（后端服务器）去，`http://backend-server-address`是后端服务器的地址。
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;  # 这些配置是为了让请求能更好地传递到后端服务器，就像给门卫大叔一些传递信息的规则。
    }
}

4. 启用配置文件

配置文件写好后，还得让Nginx知道要用这个配置。你要在/etc/nginx/sites-enabled/目录下创建一个软链接，指向刚才写好的配置文件。

sudo ln -s /etc/nginx/sites-available/your_project.conf /etc/nginx/sites-enabled/

5. 检查配置并重启Nginx

在让“门卫大叔”正式上岗之前，得检查一下他的工作安排对不对。你可以用下面的命令检查Nginx配置是否有错误：

sudo nginx -t

如果显示配置没问题，就可以重启Nginx，让新的配置生效：

sudo systemctl restart nginx

这样，Nginx代理就配置好啦。用户访问你的Vue 3项目时，Nginx就会按照你设置的规则，把请求处理得妥妥当当，还能解决跨域这些问题。

Nginx 反向代理

什么是 Nginx 反向代理

Nginx 反向代理就像是一个“中间人”。想象一下，有很多人（客户端）想要访问一个大型商场（服务器）里的不同店铺（应用服务），但商场为了管理方便，只开了一个大门，所有人都得从这个大门进出。Nginx 就扮演了这个大门的角色，客户端的请求先到达 Nginx，然后 Nginx 根据一定的规则把请求转发到商场里对应的店铺，最后再把店铺的响应返回给客户端。在 Vue 3 项目里，Nginx 反向代理可以帮我们解决跨域问题、实现负载均衡等。

为什么 Vue 3 项目需要 Nginx 反向代理

1. 解决跨域问题

在开发 Vue 3 项目时，前端代码运行在一个域名和端口下（比如 http://localhost:8080），而后端接口可能运行在另一个域名和端口下（比如 http://api.example.com:3000）。浏览器出于安全考虑，会有同源策略的限制，不允许直接跨域访问。通过 Nginx 反向代理，我们可以把前端的请求转发到后端接口，这样在浏览器看来，请求都是在同一个域名下进行的，就避免了跨域问题。

2. 负载均衡

如果项目访问量很大，一台服务器可能无法承受所有的请求。Nginx 可以把客户端的请求均匀地分配到多个后端服务器上，就像把一群人合理地分配到商场里的不同入口，让每个服务器都分担一部分压力，提高系统的并发处理能力和可用性。

3. 静态资源处理

Nginx 可以高效地处理静态资源（如图片、CSS、JavaScript 文件等）的请求。它可以缓存这些资源，减少后端服务器的负担，提高页面的加载速度。

配置 Vue 3项目的 Nginx 反向代理步骤

1. 安装 Nginx

不同的操作系统安装 Nginx 的方法不同，以 Ubuntu 系统为例，在终端中执行以下命令：

sudo apt-get update
sudo apt-get install nginx

2. 打包 Vue 3 项目

在项目根目录下，使用以下命令打包项目：

npm run build

打包完成后，会生成一个 dist 文件夹，里面包含了可以部署的静态文件。

3. 配置 Nginx

找到 Nginx 的配置文件，一般在 /etc/nginx/sites-available/ 目录下，通常有一个默认的配置文件 default，我们可以复制一份并修改，或者直接在 default 文件上修改。

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/vue3_project

使用文本编辑器（如 nano 或 vim）打开配置文件：

sudo nano /etc/nginx/sites-available/vue3_project

以下是一个示例配置：

server {
    listen 80;  # 监听的端口，一般 HTTP 请求使用 80 端口
    server_name yourdomain.com;  # 你的域名，如果没有域名，可以使用服务器的 IP 地址

    # 配置静态资源目录，指向 Vue 3 项目的 dist 文件夹
    root /path/to/your/vue3_project/dist;
    index index.html;

    # 处理前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 配置反向代理，将以 /api 开头的请求转发到后端服务器
    location /api {
        proxy_pass http://backend_server_address;  # 后端服务器的地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

• listen：指定 Nginx 监听的端口。
• server_name：指定域名或 IP 地址。
• root：指定静态资源的根目录，即 Vue 3 项目打包后的 dist 文件夹路径。
• index：指定默认的首页文件。
• location /：用于处理前端路由。try_files 指令会先尝试查找请求的文件或目录，如果找不到则返回 index.html，这对于单页面应用（SPA）很重要，因为 SPA 的路由是在前端处理的。
• location /api：用于配置反向代理。proxy_pass 指定后端服务器的地址，其他的 proxy_* 指令是为了确保请求和响应的正确传递。

4. 启用配置文件

创建一个软链接，将配置文件链接到 /etc/nginx/sites-enabled/ 目录下：

sudo ln -s /etc/nginx/sites-available/vue3_project /etc/nginx/sites-enabled/

5. 检查配置并重启 Nginx

检查 Nginx 配置是否有错误：

sudo nginx -t

如果没有错误，重启 Nginx 使配置生效：

sudo systemctl restart nginx

验证配置

在浏览器中输入你的域名或服务器 IP 地址，如果能正常访问 Vue 3 项目，并且前端与后端的交互也正常，说明 Nginx 反向代理配置成功。