当前位置: 首页 > news >正文

前端项目配置 Nginx 全攻略

        在前端开发中,项目开发完成后,如何高效、稳定地将其部署到生产环境是至关重要的一步。Nginx 作为一款轻量级、高性能的 Web 服务器和反向代理服务器,凭借其出色的性能和丰富的功能,成为了前端项目部署的首选方案。本文将详细介绍在 Nginx 已安装好的基础上,如何进行前端项目的配置,让你的前端项目顺利上线。

一、Nginx 基础认知

1.1 工作原理

Nginx 采用事件驱动的异步非阻塞处理方式,在处理大量并发连接时表现出色。它通过多个工作进程监听客户端请求,每个工作进程可以处理多个连接,避免了传统服务器在高并发场景下的性能瓶颈。

1.2 核心配置文件

Nginx 的核心配置文件存放位置会因安装方式和操作系统的不同而有所变化,当然也可以在定义安装路径。我的核心配置文件位于 /usr/local/nginx/conf/nginx.conf 。同时,为了方便管理不同的项目,我们可以在 /usr/local/nginx/conf 目录下创建一个 conf.d 子目录,用于存放各个项目的独立配置文件。

二、前端静态资源部署

2.1 准备前端项目

那目前已完成了前端项目的开发,并使用构建工具Webpack进行了打包,生成了包含 HTML、CSS、JavaScript、图片等的静态文件。将这些打包后的文件存放在一个指定的目录下,例如 /var/www/my-frontend-project 。

其中如果本地机器和服务器之间能够通过 SSH 正常通信,把文件上传到服务器可以通过scp命令

scp -r /home/user/my-frontend-project username@server_ip:/var/www/
  • username :你在服务器上的登录用户名。
  • server_ip :服务器的 IP 地址。

2.2 配置 Nginx

2.2.1 创建项目配置目录

首先,在 /usr/local/nginx/conf 目录下创建 conf.d 目录(如果该目录不存在):

mkdir -p /usr/local/nginx/conf/conf.d
2.2.2 创建项目配置文件

在 conf.d 目录下创建一个新的配置文件,例如 my-frontend-project.conf ,并添加以下内容:

server {listen 80;server_name your_domain_or_ip;root /var/www/my-frontend-project;index index.html index.htm;location / {try_files $uri $uri/ /index.html;}
}
  • listen 80:指定 Nginx 监听的端口号为 80,这是 HTTP 协议的默认端口。
  • server_name your_domain_or_ip:填写服务器的域名或 IP 地址,以便客户端能够通过该地址访问项目。
  • root /var/www/my-frontend-project:指定前端项目的根目录,Nginx 将从该目录中查找并返回静态文件。
  • index index.html index.htm:设置默认的索引文件,当客户端访问根目录时,Nginx 会优先返回 index.html 或 index.htm 文件。
  • location /:配置根路径的请求处理规则,try_files $uri $uri/ /index.html 表示当请求的文件不存在时,返回 index.html 文件,这对于单页面应用(SPA)非常重要。

注意:使用80端口之前通过“netstat -ntulp | grep 80”命令确认80端口是否被占用, 如果被占用可以换一个端口,避免影响其他业务。

2.2.3 引入项目配置文件

在 /usr/local/nginx/conf/nginx.conf 文件中添加以下语句,以确保 conf.d 目录下的配置文件被加载:

