本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

没接触过的东西也都觉得很难，但是真正去使用会发现很简单，nginx就是这样的东西，很多人还不知道nginx如何反向代理请求，于是写一篇记录，顺便也当给自己做个内容归纳笔记。

包括nginx的配置文件介绍、nginx的常用命令、nginx解决跨域的详细步骤、还有alias与root代理的区别注意事项，读完就基本能使用nginx进行项目开发了。

nginx下载

nginx用来处理请求，作为服务器代理，那么肯定得放在服务器上，比如自己租来的云服务器。
在宝塔linux上可以直接下载比较方便，推荐，如果没用宝塔，可以自己在linux上配置：linux 如何安装nginx。

nginx目录

宝塔安装的大概是这样的目录，当然自己配置也没差多少，都有几个重要的目录。

sbin，这里是nginx的启动文件所在目录，我们执行nginx启动命令必须得进入该文件夹，所以我的建议是配置环境变量，让它在什么位置都可以执行，如何配置环境变量呢：linux 如何安装nginx的配置环境变量小节。
html，这是默认的静态文件夹，里面一般会有一个index.html入口页和一个50x.html错误页，nginx默认配置会将80端口代理到这里，也就是你访问你服务器的80端口http://xxx.xx.xxx.xx:80(默认端口80可以不写)/会进入这里的index.html页面，你可以用自己写的html覆盖它。
conf也就是我们的配置nginx的目录，默认配置文件是里面的nginx.conf。

nginx.conf

默认的把默认配置注释掉的部分删除大概长这个摸样，我就重点说一下server里面是如何代理主页的部分。

listen代表监听的端口，这里是80。
server_name服务名无所谓自己定义。
下面location就是要代理的路径，/路径什么意思？就是你访问http://xxx.xx.xxx.xx:80(默认端口80可以不写)/后面那个/，代理静态文件用root，这里的root告诉你80端口的/会被代理到html文件夹，入口文件就是index.html或者index.htm。

在这里插入图片描述

nginx常用命令

我们修改了nginx.conf配置，就得重新启动nginx，否则不会生效。
```
nginx -s reload
```
使用别的文件作为配置文件，也可以通过这种方式启动nginx。
```
nginx -c /路径/other.conf
```
关闭nginx服务
```
nginx -s stop
```

nginx解决跨域

怎么产生跨域的

首先我们要知道我们项目部署如何产生跨域的。
我们假设前端用react编写一个项目，打包好之后会生成一个dist文件夹，里面有入口index.html。后端我们用nodejs写了一个在3000端口上的提供接口的服务器。
在这个index.html有我们写的请求数据的代码，比如getName请求名http://xxx.xx.xxx.xx:3000/getName。
当我们把index.html文件部署在服务器80端口时，你这个http://xxx.xx.xxx.xx:3000/getName请求就是在http://xxx.xx.xxx.xx:80上发送的，端口不一致，满足跨域问题条件，这就是产生跨域问题了。

怎么解决跨域

首先我们要想一个代理的服务名，比如大家都常用的/api，那我们直接把原来前端代码请求的http://xxx.xx.xxx.xx:3000/getName全部给它改成/api/getName。
因为index.html代理到了80端口，也就是你现在的服务/api/getName是在http://xxx.xx.xxx.xx:80发出的，也就是http://xxx.xx.xxx.xx:80/api/getName。
还记得我们的nginx在监听80端口上的服务吗？能代理/那/api自然也可以代理。

我们就把/api代理去http://xxx.xx.xxx.xx:3000。

     location /api {
         proxy_pass   http://localhost:3000;
     }

但是上方的代理存在一些问题，也就是虽然代理成功了，但是变成了http://xxx.xx.xxx.xx:3000/api/getName，这个/api是我们临时使用的，它存在服务上我们还是无法正确请求到。
你可以将你http://localhost:3000上的对应请求前面也加上/api（这也是一种常见解决方案）。

你也可以选择在代理proxy_pass后面加上/

     location /api/ {
         proxy_pass   http://localhost:3000/;
     }

为什么改成这样就可以去掉/api?不急，我写了对应的文章：nginx proxy_pass路径后带/与不带/的区别

代理路径alias与root

有时候我们不想要一个项目直接放在80端口的/请求上，这样我们的服务器不能做更多的事，我们代理的时候可以选择alias和root，其实没什么区别就是怕不区分明白会乱掉，觉得哪个好用就只用一个就好了。

用alias

因为我们不想使用/，因此我们要添加一个服务名，比如把我们的/请求换成/home。
alias表示遇到/home请求我们就去alias后面的内容也就是html文件夹找内容，
```
    location /home {
        alias html;
        index index.html index.htm;
    }
```

用root

把alias换成了root，就是我们要在html中创建home文件夹，把静态入口放入，其他都一致。
root表示遇到/home请求我们就去root后面的内容+location后面的内容去html/home文件夹找内容，
```
    location /home {
        root html;
        index index.html index.htm;
    }
```

注意

代理路径很容易出现一个问题，就是静态资源访问不到了，包括js、css、图片等，因为路径的问题，例如react打包的dist项目，静态文件是以/绝对路径的形式访问，我们需要单独给它们添加代理。
下面以index.html、js文件、css文件为例。

比如你要把它们都放在html文件夹，那就用alias。

     location /test{
         alias html;
         index index.html;
     }

     location ~ .*\.(js|css)?$ {
         root html;
     }

又比如你要把它们都放在html中的test文件夹，那就用root。

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

     location ~ .*\.(js|css)?$ {
         root html/test;
     }

当你使用一些脚手架打包dist后，生成的部署文件css和js，如果index.html将被代理路径，你可能得根据对应的路径修改base和publicPath，这样就可以在一个端口下用多个路径部署多个项目。

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

nginx 入门攻略（一篇掌握nginx基本使用方法）

前言