阿里云服务器安装nginx，以及相关配置

最近打算完成一个springboot+vue的前后端项目，随便写一些博客，算是对过程的记录，另一个方面也是方便自己以后修改配置什么的。

环境

阿里云的ESC服务器，操作系统为ubuntu20.04

安装nginx

安装nginx的方式有很多种，一种是通过下载官方的包，然后手动上传到服务器，然后再进行配置，还有就是通过ubuntu操作系统的apt install全装，我们这里采用第一种方式。

下载nginx

选择稳定版的nginx-1.24.0，下载完成后上传至服务器。

解压并安装

找到nginx压缩包，执行命令

tar -xzvf  nginx-1.24.0.tar.gz
ls

可以发现当前目录下多了nginx的文件夹
进入目录，里面绿色的configure是可执行文件，一次执行以下三条命令nginx就算是安装完成了

./configure
make
make install

我们可以通过whereis查看nginx的位置

whereis nginx

进入/usr/local目录找到nginx，然后就可以运行nginx

进入sbin目录之后执行命令

./nginx

成功运行！
我们也可以通过

ps -aux | grep nginx

查看nginx的运行状态
由于我们是通过压缩包安装的，所以systemctl是无法查看nginx的运行状态的，包括运行，重新加载配置等，也需要进入这个目录。

nginx简单配置

nginx的配置文件在**/usr/local/nginx/conf/nginx.conf**建议在修改前先备份配置文件

cd /usr/local/nginx/conf
vim nginx.conf

配置需要分发的页面

找到http大模块的server模块下的location，locaion下的root即为分发文件的根目录
最开始应该是html而不是dist，html是conf的同级目录，所以如果使用相对目录的话要以conf为基础，当然也可以使用绝对目录，不过把把根目录改到外面会出现访问权限不足的问题，为了偷懒，我就直接在conf同级创建了dist目录，用于存放带分发的页面。
index配置的是默认分发的文件，如果直接访问ip的话，得到的就是index后面的页面。可以自行修改，不过建议不改。

单文件应用的url访问问题

当我们使用webpack或者vite打包vue单文件应用的时候，我们会发现打包之后的dist目录中只有index.html，这就意味着nginx能够分发的只有入口页面，如果你想用url去访问vue-router里配置的页面，那你大概率会得到404 not found。如果你确实想要其它的路径也是有效的，只需要仿造上图加上下面的代码就可以了。

try_files $uri $uri/ /index.html;

反向代理问题

nginx配置反向代理实际上是为了解决跨域问题，关于这个，可以看看下面的文章
一文搞懂跨域的所有问题，生活从此669~
总的来说，跨域是为了安全考虑而设置的限制，其关键在于浏览器会拒绝不是分发页面的服务器的数据，而在前后端分离的情况下，我们同时拥有两个服务器，前端的服务器只负责分发前端的页面，后端的服务器负责数据的存取，天然跟跨域矛盾。
解决这个问题最方便的方法还是反向代理，简单来说我们不再向后端的服务器请求数据，而是仍向前端服务器请求数据，然后由前端的服务器转发我们的请求，得到数据后，再转发给我们。

为了区分页面和后端的接口，我们给接口路径前加上api，

如果前端监听端口5173，后端监听接口5555，
原来你要访问http://127.0.0.1:5555/hello
现在你就需要访问http://127.0.0.1:5173/api/hello

前端的nginx服务器接收到请求之后因为/api的匹配度更高，就会转发请求到http://127.0.0.1:5555/api/hello为了不影响后端的接口，我们需要在转发之前去掉 /api 也就是上面的rewrite所做的事情，现在我们就可以正常的进行前后端通信了。