文章目录

  • 一 Nginx 相关介绍
  • 二 安装
  • 1、下载
  • 2、启动
  • 3、查看
  • 4、启动成功的标志
  • 5、关闭nginx
  • 三 配置


一 Nginx 相关介绍

Nginx是什么？Nginx介绍及Nginx的优点

nginx： 一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；也是一个 IMAP/POP3/SMTP 代理服务器。在高连接并发的情况下，Nginx是Apache服务器不错的替代品。基于REST架构风格，以统一资源描述符(Uniform Resources Identifier)URI或者统一资源定位符(Uniform Resources Locator)URL作为沟通依据，通过HTTP协议提供各种网络服务。

二 安装

1、下载

打开官网，如下，然后直接下载（我这里下载的是稳定版本）、解压缩

nginx最新版安装教程 nginx安装与使用_nginx最新版安装教程

2、启动

  • 解压缩后如下，启动有两种方式
  • 直接双击.exe文件启动，有黑框一闪而过即启动成功。它默认打开的是80的端口
  • 在nginx解压目录下打开cmd命令窗口，输入 start nginx 或 nginx.exe ，直接回车

    打开后页面如下：

3、查看

打开解压缩后的html文件夹，它是一个根目录文件夹。其实上面浏览器访问的就是该文件夹下面的index.html文件（index.html省略没写），也可以访问50x.html文件，如下（它本身是一个错误页面）

nginx最新版安装教程 nginx安装与使用_nginx_02


nginx最新版安装教程 nginx安装与使用_nginx最新版安装教程_03

4、启动成功的标志

在cmd窗口输入tasklist /fi "imagename eq nginx.exe"，如下则启动成功

nginx最新版安装教程 nginx安装与使用_Windows下_04

5、关闭nginx

  • 方法一：在cmd命令行中输入nginx -s stop，快速关闭nginx；或输入nginx -s quit，完整有序的停止nginx
  • 方法二：在cmd命令行中输入 taskkill /f /t /im nginx.exe

    • nginx最新版安装教程 nginx安装与使用_Nginx安装_05


三 配置

1、打开conf文件夹下面的nginx.conf文件，注意它默认配置的nginx监听的端口为80，查看80端口是否被占用的命令是netstat -ano | findstr 0.0.0.0:80或 netstat -ano | findstr "80"

nginx最新版安装教程 nginx安装与使用_nginx_06


nginx最新版安装教程 nginx安装与使用_Nginx安装_07


当修改了配置文件后，直接在cmd窗口执行nginx -s reload即可让之前配置的内容生效

2、在html中新建文件夹my-miaomiao，（注：我的项目文件夹名称为my-miaomiao）将之前自己打包好的项目dist文件夹里面的内容拷贝过来

nginx最新版安装教程 nginx安装与使用_Windows下_08


3、反向代理配置：还是在nginx.conf文件中配置

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

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location /li-miaomiao111/{
            root html;
            index index.html index.htm;

        }

        location /api/ {   //代理的是api
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://localhost:3000/api/;
            proxy_redirect off;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
        }

nginx最新版安装教程 nginx安装与使用_Nginx安装_09


此时直接在浏览器网址输入http://localhost/my-miaomiao/然后回车就能看到自己的项目内容了，如下：

nginx最新版安装教程 nginx安装与使用_Windows下_10


当点击项目的内容时，会出现404错误，原因如下：

nginx最新版安装教程 nginx安装与使用_Windows下_11


在nginx中的配置文件下做以下配置即可：

location / {
  try_files $uri $uri/ /index.html;
}

nginx最新版安装教程 nginx安装与使用_Windows下_12


总结：直接下载nginx压缩包、解压、与自己项目相关内容的配置、将打包项目放到nginx下的html的新建文件夹下、启动nginx、打开浏览器即可！