前端通过nginx部署一个本地服务的方法

前端通过nginx部署一个本地服务的方法:

1.下载ngnix

nginx
下载完成后解压缩后运行nginx.exe文件

2.打包你的前端项目文件

yarn build 

把生成的dist文件复制出来,替换到nginx的html文件下
在这里插入图片描述

3.配置conf目录的nginx.conf文件

主要配置server监听

    server {listen       8088;server_name  localhost;location / {root  D:\\nginx-1.26.2\\nginx-1.26.2\\html;try_files $uri $uri/ @router;index  index.html index.htm;}location /api/ {proxy_pass http://localhost:1001/;  #匹配到/api/关键字可以转换到指定服务下proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 处理前端路由的 named locationlocation @router {# 这里通常指向你的前端入口文件,例如 index.html# 也可以在这里进行更复杂的反向代理设置rewrite ^/(.*)$ /index.html last;}location = /favicon.ico {log_not_found off;access_log off;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

root D:\nginx-1.26.2\nginx-1.26.2\html;配置静态文件的目录,
正常是单斜杠,如果报错就试试双斜杠
location /api/ 匹配到/api/关键字可以转换到指定后端服务下
try_files $uri $uri/ @router; location @router 是为了避免刷新报错

4.运行nginx服务

运行cmd 运行到nginx服务的目录下,运行服务

cd xxxx/nginx-1.26.2
nginx -t 
nginx -s reload //重新运行

以上配置完成后打开localhost:8088就可以打开前端项目了。

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

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

相关文章

深度学习基础知识-损失函数

目录 1. 均方误差(Mean Squared Error, MSE) 2. 平均绝对误差(Mean Absolute Error, MAE) 3. Huber 损失 4. 交叉熵损失(Cross-Entropy Loss) 5. KL 散度(Kullback-Leibler Divergence&…

如何在BSV区块链上实现可验证AI

​​发表时间:2024年10月2日 nChain的顶尖专家们已经找到并成功测试了一种方法:通过区块链技术来验证AI(人工智能)系统的输出结果。这种方法可以确保AI模型既按照规范运行,避免严重错误,遵守诸如公平、透明…

网络原理(应用层)->HTTPS解

前言: 大家好我是小帅,今天我们来了解HTTPS, 个人主页:再无B~U~G 文章目录 1.HTTPS1.1HTTPS 是什么?1.2 "加密" 是什么1.3 HTTPS 的⼯作过程1.3. 1对称加密1.3.2⾮对称加密 1.4中间人攻击1.5 证书…

TOEIC 词汇专题:娱乐休闲篇

TOEIC 词汇专题:娱乐休闲篇 在娱乐和休闲活动中,我们会接触到许多特定的词汇。这些词汇涉及到活动入场、观众互动、评论等各个方面,帮助你在相关场景中更加自如。 1. 入场和观众 一些常用词汇帮助你轻松应对观众与入场管理相关的场景&#…

Spring框架---AOP技术

AOP概念的引入 第一步创建普通Maven项目 导入依赖 <dependencies><!--spring的核心--><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.0.2.RELEASE</version&g…

双指针算法篇——一快一慢须臾之间解决问题的飘逸与灵动(2)

前言&#xff1a; 上篇我们讲解了双指针算法的含义以及相关题型讲解&#xff0c;本次则趁热打铁&#xff0c;通过进阶题目的分析与讲解&#xff0c;促使我们更深入和灵活的理解运用双指针算法。 相关题目及讲解 一. 盛最多水的容器 题目链接&#xff1a;11. 盛最多水的容器 -…

koa项目实战 == 实现注册登录鉴权

一. 项目的初始化 1 npm 初始化 npm init -y生成package.json文件: 记录项目的依赖 2 git 初始化 git init生成’.git’隐藏文件夹, git 的本地仓库 3 创建 ReadMe 文件 二. 搭建项目 1 安装 Koa 框架 npm install koa2 编写最基本的 app 创建src/main.js const Koa…

ONLYOFFICE 文档8.2更新评测:PDF 协作编辑、性能优化及更多新功能体验

文章目录 &#x1f340;引言&#x1f340;ONLYOFFICE 产品简介&#x1f340;功能与特点&#x1f340;体验与测评ONLYOFFICE 8.2&#x1f340;邀请用户使用&#x1f340; ONLYOFFICE 项目介绍&#x1f340;总结 &#x1f340;引言 在日常办公软件的选择中&#xff0c;WPS 和微软…

MATLAB下的四个模型的IMM例程(CV、CT左转、CT右转、CA四个模型),附下载链接

基于IMM算法的目标跟踪。利用卡尔曼滤波和多模型融合技术&#xff0c;能够在含噪声的环境中提高估计精度&#xff0c;带图像输出 文章目录 概述源代码运行结果代码结构与功能1. 初始化2. 仿真参数设置3. 模型参数设置4. 生成量测数据5. IMM算法初始化6. IMM迭代7. 绘图8. 辅助函…

Segmentation fault 问题解决

问题描述 执行有import torch代码的py 文件报Segmentation fault 原因分析&#xff1a; 查了网上说的几种可能性 import torch 时出现 “Segmentation fault” 错误&#xff0c;通常表示 PyTorch 的安装或配置存在问题 可能的原因 不兼容的库版本: PyTorch、CUDA 或其他依赖…

如何搭建汽车行业AI知识库:定义+好处+方法步骤

在汽车行业&#xff0c;大型车企面临着员工众多、价值链长、技术密集和知识传播难等挑战。如何通过有效的知识沉淀与应用&#xff0c;提升各部门协同效率&#xff0c;快速响应客户咨询&#xff0c;降低销售成本&#xff0c;并开启体系化、可持续性的知识管理建设&#xff0c;成…

QGIS:HCMGIS插件

插件GitHub地址&#xff1a;https://github.com/thangqd/HCMGIS。 以下对HCMGIS插件进行简单介绍&#xff0c;并演示如何进行地图数据下载。 插件简介 HCMGIS - Basemaps, Download OpenData, Batch Converter, VN-2000 Projections, and Field Calculation Utilities for QGI…

SpringBoot集成Shiro+Jwt+Redis

1. 概述 首先需要知道为什么使用 ShiroJwtRedis 进行登录认证和权限控制。 1. 为什么用Shiro&#xff1f; 主要用的是 shiro 的登录认证和权限控制功能。 Shiro 参见本栏目文章 &#x1f343;《Shiro实战》 2. 为什么用Jwt&#xff1f; Shiro 默认的 Session 机制来帮助实现…

jenkins 构建报错 Cannot run program “sh”

原因 在 windows 操作系统 jenkins 自动化部署的时候, 由于自动化构建的命令是 shell 执行的,而默认windows 从 path 路径拿到的 shell 没有 sh.exe &#xff0c;因此报错。 解决方法 前提是已经安装过 git WINR 输入cmd 打开命令行, 然后输入where git 获取 git 的路径, …

Springboot——对接支付宝实现扫码支付

文章目录 前言官方文档以及说明1、申请沙箱2、进入沙箱获取对应的关键信息3、拿到系统生成的公钥和密钥 注意事项创建springboot项目1、引入依赖2、配置连接参数3、创建配置类&#xff0c;用于接收这些参数4、中间类的定义(订单类)5、编写测试接口场景一、pc端请求后端后&#…

【云备份项目】json以及jsoncpp库的使用

目录 1.JSON 2.什么是 JSON&#xff1f; 3.JSON 发展史 4.为什么要使用 JSON&#xff1f; 5.JSON 的不足 6.JSON 应该如何存储&#xff1f; 7.什么时候会使用 JSON 7.1.定义接口 7.2.序列化 7.3.生成 Token 7.4.配置文件 8.JSON的语法规则 8.1.对象和数组 8.2.JS…

【C++篇】在秩序与混沌的交响乐中: STL之map容器的哲学探寻

文章目录 C map 容器详解&#xff1a;高效存储与快速查找前言第一章&#xff1a;C map 的概念1.1 map 的定义1.2 map 的特点 第二章&#xff1a;map 的构造方法2.1 常见构造函数2.1.1 示例&#xff1a;不同构造方法 2.2 相关文档 第三章&#xff1a;map 的常用操作3.1 插入操作…

HOT100_最大子数组和

class Solution {public int maxSubArray(int[] nums) {int[] dp new int[nums.length];int res nums[0];dp[0] nums[0];for(int i 1; i< nums.length; i){dp[i] Math.max(nums[i] ,dp[i-1] nums[i]);res Math.max(res, dp[i]);}return res;} }

contenteditable实现需要一个像文本域一样的可编辑框

我这里是因为左上和右下有一个固定的模板&#xff0c;所有用textarea有点不方便&#xff0c;查了下还有一个方法可以解决就是在需要编辑的元素上加上 :contenteditable"true" 完整代码如下&#xff0c;因为这个弹窗是两用的&#xff0c;所以用messageType做了一下判…

SpringBoot源码解析(一)

SpringBoot自动装配原理 SpringBootApplication注解 我们在使用SpringBoot时&#xff0c;通常使用的是SpringBootApplication这个注解&#xff0c;比如&#xff1a; 而这个注解的定义为下图&#xff0c;可以发现这个注解上有另外三个注解&#xff1a;SpringBootConfiguration…