前端部署Nginx远程服务器

一、部署Nginx步骤

第一步: 连接服务器

如果你是Mac本没有连接服务器的经验那你可以去看看Mac连接远程服务器这片文章。

第二步：下载Nginx

下载Nginx有如下两种方法（本文下载的是 nginx-1.16.1.tar.gz）：
1、本地下载
去nginx download官网下载稳定版的nginx，上传到服务器的某个位置（这里的位置是 /home/admin/nginx ）解压。
2、服务器上用命令下载
在服务器 /home/admin/ 目录下新建一个 nginx 文件夹（mkdir nginx），进入文件夹，打开命令行输入如下命令：

wget http://nginx.org/download/nginx-1.16.1.tar.gz 

查看当前目录就会看到 nginx-1.16.1.tar.gz ，这就说明压缩包已经下载完成。

image.png

第三步：安装

继续输入命令tar -zxvf nginx-1.16.1.tar.gz（更多命令可以查看Linux下的解压命令
）进行解压，解压完成之后查看这个目录就会出现一个 nginx-1.16.1 文件夹，这就说明解压成功了。
然后进入 nginx-1.16.1 文件夹，依次输入如下命令：
注意：在执行下面命令时可能遇到权限问题，这时需要在命令前面加上sudo。

# ./configure的作用是检测系统配置，生成makefile文件，以便你可以用 make 和 make install 来编译和安装程序。
# 执行./configure的话要到你解压好的目录中去（cd 程序文件夹名称）。
./configure  
# make 编译 （make的过程是把各种语言写的源码文件，变成可执行文件和各种库文件）
make
# make install 安装 （make install是把这些编译出来的可执行文件和库文件复制到合适的地方）
make install

image.png
1、安装 PCRE 库
在运行./configure时会看到如下报错：

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre=<path> option.
意思是：./configure:错误:HTTP重写模块需要 PCRE 库。

这个时候就说明服务器中缺少 pcre-deve 库，需要运行yum -y install pcre-devel命令去安装 PCRE 源码包。
或者运行下面命令手动安装 PCRE 源码包：

cd /home/admin/  # 回到根目录
mkdir pcre  # 创建 pcre 文件夹
cd pcre  # 进入 pcre 文件夹
wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.39.tar.gz # 下载源码包
tar -zxvf pcre-8.39.tar.gz # 解压源码包
cd pcre-8.39 #  进入解压的源码包
./configure # 检测系统配置
make # 编译
make install # 安装

安装完毕之后可以运行rpm -qa pcre pcre-devel命令来检查依赖，看 pcre-devel 包是否安装成功。
2、安装 zlib-devel 库
在运行./configure时会看到如下报错：

./configure: error: the HTTP gzip module requires the zlib library.
You can either disable the module by using --without-http_gzip_module
option, or install the zlib library into the system, or build the zlib library
statically from the source with nginx by using --with-zlib=<path> option.
意思是：./configure:错误:HTTP gzip模块需要zlib库。

这个时候就说明服务器中缺少 zlib-devel 库，需要运行yum -y install zlib-devel命令去安装 zlib-devel 源码包。
或者运行下面命令手动安装 zlib 源码包：

cd /home/admin/  # 回到根目录
mkdir zlib  # 创建 zlib 文件夹
cd zlib  # 进入 zlib 文件夹
wget http://zlib.net/zlib-1.2.11.tar.gz # 下载源码包
tar -zxvf zlib-1.2.11.tar.gz # 解压源码包
cd zlib-1.2.11 #  进入解压的源码包
./configure # 检测系统配置
make # 编译
make install # 安装

安装完毕之后可以运行rpm -qa zlib-devel命令来检查依赖，看 zlib-devel 包是否安装成功。
3、安装 openssl-devel 库（某些vps默认没装ssl)
在运行./configure时会看到如下报错：

./configure: error: the HTTP cache module requires md5 functions
from OpenSSL library. You can either disable the module by using
--without-http-cache option, or install the OpenSSL library into the system,
or build the OpenSSL library statically from the source with nginx by using
--with-http_ssl_module --with-openssl=<path> options.

意思是：./configure:错误:HTTP缓存模块需要md5函数从OpenSSL库。

这个时候就说明服务器中缺少 openssl-devel 库，需要运行yum -y install openssl openssl-devel命令去安装 openssl-devel 源码包。
或者运行下面命令手动安装 openssl 源码包：

cd /home/admin/  # 回到根目录
mkdir openssl  # 创建 openssl 文件夹
cd openssl  # 进入 openssl 文件夹
wget https://www.openssl.org/source/openssl-1.0.1t.tar.gz # 下载源码包
tar -zxvf openssl-1.0.1t.tar.gz # 解压源码包

安装完毕之后可以运行rpm -qa openssl openssl-devel命令来检查依赖，看 zlib-devel 包是否安装成功。

第四步： 启动

如果安装时没有报错，那么就说明已经安装成功了，接下来运行cd /usr/local/nginx/sbin命令，进入 /usr/local/nginx/sbin 目录，在此目录中会有一个名为 nginx 的文件，接着运行./nginx -s reload（重启命令）启动Nginx。

这个时候Nginx可能会报错：
nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)
意思就是：/usr/local/nginx/logs/ 目录下没有找到nginx.pid文件。
解决方法：命令行输入启动命令 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf（如果出现权限问题就在开头加 sudo）

如果启动时Nginx报错，那么解决了报错信息之后，还需要重新启动一下Nginx。

image.png

当启动Nginx之后没有报错，并且在浏览器输入服务器域名或IP出现如下页面，那么就说明Nginx启动成功了。

image.png

第五步：将前端 build 好的包上传到服务器

