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

本文主要讲一下在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;  # 保留客户端 IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 保留转发的 IP
        proxy_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 指定的地址后面。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/937012.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SAP软件如何启用反记账功能

SAP软件如何启用反记账功能

SAP软件和国内ERP软件不一样，它在录入会计凭证时是不可以录入负数的（即红冲凭证），因此无法直接实现传统意义上的红字冲销。 比如，如下SAP正常和冲销业务产生会计凭证如下： 正常的业务凭证： 借…
阅读更多...
iOS swift开发系列 -- tabbar问题总结

iOS swift开发系列 -- tabbar问题总结

1.单视图如何改为tabbar，以便显示2个标签页 右上角➕，输入tabbar 找到控件，然后选中，把entrypoint移动到tabbar控件 2.改成tabbar，生成两个item，配置各自视图后，启动发现报错 Thread 1: “-[p…
阅读更多...
Level DB --- coding

Level DB --- coding

Util coding是Level DB中重要的数据结构，它主要用来将uint32，和uint64高效的序列化到字符串中和从字符串中反序列化出来。 coding两种序列化形式 Util coding中主要提供两种序列化形式，即Fixed形式和Var形式。其中Fixed形式是常规形式&…
阅读更多...
EfficientNet与复合缩放理论（Compound Scaling Theory） 详解（MATLAB）

EfficientNet与复合缩放理论（Compound Scaling Theory） 详解（MATLAB）

1.EfficientNet网络与模型复合缩放 1.1 EfficientNet网络简介 1.1.1 提出背景、动机与过程 EfficientNet是一种高效的卷积神经网络（CNN），由Google的研究团队Tan等人在2019年提出。EfficientNet的设计目标是提高网络的性能，同时减…
阅读更多...
CentOS7 Apache安装踩坑

CentOS7 Apache安装踩坑

Gnome桌面右键弹出终端。 [rootlocalhost ~]# yum repolist 已加载插件：fastestmirror, langpacks /var/run/yum.pid 已被锁定，PID 为 2611 的另一个程序正在运行。 Another app is currently holding the yum lock; waiting for it to exit... [root…
阅读更多...
接收文件并保存在本地

接收文件并保存在本地

接受多个文件 前端 <input typefile namefilelist> <input typefile namefilelist> <input typefile namefilelist> ... 后端 filelist request.files.getlist(name属性值) 获取文件内容 单个文件 file request.files.get(file)content file.read…
阅读更多...
关于解决VScode中python解释器中的库Not Found的问题

关于解决VScode中python解释器中的库Not Found的问题

关于解决VScode中python解释器中的库Not Found的问题 背景介绍解决步骤1. 检查当前使用的Python解释器2. 确保选择正确的Python解释器3. 安装库到指定的Python环境①使用 pip 完整路径指定&#xff1a;②使用 conda 安装&#xff1a;③使用 python -m pip 指定解释器&#xff1…
阅读更多...
springboot436校园招聘系统(论文+源码)_kaic

springboot436校园招聘系统(论文+源码)_kaic

摘 要 使用旧方法对校园招聘系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在校园招聘系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的校园招聘系…
阅读更多...
YOLOv9改进，YOLOv9引入DLKA-Attention可变形大核注意力，WACV2024，二次创新RepNCSPELAN4结构

YOLOv9改进，YOLOv9引入DLKA-Attention可变形大核注意力，WACV2024，二次创新RepNCSPELAN4结构

摘要 作者引入了一种称为可变形大核注意力 （D-LKA Attention） 的新方法来增强医学图像分割。这种方法使用大型卷积内核有效地捕获体积上下文，避免了过多的计算需求。D-LKA Attention 还受益于可变形卷积，以适应不同的数据模式。 理论介绍 大核卷积（Large Kernel Convolu…
阅读更多...
LRM-典型 Transformer 在视觉领域的应用,单个图像生成3D图像

LRM-典型 Transformer 在视觉领域的应用,单个图像生成3D图像

https://yiconghong.me/LRM. 一、Abstract 第一个大型重建模型&#xff08;LRM&#xff09;&#xff0c;它可以在5秒内从单个输入图像预测物体的3D模型。LRM采用了高度可扩展的基于transformer的架构&#xff0c;具有5亿个可学习参数&#xff0c;可以直接从输入图像中预测神经…
阅读更多...
鸿蒙开发：一个轻盈的上拉下拉刷新组件

鸿蒙开发：一个轻盈的上拉下拉刷新组件

前言 老早之前开源了一个刷新组件&#xff0c;提供了很多常见的功能&#xff0c;也封装了List&#xff0c;Grid&#xff0c;WaterFlow&#xff0c;虽然功能多&#xff0c;但也冗余比较多&#xff0c;随着时间的前去&#xff0c;暴露的问题就慢慢增多&#xff0c;虽然我也提供了…
阅读更多...
ByteCTF2024

ByteCTF2024

wp参考&#xff1a; 2024 ByteCTF wp 2024 ByteCTF WP- Nepnep ByteCTF 2024 writeup by Arr3stY0u 五冠王&#xff01;ByteCTF 2024 初赛WriteUp By W&M ByteCTF 2024 By W&M - W&M Team ByteCTF Re WP - 吾爱破解 - 52pojie.cn 2024 ByteCTF - BediveRe_R…
阅读更多...
Node.js教程入门第一课：环境安装

Node.js教程入门第一课：环境安装

对于一个程序员来说&#xff0c;每学习一个新东西的时候&#xff0c;第一步基本上都是先进行环境的搭建&#xff01; 从本章节开始让我们开始探索Node.js的世界吧! 什么是Node.js? 那么什么是Node.js呢&#xff1f;简单的说Node.js 就是运行在服务端的 JavaScript JavaScript…
阅读更多...
弧形导轨的变形因素有哪些？

弧形导轨的变形因素有哪些？

随着弧形导轨的应用日渐普遍&#xff0c;在日常使用中总会遇到很多各种各样的问题&#xff0c;其中变形是最常见的问题&#xff0c;但通过采取正确的预防和解决措施&#xff0c;可以避免其对设备性能和精度造成的影响&#xff0c;以下是一些主要的变形原因&#xff1a; 1、负载…
阅读更多...
SSL证书部署(linux-nginx)

SSL证书部署(linux-nginx)

一、SSL证书的作用 HTTP协议无法加密数据，数据传输可能产生泄露、篡改或钓鱼攻击等问题。 SSL证书部署到Web服务器后，可帮助Web服务器和网站间建立可信的HTTPS协议加密链接，为网站安全加锁，保证数据安全传输。 二、前提条件 1.已通过数字证书管理服务控制台签发证书。 …
阅读更多...
MATLAB引用矩阵元素的几种方法

MATLAB引用矩阵元素的几种方法

引用矩阵元素可以通过索引&#xff0c;也可以通过逻辑值 索引 通过引用元素在矩阵中的位置来提取元素&#xff0c;例如&#xff1a; - 逻辑值 通过某种逻辑运算来使得要提取的值变为逻辑 1 1 1&#xff0c;用 A ( ) A() A()提取即可&#xff0c; A A A为原矩阵的名称。 例如&…
阅读更多...
一些浅显易懂的IP小定义

一些浅显易懂的IP小定义

IP归属地&#xff08;也叫IP地址&#xff0c;IP属地&#xff09; 互联网协议地址&#xff0c;每个设备上的唯一的网络身份证明。用于确保网络数据能够精准传送到你的设备上。 基于IP数据云全球IP归属地解析&#xff0c;示例Python代码 curl -X POST https://route.showapi.co…
阅读更多...
Jupyter Notebook 切换虚拟环境

Jupyter Notebook 切换虚拟环境

方法 切换到需要添加到Jupyter Notebook中的虚拟环境&#xff0c;执行&#xff1a; python -m ipykernel install --name Jupyter Notebook中显示的虚拟环境名称如果遇到 [Errno 13] Permission denied: /usr/local/share/jupyter类似的权限问题&#xff0c;可能是没有对应的…
阅读更多...
Blue Ocean 在Jenkins上创建Pipeline使用详解

Blue Ocean 在Jenkins上创建Pipeline使用详解

BlueOcean是Jenkins的一个插件，它提供了一套可视化操作界面来帮助用户创建、编辑Pipeline任务。以下是对BlueOcean中Pipeline操作的详细解释： 一、安装与启动BlueOcean 安装：在Jenkins的“系统管理”->“插件管理”->“可选插件”中搜索“BlueOcean”，然后点击“Ins…
阅读更多...
厦门凯酷全科技有限公司正规吗靠谱吗？

厦门凯酷全科技有限公司正规吗靠谱吗？

随着短视频和直播电商的迅猛发展&#xff0c;越来越多的企业开始将目光投向抖音这一平台。作为国内领先的短视频社交平台&#xff0c;抖音凭借其庞大的用户基础和强大的算法推荐系统&#xff0c;成为众多品牌拓展市场、提升销售的重要渠道。厦门凯酷全科技有限公司&#xff08;…
阅读更多...
最新文章

Copyright @ 2022~2023