我的编程空间,编程开发者的网络收藏夹
学习永远不晚

手把手教小白如何在Window系统下搭建Nginx服务器环境并部署前端项目

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

手把手教小白如何在Window系统下搭建Nginx服务器环境并部署前端项目

一、认识Nginx

这里日后补充…

二、Nginx环境搭建

1.下载并安装Nginx

在nginx官网http://nginx.org/en/download.html
下载稳定版至自己想要的目录下。
在这里插入图片描述
然后解压文件(没有exe的安装过程),下在解压后进入其目录如下:
在这里插入图片描述
(注意:安装目录最好不要有中文,否则启动时容易报错)

2.启动nginx服务器

启动方式有两种:
(1)直接进入nginx安装目录下,双击nginx.exe运行,此时命令行窗口一闪而过,就已经启动成功了。(并非是启动失败,因为它不像tomcat服务器启动后,窗口常驻的状态)
(2)打开cmd窗口,cd 到nginx安装目录下,运行以下命令。(启动成功和第一种方式一样)

输入nginx.exe或者输入(建议使用第二个)start nginx

启动成功后打开浏览器访问http://localhost:80,或者是http://127.0.0.1,亦或者是http://localhost。(注意端口号不是8080,其默认端口号是80,和浏览器http协议默认端口号一样都是80,所以可以不输入端口号),启动成功访问如下图:
在这里插入图片描述

3.关闭nginx服务器

关闭nginx服务器命令如下,先进入nginx安装的根目录,然后输入命令

//第一种nginx -s stop   (快速关闭服务器,可能导致修改文件没保存的情况)//第二种nginx -s quit   (完整有序的关闭服务器)//第三种taskkill /f /t /im nginx.exe   (通过taskkill杀进程,如下图)

在这里插入图片描述

4.nginx服务器配置文件nginx.conf

  1. nginx的配置文件是conf目录下的nginx.conf
  2. nginx默认的端口为80,如果80端口被占用可以在listen下修改成未被占用的端口
  3. nginx的默认端口号与浏览器http协议默认端口号一样都是80,所以可以不输入端口号访问部署的项目
  4. 当修改了nginx的配置文件nginx.conf 时,不需要关闭nginx后重新启动nginx,只需要执行命令 nginx -s reload 即可让改动生效
  5. nginx.conf 文件下的root后面跟的是部署项目的路径默认为html文件夹(根目录下自带的demo),如下图
    在这里插入图片描述

5.nginx常用命令

运行任何的nginx命令,都得先进入nginx安装得跟目录,否则无效!

// 常用得nginx命令如下nginx -s reopen #重启Nginxnginx -s reload #重新加载Nginx配置文件,然后以优雅的方式重启Nginxnginx -s stop #强制停止Nginx服务nginx -s quit #优雅地停止Nginx服务(即处理完所有请求后再停止服务)nginx -t #检测配置文件是否有语法错误,然后退出nginx -?,-h #打开帮助信息nginx -v #显示版本信息并退出nginx -V #显示版本和配置选项信息,然后退出nginx -t #检测配置文件是否有语法错误,然后退出nginx -T #检测配置文件是否有语法错误,转储并退出nginx -q #在检测配置文件期间屏蔽非错误信息nginx -p prefix #设置前缀路径(默认是:/usr/share/nginx/)nginx -c filename #设置配置文件(默认是:/etc/nginx/nginx.conf)nginx -g directives #设置配置文件外的全局指令killall nginx #杀死所有nginx进程

三、部署前端项目到Nginx服务器

(1)通过 npm run build 来打包构建你的前端项目(打包完成后生成dist文件夹,这个就是我们要部署到nginx服务器得资源)
在这里插入图片描述
这里以我的项目为例,复制其地址
F:\qianduanxuexi\myvuedemo\dist
(2)修改nginx.conf配置文件(这一步可参考上面得二、4.章节)
具体做法是找到location下的root这一行,把其默认得html改成上面复制得要部署得前端项目路径。
在这里插入图片描述
注意以下两点:
第一,你也可以选择把你的前端项目复制到nginx得根目录下,修改成其路径即可(nginx.conf默认配置就是这样,所以在其根目录下有个html文件夹,他就是要部署得项目。tomcat服务器默认配置也是这样)但是你也可以不把项目复制过来,只要在nginx.conf文件修改成你的项目路径即可。
第二,修改nginx.conf文件得时候,记得找到在没有"#“号得行里修改,否则是无效得,因为”#"代表得是已经注释掉得代码,不生效的。
(3)启动nginx服务器
(4)在浏览器输入http://127.0.0.1/或者http://localhost/即可访问你的应用。
在这里插入图片描述

总结

总体而言,在Windows系统下安装部署Nginx服务器还是比较简单的,其主要过程为:
下载 => 解压=>启动=> 访问启动情况=> 部署文件(修改配置文件)=> 访问效果 => OK!

下次有空再继续更新如何在Linux系统或Docker环境下部署Nginx服务器。

来源地址:https://blog.csdn.net/weixin_43426379/article/details/129391066

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

手把手教小白如何在Window系统下搭建Nginx服务器环境并部署前端项目

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

手把手教小白如何在Window系统下搭建Nginx服务器环境并部署前端项目

一、认识Nginx 这里日后补充… 二、Nginx环境搭建 1.下载并安装Nginx 在nginx官网http://nginx.org/en/download.html 下载稳定版至自己想要的目录下。 然后解压文件(没有exe的安装过程)
2023-08-21

编程热搜

目录