当前位置: 首页 > news >正文

前端通过nginx部署一个本地服务的方法

前端通过nginx部署一个本地服务的方法:

1.下载ngnix

nginx
下载完成后解压缩后运行nginx.exe文件

2.打包你的前端项目文件

yarn build 

把生成的dist文件复制出来,替换到nginx的html文件下
在这里插入图片描述

3.配置conf目录的nginx.conf文件

主要配置server监听

    server {listen       8088;server_name  localhost;location / {root  D:\\nginx-1.26.2\\nginx-1.26.2\\html;try_files $uri $uri/ @router;index  index.html index.htm;}# 处理前端路由的 named locationlocation @router {# 这里通常指向你的前端入口文件,例如 index.html# 也可以在这里进行更复杂的反向代理设置rewrite ^/(.*)$ /index.html last;}location = /favicon.ico {log_not_found off;access_log off;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

root D:\nginx-1.26.2\nginx-1.26.2\html;配置静态文件的目录,
正常是单斜杠,如果报错就试试双斜杠
try_files $uri $uri/ @router; location @router 是为了避免刷新报错

4.运行nginx服务

运行cmd 运行到nginx服务的目录下,运行服务

cd xxxx/nginx-1.26.2
nginx -t 
nginx -s reload //重新运行

以上配置完成后打开localhost:8088就可以打开前端项目了。


http://www.mrgr.cn/news/63600.html

相关文章:

  • int类型的长度为什么不统一?int类型和硬件寄存器有多统一?数据类型长度是编译器决定的?
  • Python Requests 的高级使用技巧:应对复杂 HTTP 请求场景
  • Java集合使用注意事项总结
  • Launcher3 去掉桌面搜索索框
  • ubuntu基于docker-compose部署mysql5.7和mysql8.0
  • 鸿蒙系统崛起:开发者如何抓住机遇与挑战
  • 【机器学习】22. 聚类cluster - K-means
  • 电阻的颜色有什么含义
  • OpenCv —— 为opencv支持中文,将freetype2库编译进opencv中(附详细编译流程、测试代码)
  • 【表格解决问题】EXCEL行数过多,WPS如何按逐行分别打印多个纸张中
  • JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
  • 新浪新闻探索大会|赵世奇:文心智能体解锁AI浪潮中的商业新范式
  • 【C++】位图详解(一文彻底搞懂位图的使用方法与底层原理)
  • MySQL上RDS MySQL
  • 【天线&化学】遥感图油罐检测系统源码&数据集全套:改进yolo11-RCSOSA
  • 最清晰的微信小程序uni-app+vue3部署echarts图表的方法
  • kotlin 协程方法总结
  • 性能测试:性能测试流程与方法
  • java如何在不同的业务场景下使用最适合的Map接口使得代码效率达到最大化?
  • 基于LangChain手工测试用例生成工具
  • CSS3新增长度单位(二)
  • (六)Python结构数据类型
  • 一文读懂Zypher Research服务器抽象叙事,2024末段的热点
  • 20241101编译Rockchip原厂的RK3566平台的Buildroot【使用荣品的DTS】
  • 12月长沙EI会议征稿,你不能错过的传感和测量盛会
  • ERROR: btree index is not supported for ustore, please use ubtree instead