Nginx部署前端项目

Nginx部署前端项目

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

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

shell 复制代码
nginx.exe
或
start nginx

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

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

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

shell 复制代码
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内的内容复制并修改端口号和根目录:
相关推荐
子兮曰2 分钟前
Harness 驾驭工程深度教程:从 AGENTS.md 到全链路 AI 编码基础设施
前端·后端·ai编程
十年一梦实验室21 分钟前
【ChatGPT】阳极氧化线 Global SI 自动化系统深度拆解、爆炸图10张、信息图10张、C++代码框架
运维·自动化
木子雨廷27 分钟前
Flutter 桌面小组件开发
前端·flutter
还有多久拿退休金30 分钟前
我在自家页面嵌了个 iframe,结果对方说"你不配"——跨域和 CSP 的那些坑
前端·架构
Awu122731 分钟前
🍎Google Stitch :用自然语言做 UI 设计,把设计师的活也抢了
前端·aigc·ai编程
竹林81835 分钟前
从“连接不上”到“交易成功”:我用 @solana/web3.js 在 React 中搞定 Solana 钱包交互的全过程
前端
YouCanYouUp.1 小时前
掌控感心理学解析:人类最底层的心理需求
前端
wyc是xxs1 小时前
浏览器解析HTML头部的底层逻辑
前端·html
义嘉泰1 小时前
一颗 NAND Flash 的自我修养
前端·人工智能·芯片
Harm灬小海1 小时前
【云计算学习之路】学习Centos7系统-Linux下用户及组管理
linux·运维·服务器·学习·云计算