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

Nginx部署前端项目

Nginx部署前端项目

1.在nginx官网http://nginx.org/en/download.html ,下载稳定版本:

2.解压后,点击根目录中的nginx.exe即可启动Nginx,或是在nginx安装目录中启动cmd并输入以下命令启动:

nginx.exe
或
start nginx

3.然后在浏览器中输入localhost127.0.0.1就可以进入欢迎页:

image-20231114101122939

4.如果不能进入欢迎页或是报404,建议更改nginx根目录中conf文件夹中的nginx.conf文件,将端口号改一改:

5.进入前端项目所在的目录,执行以下命令,将项目打包成一个dist目录:

npm run build

6.修改nginx根目录下conf文件夹中的nginx.conf文件:

  • #user nobody;改为#user root;

  • 修改server配置中的监听的端口和部署的主机IP:

  • 修改发布路径的根目录,将html改为html/dist:

  • 在nginx安装目录中cmd通过命令nginx -s reload重启nginx,通过局域网内的主机访问localhost:端口号就可以访问前端项目了:
  • 将后端项目打包成jar包:然后在jar文件所在目录使用命令java -jar xxx.jar启动后端程序,这样前后端就串联到了一起。

在这里插入图片描述

  • 如果是多个项目的话,可以将前端项目打包成dist文件后,将其命名为dist1、dist2等,然后再配置nginx.conf文件,将server内的内容复制并修改端口号和根目录:

相关文章:

Nginx部署前端项目

Nginx部署前端项目 1.在nginx官网http://nginx.org/en/download.html ,下载稳定版本: 2.解压后,点击根目录中的nginx.exe即可启动Nginx,或是在nginx安装目录中启动cmd并输入以下命令启动: nginx.exe 或 start nginx3…...

根据文件类型进行下载, 文档/图片

