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内的内容复制并修改端口号和根目录:
相关推荐
灯火不休ᝰ1 小时前
[win7] win7系统的下载及在虚拟机中详细安装过程(附有下载文件)
linux·运维·服务器
Мартин.2 小时前
[Meachines] [Easy] Sea WonderCMS-XSS-RCE+System Monitor 命令注入
前端·xss
昨天;明天。今天。3 小时前
案例-表白墙简单实现
前端·javascript·css
数云界3 小时前
如何在 DAX 中计算多个周期的移动平均线
java·服务器·前端
风清扬_jd3 小时前
Chromium 如何定义一个chrome.settingsPrivate接口给前端调用c++
前端·c++·chrome
安冬的码畜日常3 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀:用函数式编程(FP)实现事件只触发一次
开发语言·前端·javascript·函数式编程·tdd·fp·jasmine
ChinaDragonDreamer3 小时前
Vite:为什么选 Vite
前端
小御姐@stella3 小时前
Vue 之组件插槽Slot用法(组件间通信一种方式)
前端·javascript·vue.js
GISer_Jing3 小时前
【React】增量传输与渲染
前端·javascript·面试
eHackyd3 小时前
前端知识汇总(持续更新)
前端