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

http://www.lryc.cn/news/238945.html

相关文章:

  • 根据文件类型进行下载, 文档/图片
  • 赋范线性空间3
  • XSLVGL2.0 User Manual 缩略图生成器(v2.0)
  • 练习八-利用有限状态机进行时序逻辑的设计
  • WebAssembly照亮了 Web端软件的未来
  • PDF文件无密码,如何解密?
  • 搜维尔科技:Movella Xsens MVN LINK 实际应用,一镜到底!
  • wsl安装ubuntu的问题点、处理及连接
  • Flutter在web项目中使用iframe
  • 阿里云高校计划学生和教师完成认证领取优惠权益
  • 劲松HPV防治诊疗中心提醒:做完HPV检查后,需留意这些事项!
  • InfoNCE Loss公式及源码理解
  • 经典双指针算法试题(二)
  • MySQL -- DQL
  • 高防CDN:保障网络安全的未来之路
  • 使用wxPython和PyMuPDF合并PDF文档并自动复制到剪贴板
  • Redis篇---第十四篇
  • python之文件操作
  • android实时投屏软件QtScrcpy
  • LeetCode - 622. 设计循环队列(C语言,顺序存储结构,配图)
  • 在 Qt 框架中,有许多内置的信号可用于不同的类和对象\triggered
  • springBoot中starter
  • Linux学习笔记-Ubuntu下使用Crontab设置定时任务
  • 动态规划求数组中相邻两数的最小差值( 即相差的绝对值 ) java 实现
  • webGL开发微信小游戏
  • leetcode面试经典150题——29 三数之和
  • 数据分析基础之《jupyter notebook工具》
  • Android Studio Error “Unsupported class file major version 61“---异常信息记录
  • javaScript 内存管理
  • Idea2023 Springboot web项目正常启动,页面展示404解决办法