将前端 build 好的包放到一个文件夹内（例如：dataops），重新打开一个终端运行如下命令：

scp -r 上传文件的目录 用户名@IP:/上传到服务器的目录

其他命令请点击Linux常用命令查看

image.png
在服务器的目录下可以看到上传的项目包
image.png

第六步：配置nginx服务器

运行cd /usr/local/nginx/conf进入安装的Nginx目录，/usr/local/nginx/html 目录下应该放置我们前端 build好的代码，但是因为这个html目录是只读目录，所以我一般都不会把项目放到html目录下。/usr/local/nginx/conf目录下有个非常重要的文件nginx.conf，用来配置nginx服务器。

image.png
因为这里的nginx.conf是只读文件，不允许修改，所以输入命令编辑时需要加 sudo 。
运行sudo vim nginx.conf命令，打开nginx.conf文件，直接找到配置server 的地方，取消掉暂时用不到的配置，下面便是我的配置:

修改配置文件时用到的快捷键：
i：开始编辑
esc：编辑完退出编辑
:wq：保存编辑

server {
        # 启动后的端口
        listen       8080;   
        
        # 启动时的地址 可以改为你服务器的IP
        server_name  localhost;

        # 启动后，地址栏输入: localhost:8080, 默认会在/home/admin/dataops文件夹下找 index.html文件
        location / {
            # 项目build包存放的文件夹
            root   /home/admin/dataops;
            # 项目build包存放的文件夹下的主入口文件
            index  index.html; 
            # 当用户请求 http://localhost:8080/home 时，这里的 $uri 就是 /home。
            # try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/home（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。 
            # 如果没有找到这个文件，然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/home/ 的目录。
            # 如果还找不到，就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost:8080/index.html。 
            # try_files方法让 Ngxin 尝试访问后面得 $uri 链接，并进根据 /index.html 配置进行内部重定向。
            # 当然try_files也可以以错误代码赋值，如try_files /index.php = 404 @apache，则表示当尝试访问得文件返回404时，根据@apache配置项进行重定向。
            try_files $uri $uri/ /index.html;
        }

        # 配置代理。由于项目是在本地起动的，而我们的request需要请求其他ip地址。如果你的request链接为localhost:8080/abc/login?name=12345,那么下面配的就是location /abc
        location /api/ {
           proxy_pass   http://192.168.0.0:8080/;       
        }
        
        # 404页面配置，页面同样在html文件夹中
        error_page  404    /404.html;
        location = /404.html {
            root   html;
        }
        

        # 其他错误码页面配置
        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # 一把前端不管用vue，还是react等框架，默认都是单页面的，如果你的项目是多页面的，则需要用到下面的配置。
        # 因为此时你的浏览器的url不是localhost:8080/#/login,而是 localhost:8080/a.html/#/login
        # 所以我们需要将路径中a.html指向具体的html文件夹中的文件，因为默认是index.html
        location /a.html {
          alias html;
          index a.html;
        }
        location /b.html{
          alias html;
          index b.html;
        }
}

注意事项

1、在修改nginx.conf文件时，每行的末尾必须带有分号";"，否则会报错。

当修改好配置保存之后，需要重新回到 /usr/local/nginx/sbin 目录下，重新启动Nginx，然后在浏览器下就可以看到你的项目页面了。

二、nginx启动、重启、关闭

启动

启动代码格式：nginx安装目录地址 -c nginx配置文件地址
例如：/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

重启

1、验证nginx配置文件是否正确
方法一：进入nginx安装目录 /usr/local/nginx/sbin/ 下，输入命令./nginx -t看到如下显示

nginx.conf syntax is ok
nginx.conf test is successful

说明配置文件正确！

image.png
方法二：在启动命令-c前加-t
image.png
2、重启Nginx服务
方法一：进入nginx可执行目录 /usr/local/nginx/sbin/ 下，输入命令./nginx -s reload即可
image.png
方法二：在 /usr/local/nginx/sbin/ 目录下，输入ps -ef|grep nginx命令，查找当前nginx进程号，然后输入命令kill -HUP 进程号实现重启nginx服务
image.png

停止

nginx的停止有三种方式：

• 普通停止
  1、查看进程号ps -ef|grep nginx
  image.png
  2、杀死进程kill -QUIT 31927
  image.png
• 快速停止
  1、查看进程号ps -ef|grep nginx
  2、杀死进程kill -TERM 9207 或 kill -INT 9388
  image.png
• 强制停止pkill -9 nginx
  image.png

三、访问页面遇到的问题及解决办法

1、访问页面出现500错误信息

image.png
这个时候就要在服务器 /usr/local/nginx/logs 目录下，打开 error.log 文件查看错误信息。
我的错误信息如下：

2019/11/22 00:58:38 [crit] 32603#0: *3 stat() "/root/photoAlbum/reactproject/index.html" failed (13: Permission denied), client: 115.193.160.204, server: localhost, request: "GET / HTTP/1.1", host: "xxx.xxx.xxx.xxx"
意思就是：2019/11/22“root / photoAlbum / reactproject / index。“失败(13:拒绝许可)

问题一：可能是由于启动用户和nginx工作用户不一致所致
运行ps -ef|grep nginx查看进程，发现启动用户是 root ，nginx工作用户是 nobody。

image.png
解决方法是：
进入 /usr/local/nginx/conf 目录，编辑 nginx.conf 文件，找到 user （默认是 nobody ），然后打开注释将 nobody 改为我自己的用户 root。重新进入 /usr/local/nginx/sbin 目录，重启 nginx，查看端口，发现 nginx 工作用户变成了root。现在这个问题就解决了，如果你只是这个问题的原因，那么重新刷页面就可以看到自己的项目了。
image.png