手把手教你10分钟在树莓派安装Nginx并部署页面乛ᴗ乛

核心思想：部署页面乛ᴗ乛

FIRST 在树莓派上安装Nginx

1.为什么要装Nginx？

我们不是要部署页面么？那么问题来了，为啥要用Nginx，或者说，Nginx能干啥？

nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server。
nginx [engine x] 是一个 HTTP 和反向代理服务器、一个邮件代理服务器和一个通用的 TCP/UDP 代理服务器。 ---摘自nginx官网

现阶段我们经常用到反向代理。

那么问题又来了，反向代理是个啥？

proxy 反向代理工具：
随着开发越来越偏向的前后端分离，我们在开发中不可避免地会碰到跨域的问题。proxy 就可以完美解决反向代理的问题，作为 webpack-dev-server 的主打功能之一， proxy 可以帮助我们代理到任何服务器，解决开发中碰到的跨域问题。 ---摘自antd-pro新手须知部分

tips：注意这里的proxy反向代理工具只能解决“开发者环境”中遇到的跨域问题，将项目打包后部署时的跨域问题并没有解决-----使用Nginx解决乛ᴗ乛

那么问题又来了，跨域问题是什么？怎么产生的？

跨域的起源是浏览器同源策略的限制。浏览器为了安全，会限制不同源（两个协议名，域名，端口号都相同的url才是同源）之间的DOM，数据，网络操作。

说得那么复杂，简单一点

Nginx相当于一个跳板机，客户端的域名也是Nginx的域名。所以客户端首先访问Nginx服务器，然后Nginx又把请求转发给服务器。当响应返回的时候又返回给客户端。

其中反向代理最重要的部分便是：匹配+转发

oK,预备知识准备地差不多了，下面开始安装吧
实践会让你记住你原本记不住的东西乛ᴗ乛

1 安装Nginx

安装Nginx之前，先安装一些依赖
详情请见Nginx在linux上安装之前的准备工作
（1）安装gcc g++的依赖库

sudo apt-get install build-essential
sudo apt-get install libtool

（2）安装pcre依赖库

sudo apt-get update
sudo apt-get install libpcre3 libpcre3-dev

（3）安装zlib依赖库

apt-get install zlib1g-dev

(4)安装ssl依赖库

apt-get install openssl

(5)安装Nginx

sudo apt-get install nginx

安装完成之后，在浏览器输入服务器的IP地址，出现以下画面说明Nginx安装成功

Second 部署页面

安装完成之后了解下nginx的安装位置（每个版本都可能存在差异)

whereis nginx

其中/usr/sbin/nginx 为执行指令所在位置;
/etc/nginx 为nginx配置文件所在位置;
(1)如何部署页面
进入/etc/nginx 文件夹，我们重点关注sites-available和sites-enabled
翻译过来就是【可以启用的站点】和【已经启用的站点】

使用FTP工具登录到服务器之后可以看到 sites-enabled 下面默认有一个default,但是上面有一个类似快捷方式的图标，实际上这是一个软链接，链接的文件在 sites-available中

tips：当我们更改sites-available中的default文件后，会发现sites-enabled中的default文件也同步改变了

我们可以直接修改【sites-available】的default 来设置第一个站点,如下就是default 的设置使用vim指令打开的情况（如果不熟悉vim指令可以通过FTP工具把这个文件下载下来修改之后再上传）

其中：

1.listen 9999：表示监听9999端口

2.root /var/www/html/bigDataweb :表示站点的目录放在/var/www/html/bigDataweb文件夹下面

但是，现在只是部署了页面，还没有设置反向代理

在没有设置反向代理的情况下，你能看到页面，但是发送的请求会报错乛ᴗ乛

基本配置：

server {
        listen       80;    #监听端口
        server_name  192.168.4.32;   #监听地址
        
        root /home/ubuntu/tennis_match_backstage/dist;  #/html目录
        index index.html;      #设置默认页       
        
        location  ~ /example1/ {  
           proxy_pass http://127.0.0.1:5000;     #请求转向      
        } 
    }

location指令说明：
~ : 表示uri包含正则表达式，且区分大小写。
~* : 表示uri包含正则表达式，且不区分大小写。
= : 表示uri不含正则表达式，要求严格匹配。

特别注意

nginx如何配置代理转发

🆗，在了解Nginx的匹配转发机制后，那么问题来了，哪些要转发？哪些不转发？怎么标识？

一般来讲，要转发的都是发送请求的url，因为发送请求才会出现跨域问题，出现跨域问题才会使用反向代理，要需要使用反向代理才会使用Nginx😀

tips：其实这才是正确的逻辑顺序（发现问题👉解决问题）

那么，页面url和请求url怎么区分呢？
不同的项目，不同的团队可能有截然不同的方法，大多会选择加一个字段来标识，正好用来给Nginx匹配

设置完成后，即可使用指令启动服务

sudo /usr/sbin/nginx -t //检查配置是否正确

sudo /usr/sbin/nginx  //启动服务

sudo /usr/sbin/nginx -s reload //重新载入配置

其中，运行指令sudo /usr/sbin/nginx时，可能会报错（Address is in use或者 cant bind）：
解决方案：

netstat -aptn # 查看端口使用情况

tips：如果没有安装netstat需要先安装netstat，更多详细请自行查阅

sudo apt install netstat

查看端口使用情况，更换配置中所使用的端口

部署完成后，访问配置中的ip地址就能看到部署的页面咯乛ᴗ乛