nginx在前端部署中的常见配置

雪饼儿
160 阅读3分钟

ngixn定义：

百度百科给出的定义是： 一个高性能的HTTP和反向代理web服务器。

我的大白话理解就是：它帮助我们在一台服务器上部署前端静态资源同时可以进行反向代理配置。工作中经常会使用它来部署一个测试环境。

nginx的安装

1、服务器安装（Linux）

首先上传你的安装包上传至服务器。 上传命令：（cmd执行）
scp -r 文件目录 用户名@服务器ip:安装包存放的地址

  1. 进入到安装目录解压安装包：tar -zxvf xxxx.tar.gz -C 安装目录
  2. 安装nginx需要的依赖：gcc,PCRE,zlib,OpenSSL
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
  1. 创建nginx目录：进入到解压安装包的文件目录进行安装（注意：写到一行报错得话就采用下面的形式）
./configure\
--prefix=创建nginx目录
  1. 进行编译make
  2. 编译安装make install
  3. 进入安装目录 查看ls显示对应文件即为成功 .
    待补充

2、本地安装

工作中我也遇到过需要在本地电脑安装一个nginx进行环境部署前的调试等工作；以下是安装步骤：

1、下载解压：ngixn下载地址 本地就选windows版本。 下载解压至指定地址例如：

image.png 2、进入文件夹，启动nginx： （cmd）执行：start nginx nginx配置中有个默认端口：80端口。在浏览器中输入localhost:80,见到如下页面即为启动成功。 image.png

nginx配置文件

1、配置文件位置：D:\nginx\nginx-1.22.1\conf\nginx.conf

image.png

2、编辑配置文件：

1、在Linux系统中编辑文件要用vi编辑器。（需要掌握的语法不多如下：）
进入文件：vi xxx文件路径
插入模式：i
命令模式：ESC
保存退出：:wq
掌握以上命令即可编辑nginx的配置文件。更多语法自行学习。
2、windows：记事本打开即可。

3、基本配置：

打开一个配置文件，里面的内容有很多，但是作为一个前端来说，只要掌握server的部分就足够来部署一套前端的测试环境了。一个的前端环境对应一个server配置。下面是配置文件中给出的例子。

image.png

1、listen：监听的端口

意思就是把前端静态资源部署到哪一个端口上面。上述例子就是部署到server_name的8000端口。

2、server_name：服务器名称

配置虚拟机的域名，可以使用多个，用空格分隔。若没有配置默认是localhost

3、location：配置请求的路径

意思是对于不同的url来匹配不同的操作。例如前端静态资源的路径，就进行一个资源查找匹配操作。对于静态资源中使用到的数据请求就进行一个反向代理的操作。部署前端环境也就涉及到这两个操作。
请求路径的匹配方式支持正则表达。

（1）前端资源路径配置
  1. root:设置指定目录的上级目录
  2. alias：配置指定指定目录
  3. index：定义默认页面。可以使用多个值，自左向右匹配
  4. try_files:按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理，如果都没有匹配到，则请求最后一个参数给定的uri
（2）后端接口配置
  1. proxy_pass：将请求转发给后端服务器
  2. proxy_set_header:允许重新定义或添加发往后端服务器的请求头
    • X-ReaL-Ip:用户真实ip。$remote_addr：客户端ip
    • X-Forward-For：$proxy_add_x-forwarded_for。相当于$remote_addr用来防止客户端伪造ip的

详细的配置项作用在下篇笔记记录。

nginx基础命令

  1. 服务器上进入nginx下的sbin文件下 执行./nginx
  2. 重启./nginx -s reload
  3. 停止./nginx -s stop
avatar
文章
阅读
粉丝