include /usr/local/nginx/conf/conf.d/*.conf;

2.3 检查配置并重启 Nginx

在修改完配置文件后,需要检查配置文件是否存在语法错误:

/usr/local/nginx/sbin/nginx -t

 如果检查通过,重启 Nginx 服务使配置生效:

/usr/local/nginx/sbin/nginx -s reload

2.4 验证部署

在浏览器中输入服务器的域名或 IP 地址,如果能够看到前端项目的页面,说明部署成功。

三、静态资源缓存配置

为了提高前端项目的性能,减少服务器的负载,可以对静态资源进行缓存配置。在 my-frontend-project.conf 文件中添加以下内容:

location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {expires 30d;add_header Cache-Control "public, no-transform";
}
  • location ~* \.(css|js|png|jpg|jpeg|gif|ico)$:匹配 CSS、JavaScript、图片等静态资源文件。
  • expires 30d:设置静态资源的缓存时间为 30 天,客户端在 30 天内再次请求该资源时,将直接使用本地缓存。
  • add_header Cache-Control "public, no-transform":添加 Cache-Control 头信息,允许公共缓存,不进行转换。

四、反向代理配置

如果前端项目需要与后端 API 进行交互,可以使用 Nginx 进行反向代理配置。在 my-frontend-project.conf 文件中添加以下内容:

四、反向代理配置

如果前端项目需要与后端 API 进行交互,可以使用 Nginx 进行反向代理配置。在 my-frontend-project.conf 文件中添加以下内容:

location /api/ {proxy_pass http://backend_server_ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
  • location /api/:匹配以 /api/ 开头的请求。
  • proxy_pass http://backend_server_ip:port/:将请求转发到后端服务器的指定地址和端口。
  • proxy_set_header:设置请求头信息,将客户端的真实 IP 地址传递给后端服务器。

完整的  my-frontend-project.conf 文件

server {listen 80;server_name your_domain;# 前端项目根目录root /var/www/my-frontend-project;# 默认索引文件index index.html index.htm;# 静态资源缓存配置location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {# 缓存 30 天expires 30d;add_header Cache-Control "public, no-transform";}# 前端项目根路径配置location / {try_files $uri $uri/ /index.html;}# 反向代理配置,将 /api/ 开头的请求转发到后端服务器location /api/ {proxy_pass http://backend_server_ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}

请根据实际情况修改上述配置文件中的域名、前端项目路径、后端 API 地址等信息。修改配置文件后,使用 sudo /usr/local/nginx/sbin/nginx -t 检查配置语法,确认无误后使用 sudo /usr/local/nginx/sbin/nginx -s reload 重新加载配置。 

相关文章:

前端项目配置 Nginx 全攻略

在前端开发中,项目开发完成后,如何高效、稳定地将其部署到生产环境是至关重要的一步。Nginx 作为一款轻量级、高性能的 Web 服务器和反向代理服务器,凭借其出色的性能和丰富的功能,成为了前端项目部署的首选方案。本文将详细介绍在…...

基于开源鸿蒙(OpenHarmony)的【智能家居综合应用】系统

基于开源鸿蒙OpenHarmony的智能家居综合应用系统 1. 智能安防与门禁系统1) 系统概述2) 系统架构3)关键功能实现4)安全策略5)总结 2.环境智能调节系统1)场景描述2)技术实现3)总结 3.健康管理与睡眠监测1&…...

电子电气架构 --- 主机厂电子电气架构演进

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...

物联网通信应用案例之《智慧农业》

案例概述 在智慧农业方面,一般的应用场景为可以自动检测温度湿度等一系列环境情况并且可以自动做出相应的处理措施如简单的浇水和温度控制等,且数据情况可远程查看,以及用户可以实现远程控制。 基本实现原理 传感器通过串口将数据传递到Wi…...

Java注解的原理

目录 问题: 作用: 原理: 注解的限制 拓展: 问题: 今天刷面经,发现自己不懂注解的原理,特此记录。 作用: 注解的作用主要是给编译器看的,让它帮忙生成一些代码,或者是帮忙检查…...

AI知识架构之神经网络

神经网络:这是整个内容的主题,是一种模拟人类大脑神经元结构和功能的计算模型,在人工智能领域广泛应用。基本概念:介绍神经网络相关的基础概念,为后续深入理解神经网络做铺垫。定义与起源: 神经网络是模拟人类大脑神经元结构和功能的计算模型,其起源于对生物神经系统的研…...

OpenGL 04--GLSL、数据类型、Uniform、着色器类

一、着色器 在 OpenGL 中,着色器(Shader)是运行在 GPU 上的程序,用于处理图形渲染管线中的不同阶段。 这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说,着色器只是一种把输入转化为输出的程序。着色器…...

学习笔记06——JVM调优

JVM 调优实战:性能优化的技巧与实战 在 Java 开发中,JVM(Java Virtual Machine)作为 Java 程序的运行环境,其性能直接影响到应用程序的响应速度和吞吐量。合理的 JVM 调优可以显著提升应用性能,降低延迟&a…...

深度学习(3)-TensorFlow入门(常数张量和变量)

低阶张量操作是所有现代机器学习的底层架构,可以转化为TensorFlow API。 张量,包括存储神经网络状态的特殊张量(变量)​。 张量运算,比如加法、relu、matmul。 反向传播,一种计算数学表达式梯度的方法&…...

3-2 WPS JS宏 工作簿的打开与保存(模板批量另存为工作)学习笔记

************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...

【GO】学习笔记

目录 学习链接 开发环境 开发工具 GVM - GO多版本部署 GOPATH 与 go.mod go常用命令 环境初始化 编译与运行 GDB -- GNU 调试器 基本语法与字符类型 关键字与标识符 格式化占位符 基本语法 初始值&零值&默认值 变量声明与赋值 _ 下划线的用法 字…...

【TypeScript】ts在vue中的使用

目录 一、Vue 3 TypeScript 1. 项目创建与配置 项目创建 关键配置文件 2.完整项目结构示例 3. 组件 Props 类型定义 4. 响应式数据与 Ref 5. Composition 函数复用 二、组件开发 1.组合式API(Composition API) 2.选项式API(Options…...

2025前端框架最新组件解析与实战技巧:Vue与React的革新之路

作者:飞天大河豚 引言 2025年的前端开发领域,Vue与React依然是开发者最青睐的框架。随着Vue 3的全面普及和React 18的持续优化,两大框架在组件化开发、性能优化、工程化支持等方面均有显著突破。本文将从最新组件特性、使用场景和编码技巧三…...

Elasticsearch 的分布式架构原理:通俗易懂版

Elasticsearch 的分布式架构原理:通俗易懂版 Lucene 和 Elasticsearch 的前世今生 Lucene 是一个功能强大的搜索库,提供了高效的全文检索能力。然而,直接基于 Lucene 开发非常复杂,即使是简单的功能也需要编写大量的 Java 代码&…...

【DeepSeek】【GPT-Academic】:DeepSeek集成到GPT-Academic(官方+第三方)

目录 1 官方deepseek 1.1 拉取学术GPT项目 1.2 安装依赖 1.3 修改配置文件中的DEEPSEEK_API_KEY 2 第三方API 2.1 修改DEEPSEEK_API_KEY 2.2 修改CUSTOM_API_KEY_PATTERM 2.3 地址重定向 2.4 修改模型参数 2.5 成功调用 2.6 尝试添加一个deepseek-r1参数 3 使用千帆…...

2.部署kafka:9092

官方文档:http://kafka.apache.org/documentation.html (虽然kafka中集成了zookeeper,但还是建议使用独立的zk集群) Kafka3台集群搭建环境: 操作系统: centos7 防火墙:全关 3台zookeeper集群内的机器,1台logstash 软件版本: …...

学习路之PHP --TP6异步执行功能 (无需安装任何框架)

学习路之PHP --异步执行功能 (无需安装任何框架) 简介一、工具类二、调用三、异步任务的操作四、效果: 简介 执行异步任务是一种很常见的需求,如批量发邮箱,短信等等执行耗时任务时,需要程序异步执行&…...

Uniapp 小程序复制、粘贴功能实现

在开发 Uniapp 小程序的过程中,复制和粘贴功能是非常实用且常见的交互需求。今天,我就来和大家详细分享如何在 Uniapp 中实现这两个功能。 复制功能:uni.setClipboardData方法 goResult() {uni.setClipboardData({data: this.copyContent, /…...

seacmsv9注入管理员账号密码+orderby+limit

一、seacmsv9 SQL注入漏洞 查看源码 <?php session_start(); require_once("include/common.php"); //前置跳转start $cs$_SERVER["REQUEST_URI"]; if($GLOBALS[cfg_mskin]3 AND $GLOBALS[isMobile]1){header("location:$cfg_mhost$cs");}…...

多通道数据采集和信号生成的模块化仪器如何重构飞机电子可靠性测试体系?

飞机的核心电子系统包括发电与配电系统&#xff0c;飞机内部所有设备和系统之间的内部数据通信系统&#xff0c;以及用于外部通信的射频设备。其他所有航空电子元件都依赖这些关键总线进行电力传输或数据通信。在本文中&#xff0c;我们将了解模块化仪器&#xff08;无论是PCIe…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...