Nginx部署前端项目

Nginx部署前端项目

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

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

shell 复制代码
nginx.exe
或
start nginx

3.然后在浏览器中输入localhost或127.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 小时前
Solid 前端响应式开发从零到精通
前端·人工智能
Lsetea2 小时前
curl指定CA目录仍报证书不受信任:--capath与OpenSSL rehash排查
运维·https·ssl·openssl·curl
动恰客流统计2 小时前
景区客流统计怎么做?兼顾管控与运营的实施方案解析
大数据·前端·人工智能
优化Henry3 小时前
LTE 载波频率与频点配置详解
运维·网络·学习·5g·信息与通信
程序员清风3 小时前
Docker、Nginx 与 Kubernetes 部署 AI 后端服务
nginx·docker·kubernetes
派小心.3 小时前
A/B测试工具免费版够用吗?
前端·数据分析
代码方舟3 小时前
数据科学风控实战:基于天远全能消金报告构建自动化信用评估网关
运维·人工智能·自动化
前端snow3 小时前
ai agent --- redis 缓存
前端
科力锐品牌君3 小时前
应用级灾备 | 海量非结构化数据如何实现高效数据保护
linux·运维·网络·安全·系统安全·数据安全·灾备
KaiwuDB3 小时前
KaiwuDB 运维实战04:DRBD + KaiwuDB——物联网场景下的低成本数据库高可用方案
运维·数据库·物联网·时序数据库·kaiwudb·aiot·多模数据库