nginx简介与安装及简单使用

一 Nginx 相关介绍

Nginx 相关介绍(Nginx是什么?能干嘛?
Nginx是什么?Nginx介绍及Nginx的优点

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

二 安装

1、下载

打开官网,如下,然后直接下载(我这里下载的是稳定版本)、解压缩
在这里插入图片描述

2、启动

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

3、查看

打开解压缩后的html文件夹,它是一个根目录文件夹。其实上面浏览器访问的就是该文件夹下面的index.html文件(index.html省略没写),也可以访问50x.html文件,如下(它本身是一个错误页面)
在这里插入图片描述
在这里插入图片描述

4、启动成功的标志

在cmd窗口输入tasklist /fi "imagename eq nginx.exe",如下则启动成功
在这里插入图片描述

5、关闭nginx

  • 方法一:在cmd命令行中输入nginx -s stop,快速关闭nginx;或输入nginx -s quit,完整有序的停止nginx
  • 方法二:在cmd命令行中输入 taskkill /f /t /im nginx.exe
    在这里插入图片描述

三 配置

1、打开conf文件夹下面的nginx.conf文件,注意它默认配置的nginx监听的端口为80,查看80端口是否被占用的命令是netstat -ano | findstr 0.0.0.0:80netstat -ano | findstr "80"
在这里插入图片描述
在这里插入图片描述
当修改了配置文件后,直接在cmd窗口执行nginx -s reload即可让之前配置的内容生效
2、在html中新建文件夹my-miaomiao,(注:我的项目文件夹名称为my-miaomiao)将之前自己打包好的项目dist文件夹里面的内容拷贝过来
在这里插入图片描述
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;
        }

在这里插入图片描述
此时直接在浏览器网址输入http://localhost/my-miaomiao/然后回车就能看到自己的项目内容了,如下:
在这里插入图片描述
当点击项目的内容时,会出现404错误,原因如下:
在这里插入图片描述
在nginx中的配置文件下做以下配置即可:

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

在这里插入图片描述
总结:直接下载nginx压缩包、解压、与自己项目相关内容的配置、将打包项目放到nginx下的html的新建文件夹下、启动nginx、打开浏览器即可!

多看官方文档,还是很有好处的!!!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值