根据文件类型进行下载, 文档/图片 function loadFile(fileUrl, fileName) {if (isImageByExtension(fileUrl)) {try {downloadRes(fileUrl, fileName)} catch (error) {downloadFile(fileUrl, fileName)}} else {downloadRes(fileUrl, fileName)} } const downloadFile (file…...

赋范线性空间3

赋范线性空间三 文章目录 赋范线性空间三三、内积空间3.1 内积空间的定义和性质【定义】内积【定理】内积的性质——Schwarz不等式【定义】有内积导出的范数【定理】内积、由内积导出的范数 的性质 3.2 正交与正交系【定义】正交、正交补【定理】勾股定理在内积空间中的推广【定…...

XSLVGL2.0 User Manual 缩略图生成器(v2.0)

XSLVGL2.0 开发手册 XSLVGL2.0 User Manual 缩略图生成器 1、概述2、特性3、APIs3.1、xs_system_init_thumbnail3.2、xs_system_exit_thumbnail3.3、xs_system_get_thumbnail3.4、xs_system_thumbnail_on_cache_to_storage_defalut4、使用方法5、自定义缩略图生成方法1、概述 …...

练习八-利用有限状态机进行时序逻辑的设计

利用有限状态机进行时序逻辑的设计 1,任务目的:2,RTL代码,及原理框图3,测试代码,输出波形 1,任务目的: (1)掌握利用有限状态机实现一般时序逻辑分析的方法&am…...

WebAssembly照亮了 Web端软件的未来

WebAssembly的发展历程相对较短,但影响深远。WebAssembly 于 2015 年首次发布,先驱技术是来自Mozilla的asm.js和Google Native Client,最初的实现是基于asm.js的功能集。自2017年3月由WebAssembly创造的MVP的预览版发布以来,WebAs…...

PDF文件无密码,如何解密?

PDF文件有两种密码,一个打开密码、一个限制编辑密码,因为PDF文件设置了密码,那么打开、编辑PDF文件就会受到限制。想要解密,我们需要输入正确的密码,但是有时候我们可能会出现忘记密码的情况,或者网上下载P…...

搜维尔科技:Movella Xsens MVN LINK 实际应用,一镜到底!

搜维尔科技:Movella Xsens MVN LINK 实际应用,一镜到底!...

wsl安装ubuntu的问题点、处理及连接

WSL安装Ubuntu的参考链接 (41条消息) wsl报错:WslRegisterDistribution failed with error: 0x800701bc_yzpyzp的博客-CSDN博客_0x800701bc wsl (41条消息) 使用Ubuntu安装软件出现Unable to locate package错误解决办法_大灰狼学编程的博客-CSDN博客 手把手教你…...

Flutter在web项目中使用iframe

需要把原来的app项目移植到web上面,在app中使用的是flutter_inappwebview这个库,推荐使用这个库,因为修复了一部分webview_flutter中存在的问题 在web项目中flutter_inappwebview这个库不支持,所以需要自己封装一个web项目中的we…...

阿里云高校计划学生和教师完成认证领取优惠权益

阿里云高校计划学生和教师均可参与,完成学生认证和教师验证后学生可以免费领取300元无门槛代金券和3折优惠折扣,适用于云服务器等全量公共云产品,订单原价金额封顶5000元/年,阿里云百科aliyunbaike.com分享阿里云高校计划入口及学…...

劲松HPV防治诊疗中心提醒:做完HPV检查后,需留意这些事项!

在接受HPV检查后,有一些注意事项需要您注意。首先,要遵循医生的建议,并按照医生的指示进行后续治疗和随访。 其次,检查后可能会有些不适感,这是正常的现象,不必过于担心。但是,如果不适感持续加…...

InfoNCE Loss公式及源码理解

InfoNCE Loss公式及源码理解–从交叉熵损失谈起 当谈论到信息论中的损失函数时,InfoNCE(Noise Contrastive Estimation)和交叉熵损失都是两个关键的概念。它们不仅在衡量概率分布之间的差异方面发挥着重要作用,而且在深度学习的自…...

经典双指针算法试题(二)

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、有效三角形的个数1、题目讲解2、讲解算法原理3、代码实现 二、查找总价格为目标值的两个商…...

MySQL -- DQL

1、select查询列和列名: --查询所有员工信息(*通配符,默认查询所有的列) select * from emp;--查询员工的姓名 select ename from emp;--查询员工的薪资 select sal from emp;--查询员工的姓名和薪资 select ename , sal from emp; select ename sal fr…...

高防CDN:保障网络安全的未来之路

在当前数字化飞速发展的时代,网络安全问题日益成为企业和个人关注的焦点。高防CDN(Content Delivery Network,内容分发网络)作为一种专注于防御网络攻击的解决方案,尽管在技术上表现卓越,但其普及却面临一系…...

使用wxPython和PyMuPDF合并PDF文档并自动复制到剪贴板

导语:处理大量的PDF文档可能会变得复杂和耗时。但是,使用Python编程和一些强大的库,如wxPython和PyMuPDF,可以使这个任务变得简单而高效。本文将详细解释一个示例代码,展示如何使用这些库来创建一个可以选择文件夹中的…...

Redis篇---第十四篇

系列文章目录 文章目录 系列文章目录前言一、为什么Redis的操作是原子性的,怎么保证原子性的?二、了解Redis的事务吗?四、Redis 的数据类型及使用场景前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男…...

python之文件操作

文件的读取、修改、写入 知识点:不可以使用for循环生成变量,替代方式:将每次循环生成的数据添加到列表中,再对列表进行操作 例子:根据输入的环境名称操作hosts文件,注释掉其他环境 #env1 127.0.0.1 127.0.…...

android实时投屏软件QtScrcpy

QtScrcpy 可以通过 USB / 网络连接Android设备,并进行显示和控制。无需root权限。 同时支持 GNU/Linux ,Windows 和 MacOS 三大主流桌面平台。 QtScrcpy: Android实时投屏软件,此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...