【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;  # 保留客户端 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.rhkb.cn/news/490149.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

(后序遍历 简单)leetcode 101翻转二叉树

(后序遍历 简单)leetcode 101翻转二叉树

将根结点的左右结点看作 两个树的根结点，后序遍历（从叶子结点从下往上遍历） 两个树边遍历边比较。 左节点就左右根的后序遍历 右根结点就右左根的后序遍历来写 后序遍历（从叶子结点从下往上遍历） /*** Definition …
阅读更多...
【Google Cloud】VPC Service Controls 的试运行模式

【Google Cloud】VPC Service Controls 的试运行模式

本文介绍了 VPC 服务控制的试运行模式。 什么是 VPC Service Controls VPC Service Controls 是 Google Cloud（以前称为 GCP）的一项安全功能。它通过设置一个被称为 边界 的逻辑围栏，防止从内部到外部和从外部到内部的双向意外访问&#xf…
阅读更多...
NAT网络地址转化技术

NAT网络地址转化技术

1.什么是NAT NAT技术是一种将自己内网的多个私有IP地址转换为一个公网IP进行访问互联网的一项技术，这个技术主要是用来解决IPv4地址不够的问题。 2.NAT技术的具体例子 如果我们用手机使用流量浏览一个网站，那么第一步手机会对这个域名进行DNS解析&#…
阅读更多...
图形几何之美系列：铺装算法效果赏析

图形几何之美系列：铺装算法效果赏析

你知道怎么设置地砖排布吗？或者墙砖排布 有一块布料，怎么填充好看的纹理？ 可以用铺装算法，使得设计和艺术变得更有创造力 轮廓铺装：地板铺装、墙砖铺砖、吊顶铺装、图案填充。 图案变得更具艺术感~电视机&#xff1f…
阅读更多...
Tomcat项目本地部署

Tomcat项目本地部署

前言： 除了在idea中将项目启动之外，也可以将项目部署在本地tomcat或者云服务器上，本片文章主要介绍了怎样将项目部署在本地tomcat 下面介绍如何使用Tomcat部署本地项目： 1、本篇文章使用的项目案例为一个聚合项目，ha…
阅读更多...
Django结合websocket实现分组的多人聊天

Django结合websocket实现分组的多人聊天

其他地方和上一篇大致相同，上一篇地址点击进入, 改动点1：在setting.py中最后再添加如下配置： # 多人聊天 CHANNEL_LAYERS {"default":{"BACKEND": "channels.layers.InMemoryChannelLayer"} }因此完整的se…
阅读更多...
网络工程师常用软件之配置对比软件

网络工程师常用软件之配置对比软件

老王说网络：网络资源共享汇总 https://docs.qq.com/sheet/DWXZiSGxiaVhxYU1F ☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝ 我们经常在项目或者运维中对设备的config进行变更&am…
阅读更多...
Spring Boot 集成 MyBatis 全面讲解

Spring Boot 集成 MyBatis 全面讲解

Spring Boot 集成 MyBatis 全面讲解 MyBatis 是一款优秀的持久层框架，与 Spring Boot 集成后可以大大简化开发流程。本文将全面讲解如何在 Spring Boot 中集成 MyBatis，包括环境配置、基础操作、高级功能和最佳实践。 一、MyBatis 简介 1. SqlSession …
阅读更多...
面向对象编程（下半）

面向对象编程（下半）

面向对象编程（下半） 继承 面向对象的三大特征: 封装，继承，多态 继承的作用？能解决什么样的实际问题？ 生活中的继承：将一方所拥有的东西给予另一方。父母的财富 类之间的继承：属性…
阅读更多...
Python 给 Excel 写入数据的四种方法

Python 给 Excel 写入数据的四种方法

Python 在数据处理领域应用广泛，其中与 Excel 文件的交互是常见需求之一。 本文将介绍四种使用 Python 给 Excel 文件写入数据的方法，并结合生活中的例子进行解释，帮助新手小白快速上手。 1. 使用 openpyxl 库 openpyxl 是一个用于读写 Exc…
阅读更多...
Vue3项目的创建与使用

Vue3项目的创建与使用

Vue 有 Vue2 和 Vue3 ，因为 Vue2 已经停止维护，所以我是直接从 Vue3 开始学习的。 Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML 、 CSS 和 JavaScript 构建，并提 供了一套声明式的、组件化的编程模型，帮…
阅读更多...
2024 年最新前端ES-Module模块化、webpack打包工具详细教程（更新中）

2024 年最新前端ES-Module模块化、webpack打包工具详细教程（更新中）

模块化概述 什么是模块？模块是一个封装了特定功能的代码块，可以独立开发、测试和维护。模块通过导出（export）和导入（import）与其他模块通信，保持内部细节的封装。 前端 JavaScript 模块化是指…
阅读更多...
第十三周Scrum Meeting记录

第十三周Scrum Meeting记录

组长： 张楷 副组长：王骏 小组成员：林佳欣 王文秋 李昌豪 陈俊泽 赵浩然 项目链接：https://github.com/ctrlshiftm129/Tuanzi 文章目录 个人工作记录燃尽图组会照片代码签入记录本周总结 个人工作记录 成员工作内容张楷完成了从…
阅读更多...
Linux 磁盘满了怎么办？快速排查和清理方法

Linux 磁盘满了怎么办？快速排查和清理方法

当 Linux 磁盘满了，会导致系统无法正常运行，比如无法写入文件、服务停止、甚至系统崩溃。因此，快速排查并清理磁盘空间是非常重要的。以下是详细的排查和解决步骤： 一、快速定位磁盘占用原因 1. 检查磁盘使用情况 使用 df 命令查…
阅读更多...
中科网威-anysec安全网关 arping 远程命令执行漏洞复现(CNVD-2024-46119)

中科网威-anysec安全网关 arping 远程命令执行漏洞复现(CNVD-2024-46119)

0x01 产品简介 深圳市中科网威科技有限公司成立于深圳市南山科技园信息产业化基地（也有说法称总部位于深圳市福田国际电子商务产业园），是深圳市高新技术企业、双软企业。公司致力于VPN防火墙、流量监控、网络行为管理、ANYSEC安全网关、IT运维设备等前沿网络设备的研发、生…
阅读更多...
什么是PCB的CAF效应？

什么是PCB的CAF效应？

导电阳极丝（CAF）现象及其影响 在高科技电子产品制造中，尤其是在对环境适应性要求极高的汽车电子和军工领域，产品的耐高温和高湿性能显得尤为重要。 随着电子产品向更高集成度发展，电路板上的孔间距不断缩小&#xff…
阅读更多...
harbor镜像仓库搭建

harbor镜像仓库搭建

Harbor简介 Harbor的发展背景和现状 Harbor项目起始于2014年左右，当时正值容器技术和微服务架构迅速崛起的时期。随着越来越多的企业开始采用容器化部署应用，对于私有镜像管理的需求也日益增长。传统的解决方案要么缺乏必要的企业级特性（如访问控制、安全性和可扩展性），…
阅读更多...
【数据结构——查找】顺序查找（头歌实践教学平台习题）【合集】

【数据结构——查找】顺序查找（头歌实践教学平台习题）【合集】

目录😋 任务描述 相关知识 测试说明 我的通关代码: 测试结果： 任务描述 本关任务：实现顺序查找的算法。 相关知识 为了完成本关任务，你需要掌握：1.根据输入数据建立顺序表，2.顺序表的输出，…
阅读更多...
UOB大华银行｜校招网申综合能力SHL测评题库英语版本真题分析

UOB大华银行｜校招网申综合能力SHL测评题库英语版本真题分析

大华银行有限公司（大华银行）是亚洲银行业的翘楚，大华银行总部位于新加坡，并在中国、印度尼西亚、马来西亚、泰国及越南设立了全资法人银行，在全球拥有约500 间分行及办事处，分布在亚太、欧洲与北美的19 个国…
阅读更多...
[C#与C++交互] 跨进程通信NamedPipes

[C#与C++交互] 跨进程通信NamedPipes

目录 1、前言 2、什么是命名管道？ 3、实现步骤 4、示例代码 4.1 C 服务器代码 4.2 C# 客户端代码 5、运行步骤 6、注意事项 7、应用场景 8、优缺点 9、总结 1、前言 在 C# 和 C 应用程序之间进行数据交换时，命名管道（Named Pipes…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023