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内的内容复制并修改端口号和根目录:
相关推荐
IT_陈寒12 分钟前
Python装饰器竟然偷偷改了函数名?这个坑我爬了三天
前端·人工智能·后端
Elastic 中国社区官方博客35 分钟前
Elastic 在 Everest Group 企业搜索产品 PEAK Matrix® 评估 2026 中被评为领导者
大数据·运维·人工智能·elasticsearch·搜索引擎·ai·全文检索
程序员在囧途35 分钟前
likeadmin-api API 中转站怎么做统一报价?从 /pricing、/user/balance 到 task_id 回执的落地方法
运维·服务器·数据库·likeadmin-api·api中转站·token计费
Momo__1 小时前
Vite 8.1 打包开发模式——10000 组件冷启动 15 倍,"No Bundle Dev" 七年后被自己终结
前端·vue.js·vite
YHL1 小时前
🤖 Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·javascript·人工智能
Monki1 小时前
AI 规范式 UI 设计,一键批量出页,高效落地不翻车
前端
山河木马1 小时前
渲染管线-计算得到gl_FragColor(片元着色器)之后续GPU流程
前端·webgl·计算机图形学
不想说话的麋鹿1 小时前
「项目实战」我用 Codex + GPT-5.5 + Trellis "氛围编程",独立做了一个情侣厨房小程序
前端·agent·全栈
想你依然心痛2 小时前
Linux用户空间与内核空间通信:netlink、ioctl、mmap 零拷贝与性能对比
linux·运维·服务器
沉静的小伙2 小时前
在微服务中使用领域事件
java·运维·微服务