记录nginx学习

nginx是一个HTTP网络服务器，反向代理，内容缓存，负载均衡器，TCP/UDP代理服务器和邮件代理服务器。

对于我们前端码农来说，了解到它能作为HTTP服务器，能配置前端项目就可以了。

下载 nginx ，推荐稳定版本1.26.3，安装到一个自己喜欢的目录

nginx.org/en/download...

我们先来了解一下基础命令和基础配置

nginx 基础命令

启动

找到 nginx 安装目录，打开命令行工具 cmd 或者 powershell

powershell 复制代码

start nginx

重新加载配置文件

在更改 .conf 配置文件后，需要重新加载才可以生效

powershell 复制代码

nginx -s reload

强制阻断服务

arduino 复制代码

nginx -s stop

相比于强制阻断，nginx 提供了一个命令，可以等待当前请求完成之后再关闭服务

nginx -s quit

基础配置

首先我们认识一下nginx的配置文件，先找到nginx所在目录，打开 conf 目录下nginx.conf 文件

我把一些目前用不到的注释去掉了，留下来了一些关键配置，主要用到的是http模块，在这里我们可以配置服务端口号，静态文件、负载均衡、处理容灾

nginx 复制代码

#user  nobody;
worker_processes  1; 
events {
    worker_connections  1024;
}

http {
    include       mime.types; #允许访问的文件类型，对应请求中允许的content type
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

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

对nginx基础配置有所了解后，下面我会以场景为切入点，一步步配置nginx

如何将Vue或React项目部署到nginx，能访问到页面？

找到项目打包文件地址，一般是dist文件目录下，可以看到有一个index.html，主要是将这个文件配置到nginx中

截取了关键部分，看到server模块，listen是代表监听端口，默认端口为80

nginx 复制代码

server {
    listen       9666; # 默认端口号为80
    server_name  localhost;#主机名

    location / {
        root   E:\yu\doris\packages\admin\dist; #打包文件所在目录,在这改为自己项目打包后的文件路径
        index  index.html index.htm; #打包入口文件，一般是index.html
    }
}

简单配置号server之后，就可以启动nginx看一下了

这里可以看到访问 localhost:9666 能够看到页面了，但是页面数据没有显示，这是因为我们还没配置后端，之后会慢慢补充