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

Nginx配置及部署前端项目,安排!

哈喽小伙伴们大家好!我是程序媛小李,一位正在往全栈方向发展的前端小姐姐,今天给大家分享一下在日常编码中我们是怎么使用nginx来部署前端项目的!

Nginx安装

浏览器输入nginx,来到官网

右边找到doewnload,在这里找到自己需要的版本,下载即可。

下载好之后解压一下,然后双击安装即可

安装好之后不需要额外的配置,直接双击.exe文件即可!

启动成功之后,浏览器输入localhost,如果能看到如下页面,说明我们的nginx服务是正常运行的。

接下来,我们讲一下部署的步骤

第一步,打开解压好的nginx目录,进入nginx这个文件夹下

将项目打包生成的dist文件夹放在这里

第二步,配置location

打开conf这个文件夹下的nginx.conf文件(这里如果你的目录跟我的不一样的话,建议把nginx卸载了重装一下)

server/location这里,按照自己的需求改一下就行,我这里改成了dist,因为我的静态文件在dist目录下。

location / {root   html;index  index.html index.htm;}

修改之后,重启nginx服务,在地址栏输入localhost,就可以看到项目运行的结果啦(为了验证效果可以暂停VScode本地的进程。

通过本文,大家可以看到使用nginx部署项目很简单,分分钟搞定!这也是nginx能够呗广泛用在web开发的原因之一!它有着很好的性能,轻量级,比较稳定,而且轻量级,还支持配置正向代理和反向代理。后面有机会给大家分享一下具体的应用场景和实战案例,尽情期待哦!

好啦!以上就是使用nginx上线前端项目的全部过程,希望对大家有所帮助。我是程序媛小李,一位正在往全栈方向发展的前端小姐姐,我们下期见!

相关文章:

  • Rce脚本自动化amp;批量
  • TDengine 签约青山钢铁,实现冶金全流程质量管控智能化
  • vue.js 原生js app端实现图片旋转、放大、缩小、拖拽
  • 服务器的地址如何伪装起来
  • PWM基础与信号控制
  • python 图像绘制问题: 使用turtle库绘制蟒蛇
  • RAG+Agent人工智能平台:RAGflow实现GraphRA知识库问答,打造极致多模态问答与AI编排流体验
  • 【Vue.js基础】
  • Maven笔记(一):基础使用【记录】
  • pyproject.toml文件相关
  • 【第二轮通知】第二届网络、通信与智能计算国际会议(NCIC 2024)
  • 三维扫描 | 解锁低成本、高效率的工作秘籍
  • 2024.9.26 作业 +思维导图
  • 【DP解密多重背包问题】:优化策略与实现
  • 零基础入门AI:一键本地运行各种开源大语言模型 - Ollama
  • httpie使用详解
  • laravel5.5 视图共享数据
  • maya建模与骨骼动画快速实现人工鱼
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • React的组件模式
  • Vue实战(四)登录/注册页的实现
  • Web Storage相关
  • 阿里研究院入选中国企业智库系统影响力榜
  • 大型网站性能监测、分析与优化常见问题QA
  • 关于Java中分层中遇到的一些问题
  • 今年的LC3大会没了?
  • 使用parted解决大于2T的磁盘分区
  • 微服务核心架构梳理
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • NLPIR智能语义技术让大数据挖掘更简单
  • ​LeetCode解法汇总2304. 网格中的最小路径代价
  • ​MySQL主从复制一致性检测
  • ​决定德拉瓦州地区版图的关键历史事件
  • ​如何使用QGIS制作三维建筑
  • # Redis 入门到精通(一)数据类型(4)
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (06)Hive——正则表达式
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (C)一些题4
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (附表设计)不是我吹!超级全面的权限系统设计方案面世了
  • (附源码)springboot 房产中介系统 毕业设计 312341
  • (过滤器)Filter和(监听器)listener
  • (三)docker:Dockerfile构建容器运行jar包
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • **PHP二维数组遍历时同时赋值
  • *1 计算机基础和操作系统基础及几大协议
  • .gitignore文件忽略的内容不生效问题解决
  • .NET 简介:跨平台、开源、高性能的开发平台
  • .NET设计模式(11):组合模式(Composite Pattern)
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • /etc/skel 目录作用
  • @angular/cli项目构建--Dynamic.Form