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内的内容复制并修改端口号和根目录:
相关推荐
en.en..4 小时前
Linux 孤儿进程与僵尸进程
linux·运维·服务器
mldong7 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
一只积极向上的小咸鱼8 小时前
Codex Remote SSH / Dev Container 无限转圈与 GPT-6 可用问题排查总结
运维·gpt·ssh
2分钟速写快排8 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
智塑未来8 小时前
自动化立体库工业无线通信:AGV、AMR、RGV、穿梭车、无人叉车、堆垛机全覆盖
运维·自动化
passerby60618 小时前
如何自己造一个时间处理库
前端·javascript·github
SendTomo9 小时前
【技术交流】从0到1构建一个汉字学习平台:汉字吧(hanzi8.com)的技术架构猜想
redis·mysql·nginx·php·个人开发
走到天涯海角9 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!10 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
Elastic 中国社区官方博客10 小时前
教程:使用 ES|QL 进行威胁狩猎
大数据·运维·数据库·elasticsearch·搜索引擎·全文检索·安全威胁分析