手把手教学部署前端项目到nginx

1.下载nginx

说明:下载11.20.2版本的nginx。  

2.配置nginx

说明:找到conf目录下的nginx.conf文件。

2.1代理静态资源

说明:服务器块监听的端口为8089,意味着Nginx将在8089端口上接收和处理HTTP请求。root后面的值相当于html文件夹里面的dist文件夹。index的属性值是设置默认打开文档。

    server {
        listen       8089;
        server_name  localhost;

        #access_log  logs/host.access.log  main;
        # 静态资源代理
        location / {
            root   html/dist;   #路径
            index  index.html index.htm;
        }

2.2代理服务器

说明:请求代理的是带有/dev路径的请求。/dev/和http://***/这两个加斜号的代表的最终服务器路径是没有/dev。

        #设置代理转发请求  如果请求包含/dev
        location /dev/ {
          #设置代理
            proxy_pass http://****/;
        }

3. 前端代理配置

说明:如果前端发起的请求带有/dev的话,那么将会转发到target路径上去,如果服务器的地址没有/dev,那么需要rewrite重写为空。

  server: {
    proxy: {
      '/dev': {
        target: 'https://*******',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dev/, '')
      }
    }
  }

4.将打包项目扔进nginx的html目录中

 说明:将前端打包的dist目录扔进nginx的html目录里面

5.访问

说明:因为监听的是8089端口,因此通过8089访问。

 

 

6.常用nginx命令

6.1检查文件是否语法错误

nginx -t

6.2重启nginx服务 

nginx -s load 

6.3停止nginx服务 

nginx -s quit

 

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

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

相关文章

实时交通 | 城市交通态势采集及可视化操作(定时运行)

一、前言 交通态势数据是关于交通状况的一种量化描述,它提供了关于道路网络运行状态的详细信息。交通态势数据指的是根据车流入量和车流出量的定义,衡量整个全局交通区域交通态势的数据。这些数据通常从车辆GPS轨迹数据中提取,包括车辆行驶速…

时代巨兽!深度神经网络如何改变我们的世界?

深度神经网络 1、 简介1.1 定义深度神经网络1.2 深度学习的发展历程1.3 深度神经网络的应用领域 2、深度神经网络的基本原理2.1 神经元层2.1.1 神经元2.1.2 神经元层 2.2 前向传播2.3 反向传播2.4 激活函数2.4.1、作用2.4.2、常见激活函数2.4.3、选择激活函数的考虑 2.5 损失函…

new Set( )的基本使用以及如何去重对象数组

目录 Set 对象方法 Set 对象作用 实现数组的去重 实现字符串的去重 实现并集 交集 差集 实现去重对象数组 相关参考资料 在 ES6 中,引入了一个新的数据结构类型:Set。而 Set 与 Array 的结构是很类似的,且 Set 和 Array 可以相互进…

MySQL学习——创建MySQL Workbench中的Connections

在MySQL Workbench中,Connections(连接)是用户与MySQL数据库进行交互的桥梁。 本文将添加一个新连接,该连接可以是初始连接,也可以是附加连接。在开始之前,必须安装、启动MySQL服务器的实例,并…

算法体系-19 第十九节 暴力递归到动态规划

一 动画规划的概念 优化出现重复解的递归 一旦写出递归来,改动态规划就很快 尝试策略和状态转移方程是一码事 学会尝试是攻克动态规划最本质的能力 如果你发现你有重复调用的过程,动态规划在算过一次之后把答案记下来,下回在越到重复调用过程…

基于springboot实现农产品直卖平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现农产品直卖平台系统的设计演示 摘要 计算机网络发展到现在已经好几十年了,在理论上面已经有了很丰富的基础,并且在现实生活中也到处都在使用,可以说,经过几十年的发展,互联网技术已经把地域信息的隔…

【安卓设备】通过adb批量安装apk

