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内的内容复制并修改端口号和根目录:
相关推荐
Never_Satisfied4 分钟前
C#插值字符串中大括号表示方法
前端·c#
以太浮标7 分钟前
华为eNSP模拟器综合实验之- 路由表RIB和转发表FIB的关联解析
运维·网络·华为·信息与通信
optimistic_chen8 分钟前
【Docker入门】cgroups 资源控制
linux·运维·ubuntu·docker·容器·cgroup
LXY_BUAA10 分钟前
《嵌入式操作系统》_内核编译练习与配置文件讲解_20260119
linux·运维·服务器
踢球的打工仔36 分钟前
typescript-类
前端·javascript·typescript
天天打码1 小时前
Svelte-无虚拟DOM、极致性能的现代高性能Web开发框架!
前端·node.js·vue·svelte
0思必得01 小时前
[Web自动化] Selenium元素定位
前端·python·selenium·自动化·html
触想工业平板电脑一体机1 小时前
【触想智能】MES工位一体机在自动化生产线上的作用和市场应用前景分析
大数据·运维·自动化
芥子沫1 小时前
书签管理工具使用:Readeck-Docker部署和使用技巧
运维·docker·容器·书签管理
EEEzhenliang1 小时前
CSS知识概括、总结
前端·css