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

server/2024/12/15 20:44:39/

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

一、ubantu系统安装nginx

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

大概步骤：

# 注意以下命令都需要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的默认欢迎页面了。
在这里插入图片描述
当然这里可能会出现一些问题，我把可能遇到的情况列一下：

  1. 使用服务器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:端口，这时候就能看到默认页面了（前提是你新加的端口号防火墙和安全组都已经开启）。

  2. 说几个关键的检查点：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新建一个文件作为你的配置内容，然后在这里面输入配置项。

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

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

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。

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

重要！！！

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

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

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

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

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

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

请求转发过程
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 指定的地址后面。

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。

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 指定的地址后面。

http://www.ppmy.cn/server/150433.html

相关文章

PyTorch基本使用-线性回归案例

PyTorch基本使用-线性回归案例

文章目录 1. 训练模型步骤2. 训练模型API3. 训练模型 学习目标：掌握PyTorch构建线性回归模型相关API 1. 训练模型步骤 我们使用 PyTorch 的各个组件来构建线性回归的实现。在pytorch中进行模型构建的整个流程一般分为四个步骤： 准备训练数据集构建要使…
阅读更多...
《智能体开发实战（高阶）》四、系统化的日志周报智能体开发计划

《智能体开发实战（高阶）》四、系统化的日志周报智能体开发计划

智能体扩展与完善规划 为了将前几个章节的智能体逐步扩展为支持整个公司团队使用的高效工具，以下是分阶段的完善与扩写规划。每个阶段旨在提升功能覆盖范围、处理能力和用户体验，并为企业提供实际价值。 阶段一：基础功能完善 目标：巩固现有功能，提升健壮性和适用性。 支…
阅读更多...
android 底层硬件通知webview 技术—未来之窗行业应用跨平台架构

android 底层硬件通知webview 技术—未来之窗行业应用跨平台架构

String 未来之窗反向js2 "javascript:" "东方仙盟技术" "(\"nfc_reader\"," 未来之窗NFC ")"; cwpd_Web.evaluateJavascript(未来之窗反向js2, new ValueCallback<String>() { …
阅读更多...
「Mac玩转仓颉内测版50」小学奥数篇13 - 动态规划入门

「Mac玩转仓颉内测版50」小学奥数篇13 - 动态规划入门

本篇将通过 Python 和 Cangjie 双语介绍动态规划的基本概念&#xff0c;并解决一个经典问题&#xff1a;斐波那契数列。学生将学习如何使用动态规划优化递归计算&#xff0c;并掌握编程中的重要算法思想。 关键词 小学奥数Python Cangjie动态规划斐波那契数列 一、题目描述 …
阅读更多...
docker-4.迁移存储目录

docker-4.迁移存储目录

docker pull 拉取镜像时候磁盘空间满，迁移/var/lib/docker目录 目录 1. 清理Docker占用的磁盘空间2.迁移 /var/lib/docker 目录3.开机自动挂载文件/etc/fstab4.docker国内镜像源1. 清理Docker占用的磁盘空间 清理空间： Docker System命令， 在《谁用光了磁盘？Docker System…
阅读更多...
路由介绍.

路由介绍.

RIB和FIB Routing Information Base&#xff08;RIB&#xff09;&#xff0c;即路由信息库&#xff0c;是存储在路由器或联网计算机中的一个电子表格或类数据库&#xff0c;它保存着指向特定网络地址的路径信息&#xff0c;包括路径的路由度量值。RIB的主要目标是实现路由协议…
阅读更多...
docker容器内部启动jupyter notebook但是宿主机无法访问的解决方法

docker容器内部启动jupyter notebook但是宿主机无法访问的解决方法

目录 1.问题2.解决方法 1.问题 在docker容器内启动了jupyter notebook&#xff0c;在宿主机内用如下的url无法访问 http://localhost:8888 http://127.0.0.1:8888 启动方法&#xff1a; jupyter notebook 2.解决方法 启动方法加上选项[ --ip‘*’]或者[–ip‘0.0.0.0’] 即启…
阅读更多...
Rust 编程语言介绍

Rust 编程语言介绍

一、基本介绍 Rust 是一种系统编程语言&#xff0c;由 Mozilla 研究院开发。它的设计目标是在保证高性能的同时&#xff0c;提供内存安全和线程安全。相比C和C语言具有下面几个特点&#xff1a; 内存安全&#xff1a;在传统的编程语言如 C 和 C 中&#xff0c;手动管理内存可…
阅读更多...
最新文章

Copyright @ 2022~2023