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内的内容复制并修改端口号和根目录:

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

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

相关文章

Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

遇到这种报错 先去相关页面搜索关键字 定位到具体的报错代码 Cannot read properties of undefined (reading ‘resetFields’)" 关键字:resetFields 此方法作用:对整个表单进行重置 将所有字段值重置为初始值并移除校验结果 报错场景:…

SWT/Jface(1): 表格的创建和渲染

前言 使用JFace创建表格还是比较方便的, 如果仅仅是创建空表格的话, 以下2步即可完成: 创建TableViewer对象, 指定样式, 比如是否支持多行选择, 有无边框, 是否支持滚动条等创建TableColumn对象: 包括列展示名称, 宽度和样式等, 最终绑定到table对象 实例 创建表格 //注意…

深入浅出 Linux 中的 ARM IOMMU SMMU I

Linux 系统下的 SMMU 介绍 在计算机系统架构中,与传统的用于 CPU 访问内存的管理的 MMU 类似,IOMMU (Input Output Memory Management Unit) 将来自系统 I/O 设备的 DMA 请求传递到系统互连之前,它会先转换请求的地址,并对系统 I…

灵活运用Vue 3中的setup函数—深入解析Composition API

新建项目,项目主入口为App.vue(主组件),新建child.vue(子组件)。 1.1 setup 执行 时机问题 1.在主组件里引入子组件和ref: import {ref} from vue import child from ./components/child.vue2…

爆款文章有诀窍,内容创作者如何能持续产出优质内容

内容营销人有没有这么一种共鸣:10 万 那么多,为什么不能多我一个? 通常,我们把浏览量 / 阅读量高、转评赞数量高的内容看作爆款,而数据如果达到 10 万 则是超级爆款。因为,阅读量高意味着内容得到了大量的曝…

Unsupervised Condition GAN

Unsupervised Condition GAN主要有两种做法: Direct Transformation 直接输入domain X图片,经过Generator后生成对应的domain Y的图像。这种转化input和output不能够差太多。通常只能实现较小的转化,比如改变颜色等。 Projection to Commo…

人工智能的时代---AI的影响

人工智能(AI)是当前科技领域的一个热门话题,它正在以前所未有的速度改变着我们的生活方式和工作方式。从智能家居到自动驾驶,从智能医疗到智能金融,人工智能正在渗透到我们生活的方方面面。在这篇文章中,我…

Java项目实战《苍穹外卖》 三、登录功能

测测你是什么人格吧,地址: MBTI 16种人格测试官网 系列文章目录 苍穹外卖是黑马程序员2023年的Java实战项目,作为业余练手用,需要源码或者课程的可以找我,无偿分享 Java项目实战《苍穹外卖》 一、项目概述Java项目实战…

10月起个税系统升级,3个月个税零申报将收到提示

近日,自然人电子税务局扣缴端升级了,升级后对于工资薪金收入连续三个月为零的纳税人,系统会自动出现以下提示。这个提示主要为了避免企业长期对已经离职的员工进行零申报,导致数据不准确和资源浪费。HR在申报个税时,一…

虚拟摇杆OnJoystickMove未被调用,角色不移动

更改interaction type 为 event notification

什么是应急演练脚本?其设计原则是什么?

应急演练脚本是一种系统性、有计划的模拟性文件,旨在测试和评估组织在紧急情况下的应对能力。这种脚本提供了一系列步骤和场景,以确保团队能够高效、协调地应对各种紧急事件。以下将详细探讨应急演练脚本的定义、设计原则以及实施过程。 一、应急演练脚本…

React整理总结(五、Redux)

1.Redux核心概念 纯函数 确定的输入,一定会产生确定的输出;函数在执行过程中,不能产生副作用 store 存储数据 action 更改数据 reducer 连接store和action的纯函数 将传入的state和action结合,生成一个新的state dispatc…

IPFoxy:什么是数据中心代理IP?好用吗?

数据中心代理是代理IP中最常见的类型,也被称为机房IP。这些代理服务器为用户分配不属于 ISP(互联网服务提供商)而来自第三方云服务提供商的 IP 地址。数据中心代理的最大优势——它们允许在访问网络时完全匿名。 如果你正在寻找海外代理IP&am…

【Java 进阶篇】揭秘 Jackson:Java 对象转 JSON 注解的魔法

嗨,亲爱的同学们!欢迎来到这篇关于 Jackson JSON 解析器中 Java 对象转 JSON 注解的详细解析指南。JSON(JavaScript Object Notation)是一种常用于数据交换的轻量级数据格式,而 Jackson 作为一款优秀的 JSON 解析库&am…

js进阶笔记之原型,原型链

目录 1、原型对象 constructor 属性 对象原型 2、原型链 3、instanceof 4、原型继承 1、原型对象 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。 面向对象是把事务分解成为…

python刷题笔记1(42例题)

1. split()函数 str.split([sep [, maxsplit]]) 分割字符串,返回一个数组 2. 判断子串 # 判断子串是否在主串里面,是则输出“Yes”,否则输出“No” str1 input("子串:") str2 input("主串:") if str1 in s…

最新绿豆APP源码苹果CMS影视插件版本/原生JAVA源码+反编译开源+免授权

源码简介: 最新绿豆APP源码苹果CMS影视插件版本,它是原生JAVA源码反编译开源免授权,绿豆影视对接苹果CMS,它可以支持多功能自定义DIY页面布局。 1、新版绿豆视频APP视频6.1插件版反编译指南及教程 2、后端插件开源,可…

创建 Springboot 项目

前言 创建 Spring Boot 项目是很多Java开发人员入门的重要一步! 欢迎来到本篇关于创建 Spring Boot 项目的博客!Spring Boot作为一个快速、便捷的开发框架,为我们提供了简化和加速应用程序开发的利器。 在这个数字化时代,快速响…

在Jupyter Lab中使用多个环境,及魔法命令简介

一、Jupyter Lab使用conda虚拟环境 1、给虚拟环境添加 ipykernel 方法一: 创建环境时直接添加ipykernel 方法:conda create -n 【虚拟环境名称】python3.8 ipykernel实例如下: conda create -n tensorflow_cpu python3.8 ipykernel 方法二&#xff…

解决Vision Transformer在任意尺寸图像上微调的问题:使用timm库

解决Vision Transformer在任意尺寸图像上微调的问题:使用timm库 文章目录 一、ViT的微调问题的本质二、Positional Embedding如何处理1,绝对位置编码2,相对位置编码3,对位置编码进行插值 三、Patch Embedding Layer如何处理四、使…