【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

本文主要讲一下在Linux系统环境下（以ubantu22.04为例），如何用nginx部署前端Vue项目打包的dist静态资源。有些具体的命令就不展开讲了，可以自行查看其他博主的文章，我主要讲整体的步骤和思路。

一、ubantu系统安装nginx

首先确保已经安装了nginx并开启，使用apt命令即可快速安装。

大概步骤：

sql 复制代码

# 注意以下命令都需要root账户
apt update # 更新软件
apt install nginx # 安装
systemctl status nginx # 验证安装，如果此时nginx已经运行，可以看到绿色的active(running)。
service nginx start # 如果没有运行，可以用这个命令重启一下。
nginx -v # 可以查看nginx版本

还有几件事要做：

1、开启服务器内防火墙对于6379 端口的权限

命令： ufw allow 6379

命令： ufw status 可以看到所有已经开启访问权限的端口。

2、如果你想在服务器外（本地环境）访问连接6379端口，需要在你的云服务器安全组开放6379端口权限。

如果上面一切正常，在本地浏览器输入服务器公网IP就可以看到nginx的默认欢迎页面了。

当然这里可能会出现一些问题，我把可能遇到的情况列一下：

使用服务器IP无法访问到nginx默认页面

首先检查nginx是否正常启动，再检查防火墙和服务器安全组。如果这里没问题，很大概率是因为你的云服务器把80端口禁止了，有些云服务器是不允许在没有备案的情况下使用80端口的。这么说可能有点晕，因为nginx的本质是请求转发，刚安装好的nginx默认监听80端口，而80端口其实就是http访问的默认端口，所以直接可以用IP访问，而不需要输入:80，当然你需要打开云服务器安全组的80端口权限，如果安全组配置也没问题，但是依然访问不了，就可以问下云服务器的客服了，是不是未备案禁止使用80端口。

默认的nginx配置实际上就是监听80端口，当你访问服务器IP的时候，把请求转发到一个html默认页面，我们可以看一下默认配置，这里提一句，如果你是使用apt方式安装的，配置文件的位置大概都在 /etc/nginx/sites-available ，这下面的 default文件就是默认配置了，我们可以打开看看内容。

如果80端口没备案用不了，可以像我一样配一个其他端口，然后再访问服务器IP:端口，这时候就能看到默认页面了（前提是你新加的端口号防火墙和安全组都已经开启）。
说几个关键的检查点：nginx是否正常启动，检查默认配置文件，检查80端口是否正常开启防火墙和云服务器安全组权限，检查云服务器提供厂商是否允许在没有备案的情况下使用80端口，我遇到的基本就是这些问题了。

二、部署前端项目（Vue打包的dist文件夹）

我需要在哪里添加server配置呢？

在Nginx的安装目录下，有几个重要的文件和目录，每个都有其特定的用途。以下是对这些文件和目录的详细解释：

1. nginx.conf

位置：通常位于 /etc/nginx/nginx.conf。
用途：这是Nginx的主配置文件。它包含全局配置和默认的服务器块（server block）。在这个文件中，你可以设置Nginx的工作进程、日志、事件处理、HTTP配置等。它是Nginx启动时加载的第一个配置文件。

2. conf.d/

位置：通常位于 /etc/nginx/conf.d/。
用途：这个目录用于存放额外的配置文件。Nginx会自动加载这个目录下的所有.conf文件。通常，你可以在这里放置与特定应用或服务相关的配置文件，以便于管理和组织。例如，你可以为不同的虚拟主机或应用创建单独的配置文件。

3. sites-available/

位置：通常位于 /etc/nginx/sites-available/。
用途：这个目录用于存放可用的站点配置文件。每个文件通常对应一个虚拟主机的配置。这个目录中的配置文件不会自动加载，只有在创建符号链接到 sites-enabled/ 目录时，Nginx才会使用这些配置。

4. sites-enabled/

位置：通常位于 /etc/nginx/sites-enabled/。
用途：这个目录包含了实际启用的站点配置文件的符号链接。Nginx会加载这个目录中的配置文件。你可以通过在 sites-available/ 中创建符号链接来启用或禁用站点配置。例如，使用以下命令创建符号链接：
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

5. modules-available/

位置：通常位于 /etc/nginx/modules-available/（并不是所有的Nginx安装都有这个目录）。
用途：这个目录用于存放可用的Nginx模块配置文件。与 sites-available/ 类似，模块配置文件不会自动加载，只有在创建符号链接到 modules-enabled/ 目录时，Nginx才会使用这些模块配置。

6. modules-enabled/

位置：通常位于 /etc/nginx/modules-enabled/（并不是所有的Nginx安装都有这个目录）。
用途：这个目录包含了实际启用的模块配置文件的符号链接。Nginx会加载这个目录中的模块配置。

总结

nginx.conf：主配置文件，包含全局设置。
conf.d/：存放额外的配置文件，自动加载。
sites-available/：存放可用的站点配置文件，不自动加载。
sites-enabled/：存放启用的站点配置文件的符号链接，自动加载。
modules-available/ 和 modules-enabled/：存放可用和启用的模块配置文件的符号链接（如果存在）。