1、adb链接设备 H:\tv\apk>adb connect 127.0.0.1:21503 2、批量安装apk 如果地址不一致需要将 H:\tv\apk\ 改成自己的路径地址,同时注意该命令只能安装文件名为英文的不支持中文名称,如果有需要先更改文件名称。 H:\tv\apk>for %f in (H:\tv\a…

IT入门知识博客文章大纲第一部分《IT基础知识》(1/10)

目录 IT入门知识博客文章大纲第一部分《IT基础知识》(1/10) 1.引言 2.第一部分:IT基础知识 2.1 计算机硬件 CPU:计算机的心脏 内存:数据的临时居所 存储设备:数据的长期仓库 输入输出设备&#xff1…

Node.js和npm的安装及配置

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞 I/O 的模型。 npm(node package manager)是一个 Node.js 包管理和分发工具,也是整个 Node.js 社区最流行、支持第三方模块最多的包管理器。使…

【YashanDB知识库】PHP使用ODBC使用数据库绑定参数功能异常

【问题分类】驱动使用 【关键字】ODBC、驱动使用、PHP 【问题描述】 PHP使用PDO_ODBC连接yashan数据库,使用绑定参数获取数据时,客户现场出现报错 本地复现未出现异常报错,但是无法正确获取数据。 【问题原因分析】开启ODBC报错日志后&am…

使用 Python 进行测试(1)测试基础

原文 总结 我们将从unittest开始,尽管它并不那么好用,但它是Python标准库中的测试工具。 使用unittest编写测试看起来像这样: import unittest# 需要测试的代码 def add(a, b):return a b# The tests class TestAddFunction(unittest.Test…

网络安全攻防基础入门笔记--操作系统名词解释文件下载反弹shell防火墙绕过

渗透测试常用专业术语 POC,EXP,Payload,Shellcode POC 全程Proof of Concept,中文"概念验证",常指一段漏洞证明的代码 EXP 全程Exploit ,中文"利用",指利用系统漏洞进行攻击的动作 Payload 中文"有效载荷",指成功Exploit之后,真正在目标系…

车道偏离预警系统技术规范(简化版)

车道偏离预警系统技术规范(简化版) 1 系统概述2 预警区域3 功能条件4 显示需求5 指标需求 1 系统概述 车道偏离预警系统工作在中高速驾驶的情况下,当驾驶员因注意力不集中导致车辆偏离本车道时,系统通过光学和声学信号对驾驶员进行…

MySQL 使用 MyFlash 快速恢复误删除、误修改数据

一、MyFlash MyFlash 是由美团点评公司技术工程部开发并维护的一个开源工具,主要用于MySQL数据库的DML操作的回滚。这个工具通过解析binlog日志,帮助用户高效、方便地进行数据恢复。MyFlash的优势在于它提供了更多的过滤选项,使得回滚操作变…

UC Berkeley简介以及和Stanford的区别与联系

UC Berkeley Source: Google Map 中文版 UC Berkeley,全称University of California, Berkeley,是一所位于美国加利福尼亚州伯克利市的世界知名公立研究型大学。以下是关于UC Berkeley的详细介绍: 学术声誉和排名 学术声誉: U…

欧洲杯德语词汇与表达,柯桥零基础德语培训

欧洲杯 - die Europameisterschaft 足球 - der Fuball 比赛 - das Spiel / die Partie 球员 - der Spieler 教练 - der Trainer 裁判 - der Schiedsrichter 球迷 - die Fans 进球 - das Tor 守门员 - der Torwart / der Torhter 前锋 - der Strmer 中场 - der Mittelf…

2024最值得入手骨传导耳机指南,精选五款分享!

作为前几年在蓝牙耳机市场杀出的一匹黑马,黑科技加持的骨传导耳机受到广大运动爱好者的喜爱。利用骨传导技术,通过头骨、颌骨把声音传到听觉神经引起听觉,同时又不阻碍外接声音的通过,保证了佩戴的舒适性也带来安全使用的最佳体验…

判断两张图片是否相似

判断两张图片是否相似 要判断两张图片是否相似,你可以使用多种方法,其中包括结构相似性指数(SSIM)和 perception hash 等。以下是使用 SSIM 和 perception hash 进行判断的示例代码。 安装必要的包 确保你已经安装了 scikit-im…

帕金森病的食疗建议

帕金森病(PD)是一种慢性、进展性的神经退行性疾病,主要影响中老年人。虽然目前尚无法根治,但及早规范治疗可显著改善症状,提高患者的生活质量。饮食调理作为帕金森病综合治疗的重要组成部分,对于维持患者较…

unity数独游戏

using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class MainMenuPanel : MonoBehaviour {public Button btnPlay; // 开始按钮public Slider sldDifficulty; // 难度滑动条private void Awake(){/…