前端项目本地部署Nginx，Nginx基本使用

前端项目本地部署Nginx，Nginx基本使用

末尾含有Nginx常见命令~

一、下载Nginx，了解Nginx

Nginx是什么？Nginx是一个轻量级/高性能的反向代理服务器，用于 HTTP、HTTPS、SMTP、POP3 和 IMAP 协议。他可以高效的实现单向代理、负载平衡多以处理上万个并发数，简单来说，它就是一台虚拟服务器，但是可以轻松实现很多功能

• Nginx有哪些优点
  • 跨平台、配置简单
  • 可以高效配置反向代理
  • 可以实现上万并发数，开源免费
    • Nginx应用场景

      1.可以实现反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用nginx做反向代理。并且可以平均分担负载，不会使某一台服务器造成资源请求过大的情况

      2.实现http服务器

      3.实现https服务器，配置相应证书即可

      4.实现虚拟主机

      5.配置请求头管理，可以增加header，比如允许跨域等,增加请求响应时间，增加post请求体的大小等

      第一步下载Nginx，Nginx官网点击下载所需版本，我下载的是稳定版本windows

      老规矩，下载完，进行压缩，我放在了D盘，可以看到会有一些配置文件

      conf是一些配置文件，html是项目打包静态文件，logs成功或报错相关日志(一般用来排查)

      双击nginx.exe即可启动成功，或者运行cmd输入start nginx，也可启动nginx

      • 测试Nginx是否启动成功

        打开conf目录下的nginx.conf文件

        可以看到listen(监听端口)，server_name(默认访问域名)

        接着，打开浏览器输入 http://localhost:8080并回车，出现Welcome to nginx代表访问成功，接下来就可以开始你自己的nginx项目配置启动了

        二、nginx配置文件怎么看

        相信打开nginx配置文件可以看到一些信息，小白的我刚打开属实懵逼，没事，慢慢网上查找，慢慢学，现在介绍一下基础的一些配置项

        刚开始是一些全局配置，不着急，接着往下

        下面是http模块，里面有server请求设置模块，可以在server模块写一些全局的配置，比如增加post请求体大小，增加相应时间等

        • 接下来是反向代理

          注意：

          proxy_pass后面跟的是空格

          写完一个配置项后面需要以分号；结尾

          修改完nginx.conf配置文件，需要重启更新配置文件生效nginx -s reload

          三、前端怎么通过nginx部署项目

          vue2打包项目 npm run buid 打包完后出现dist文件夹，把dist文件夹放置到nginx.conf里面的root路径下面，这样可以查找到静态资源，我这里新建了demo文件夹，放置到了这里

          放置好，根据vue.config.js文件配置相关的反向代理设置，配置好后，运行stsrt nginx，浏览器打开server —》listen 监听的端口即可进行访问，这样就能看到在本地部署的前端项目了

          四、Nginx常见基础命令

          //开启Nginxstart nginx //启动nginx//或者直接点击Nginx目录下的nginx.exe //重载配置文件nginx -s reload  //更改了配置需要重新加载//停止Nginx nginx停止命令stop与quit参数的区别在于stop是快速停止nginx，可能并不保存相关信息，quit是完整有序的停止nginx  ，并保存相关信息。nginx启动与停止命令的效果都可以通过Windows任务管理器中的进程选项卡观察。nginx -s stop  //快速停止Nginx服务nginx -s quit //优雅地停止Nginx服务，确保所有正在处理的请求都已完成//重启Nginx服务nginx -s reopen //重启Nginx服务//检查配置文件是否有语法操作./nginx -t

          让我们一起进步加油！我是到处乱跑的大米饭，一只笨笨的但是一直在慢慢前进的羊~