上面每个文件的具体作用可以后面再研究，我讲一种最简单的实现方式：

第一步：一般我们不会改默认配置文件，在这个目录 /etc/nginx/sites-available ，vim新建一个文件作为你的配置内容，然后在这里面输入配置项。

第二步：编写配置文件内容，简单讲一下常见配置项的含义。

下面是一个示例配置文件：

sql 复制代码

server {
    listen 8079;  # 监听端口，处理HTTP请求
    server_name example.com ;  # 处理的域名（如果没有域名就写公网IP）

    root /var/www/my_frontend;  # 网站根目录，Nginx将从这里提供文件（就是你的dist文件夹目录）
    index index.html;  # 默认首页文件

    location / {
        try_files $uri $uri/ =404;  # 尝试访问请求的URI，如果不存在则返回404
    }

    location ~ \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
        expires 30d;  # 设置静态资源的缓存时间为30天
        add_header Cache-Control "public";  # 添加缓存控制头
    }

    error_page 404 /404.html;  # 自定义404错误页面
    location = /404.html {
        internal;  # 仅内部请求可以访问404页面
    }

    location ~ /\.ht {
        deny all;  # 禁止访问以.开头的文件（如.htaccess）
    }
}

下面是我的配置：

写完之后保存退出，然后需要做两件事，创建链接使配置文件生效，然后重启nginx。

bash 复制代码

ln -s /etc/nginx/sites-available/【你的文件名】 /etc/nginx/sites-enabled/
# 重加载nginx或重启
systemctl reload nginx
systemctl restart nginx

重要！！！

切记防火墙开启你新加的端口号，安全组也要加。

这时候你访问公网IP + 端口号就可以看到你的页面了。

三、怎么和后端通信呢，配置请求转发

假设你的后端项目是微服务架构，那么每个特定的路径就对应一个访问前缀，在nginx可以针对这样的访问做转发。

如果用户的请求是**/sys**/auth/captcha?t=1733906347077 （假设这是一个登录页面请求验证码的后端接口），那怎么转发呢，转发路径是什么？

bash 复制代码

location /sys/ {
        proxy_pass http://127.0.0.1:8083/;  # 这里的8083就是你的后端启动的端口
        proxy_set_header Host $host;  # 保留原始主机头
        proxy_set_header X-Real-IP $remote_addr;  # 保留客户端 IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 保留转发的 IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 保留协议（http/https）
  }

bash 复制代码

请求转发过程
1. 请求路径：用户请求的路径是 /sys/auth/captcha?t=1733906347077。
2. 匹配 location：Nginx 会检查请求路径是否匹配 location /sys/。由于请求路径以 /sys/ 开头，
因此会匹配到这个 location 块。

转发路径：在 proxy_pass 指令中，您指定了 http://127.0.0.1:8083/ 作为转发的目标。

转发路径计算
原始请求路径：/sys/auth/captcha?t=1733906347077
转发目标：http://127.0.0.1:8083/

重要！！！
由于 proxy_pass 后面有一个斜杠 /，Nginx 会将请求路径 
/sys/auth/captcha 中的 /sys 部分去掉，并将剩余的路径 /auth/captcha?t=1733906347077 
追加到 http://127.0.0.1:8083/ 后面。

因此，**/sys**/auth/captcha?t=1733906347077的最终转发的路径将是：
http://127.0.0.1:8083/auth/captcha?t=1733906347077

补充内容！！！

我不禁要问：proxy_pass 后面没有斜杠的话，最终转发的路径就会不同吗？

是的，proxy_pass 后面是否有斜杠会影响最终转发的路径。具体来说，斜杠的存在与否会决定如何处理请求的 URI 部分。以下是详细的解释：

1. proxy_pass 后面有斜杠

当 proxy_pass 后面有斜杠时，Nginx 会将请求的 URI 中与 location 匹配的部分去掉，并将剩余的 URI 直接附加到 proxy_pass 指定的地址后面。

bash 复制代码

location /sys/ {
    proxy_pass http://127.0.0.1:8083/;  # 末尾有斜杠
}
请求路径：/sys/auth/captcha?t=1733906347077
转发路径：http://127.0.0.1:8083/auth/captcha?t=1733906347077

2. proxy_pass 后面没有斜杠

当 proxy_pass 后面没有斜杠时，Nginx 会将请求的 URI 中与 location 匹配的部分去掉，并将剩余的 URI 附加到 proxy_pass 指定的地址后面，同时在地址后面添加匹配的 URI。

bash 复制代码

location /sys/ {
    proxy_pass http://127.0.0.1:8083;  # 末尾没有斜杠
}
请求路径：/sys/auth/captcha?t=1733906347077
转发路径：http://127.0.0.1:8083/sys/auth/captcha?t=1733906347077

总结

有斜杠：去掉匹配的 URI 部分后，直接将剩余的 URI 附加到 proxy_pass 指定的地址后面。
没有斜杠：去掉匹配的 URI 部分后，保留原始的 URI 结构，并将其附加到 proxy_pass 指定的地址后面。