linux nginx 部署服务（以react包为例）

今天我特地写下笔记，希望可以完全掌握这个东西，也希望可以帮助到任何想对学习这个东西的同学。

前言

本文用nginx部署服务为主要内容，基于CentOs 7.8系统。

文档版本：1.0.1

更新时间：2020-07-22 20:28

一. 相关环境或软件技术

1.1 CentOS 系统

　　CentOS（Community Enterprise Operating System，中文意思是社区企业操作系统）是Linux发行版之一。

　　当前安装版本CentOS 7.8版本，保持统一版本，方便后期维护。

1.2 Nginx

　　Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器。

　　当前使用的nginx版本为 nginx-1.6.2 ，直接使用安装包安装。

1.3 PCRE

　　安装Nginx 前 必须安装 PCRE。PCRE 作用是让 Nginx 支持 Rewrite 功能。当前使用的版本为 pcre-8.35 的安装包。

　　Nginx是高度自由化的Web服务器，它的功能是由许多模块来支持。如果使用了某个模块，这个模块使用了一些类似zlib或OpenSSL等的第三方库，那么就必须先安装这些软件。

　　PCRE(Perl Compatible Regular Expressions)是一个Perl库，包括perl兼容的正则表达式库。如果我们在配置文件nginx.conf中使用了正则表达式，那么在编译Nginx时就必须把PCRE库编译进Nginx，因为Nginx的HTTP模块需要靠它来解析正则表达式。另外，pcre-devel是使用PCRE做二次开发时所需要的开发库，包括头文件等，这也是编译Nginx所必须使用的。

1.4 前端包目录结构

nginx安装后，需要上传前端代码文件，进行页面访问。汇聚前端包一般是只有一个名为 dist 文件夹，文件夹的目录结构如下：

-- dist
    -- static
    -- index.html
    -- umi.css
    -- umi.js

其中static内包含的是静态文件。

二. 安装部署

2.1 xshell操作

  1. 当前文档以xshell为例。打开xshell后，新建会话连接，先输入会话名称和服务器的ip：

  1. 点击用户身份验证，输入服务器的用户名和密码，确定后保存：

  2. 连接后进入代码编辑：

2.2 安装PCRE

　　这里安装使用的是安装包模式。

  1. 进入统一设置（可以自己定义路径）的文件夹：

[root@localhost ~]# cd /usr/local/src

  1. 使用命令 rz 后直接回车，然后选择 pcre-8.35 安装包上传。

[root@localhost src]# rz
（上传后，可用命令 ls 查看是否有上传）

  1. 解压安装包

[root@localhost src]# tar zxvf pcre-8.35.tar.gz
（上传后，可用命令 ls 查看是否有解压）

  1. 进入pcre安装包目录

[root@localhost src]# cd pcre-8.35

  1. 检测配置

./configure 是用来检测你的安装平台的目标特征的。比如它会检测你是不是有CC或GCC，并不是需要CC或GCC，它是个shell脚本。配置完之后控制台会打印出pcre配置的摘要信息。

[root@localhost pcre-8.35]# ./configure

  1. 编译

    make 是用来编译的，它从Makefile中读取指令，然后编译。

[root@localhost pcre-8.35]# make

  1. 安装

    make install 是用来安装的，它也从Makefile中读取指令，安装到指定的位置。

[root@localhost pcre-8.35]# make install

  1. 安装后，可查看pcre版本。

[root@bogon pcre-8.35]# pcre-config --version

如上图所示，有显示8.35版本，则表示安装成功。

2.3 安装Nginx

　　这里安装使用的是安装包模式。

  1. 进入统一设置（可以自己定义路径）的文件夹：

[root@bogon pcre-8.35]# cd /usr/local/src

  1. 使用命令 rz 后直接回车，然后选择 nginx-1.6.2 安装包上传。

[root@localhost src]# rz
（上传后，可用命令 ls 查看是否有上传）

  1. 解压安装包

[root@localhost src]# tar zxvf nginx-1.6.2.tar.gz
（上传后，可用命令 ls 查看是否有解压）

  1. 进入nginx安装包目录

[root@bogon src]# cd nginx-1.6.2

  1. 配置（如想了解更多配置，可以访问https://www.cnblogs.com/flashfish/p/11025961.html）

[root@localhost nginx-1.6.2]# ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35

  1. 编译

[root@localhost nginx-1.6.2]# make

  1. 安装

[root@localhost nginx-1.6.2]# make install

  1. 安装后，查看版本号

[root@localhost nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx -v

如果如下所示，显示版本号（以下代码无需执行），则表示已安装。

nginx version: nginx/1.6.2

  1. 启动nginx

[root@localhost nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx

  1. 请到浏览器地址栏输入服务器地址，比如当前示例地址是 192.168.100.123 ，进行访问，如下所示，表示nginx安装成功，并可以访问。

  1. 如果访问不了，可能是服务器防火墙没有关闭，关闭命令如下：

[root@localhost html]# systemctl stop firewalld
[root@localhost html]# systemctl disable firewalld

如果显示以下代码，表示关闭成功

Removed symlink /etc/systemd/system/multi-user.target.wants/firewalld.service.
Removed symlink /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service.

  1. 关闭后重启nginx，然后再去浏览器访问

/usr/local/webserver/nginx/sbin/nginx -s -reload

三. nginx部署多套服务

3.1 前端配置

先把前端包解压，然后用文本打开前端包下的 index.html 文件，默认代码如下：

上图标注的4个点都是必须要配置的点，其中：

  • 第1,4个标注点，是前端包的默认路径，可以添加配置

  • 第3个标注点是ip，端口等其他全局配置，需要和后端对应匹配

  • 第2个标注点是访问后的路径替换。我们访问的是nginx的location的后面那个东西（3.2.2章节），然后window.routeBase会替换掉这个地址

配置完成后，把dist再重新打包成 zip 格式，然后把dist下的static文件夹也打包成 zip 格式，先放着，用以上传。

3.2 Nginx对应配置

nginx的目录结构包含了conf文件夹和html文件夹，主要操作在于这两个。

3.2.1 上传前端包

1.打开linux系统下已经安装好的nginx（默认地址是刚才安装的路径：/usr/local/webserver/nginx，而不是放置在src下的nginx-1.6.2的路径），先找到nginx下的html文件夹，然后在当前文件夹用命令 rz 直接上传刚刚打包的dist.zip和static.zip 。

2.前端包下有个static文件夹（目录结构请看1.4章节），这个单独拿出来，重新压缩成 zip 然后用命令 rz 上传，上传后可以使用命令 ls 查看是否有上传。

解压static.zip

[root@localhost html]# unzip static.zip

解压后，如下图所示蓝色部分为文件夹，第二个框框为static文件夹下面的文件：

解压dist1.zip（dist1.zip只是举例）

[root@localhost html]# unzip dist1.zip

解压后如下：

多套服务部署后，nginx下的html文件夹目录结构如下：

至少包含dist5,static（dist5只是举例，代表刚才上一步解压的那个文件） 两个文件夹。

3.2.2 配置 nginx.conf

首先进入（cd conf）conf文件夹，然后使用命令 vi nginx.conf 进行查看文件，

注意，命令vi nginx.conf 如果Enter后出现如下图提示

则再 Enter一次，否则就略过此步骤

文件默认配置如下：

  1 #user  nobody;
  2 worker_processes  1;
  3 ​
  4 #error_log  logs/error.log;
  5 #error_log  logs/error.log  notice;
  6 #error_log  logs/error.log  info;
  7 ​
  8 #pid        logs/nginx.pid;
  9 ​
 10 ​
 11 events {
 12     worker_connections  1024;
 13 }
 14 ​
 15 ​
 16 http {
 17     include       mime.types;
 18     default_type  application/octet-stream;
 19 ​
 20     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
 21     #                  '$status $body_bytes_sent "$http_referer" '
 22     #                  '"$http_user_agent" "$http_x_forwarded_for"';
 23 ​
 24     #access_log  logs/access.log  main;
 25 ​
 26     sendfile        on;
 27     #tcp_nopush     on;
 28 ​
 29     #keepalive_timeout  0;
 30     keepalive_timeout  65;
 31 ​
 32     #gzip  on;
 33 ​
 34     server {
 35         listen       80;
 36         server_name  localhost;
 37 ​
 38         #charset koi8-r;
 39 ​
 40         #access_log  logs/host.access.log  main;
 41 ​
 42         location / {
 43             root   html;
 44             index  index.html index.htm;
 45         }
 46 ​
 47         #error_page  404              /404.html;
 48 ​
 49         # redirect server error pages to the static page /50x.html
 50         #
 51         error_page   500 502 503 504  /50x.html;
 52         location = /50x.html {
 53             root   html;
 54         }
 55 ​
 56         # proxy the PHP scripts to Apache listening on 127.0.0.1:80
 57         #
 58         #location ~ \.php$ {
 59         #    proxy_pass   http://127.0.0.1;
 60         #}
 61 ​
 62         # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
 63         #
 64         #location ~ \.php$ {
 65         #    root           html;
 66         #    fastcgi_pass   127.0.0.1:9000;
 67         #    fastcgi_index  index.php;
 68         #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
 69         #    include        fastcgi_params;
 70         #}
 71 ​
 72         # deny access to .htaccess files, if Apache's document root
 73         # concurs with nginx's one
 74         #
 75         #location ~ /\.ht {
 76         #    deny  all;
 77         #}
 78     }
 79 ​
 80 ​
 81     # another virtual host using mix of IP-, name-, and port-based configuration
 82     #
 83     #server {
 84     #    listen       8000;
 85     #    listen       somename:8080;
 86     #    server_name  somename  alias  another.alias;
 87 ​
 88     #    location / {
 89     #        root   html;
 90     #        index  index.html index.htm;
 91     #    }
 92     #}
 93 ​
 94 ​
 95     # HTTPS server
 96     #
 97     #server {
 98     #    listen       443 ssl;
 99     #    server_name  localhost;
100 ​
101     #    ssl_certificate      cert.pem;
102     #    ssl_certificate_key  cert.key;
103 ​
104     #    ssl_session_cache    shared:SSL:1m;
105     #    ssl_session_timeout  5m;
106 ​
107     #    ssl_ciphers  HIGH:!aNULL:!MD5;
108     #    ssl_prefer_server_ciphers  on;
109 ​
110     #    location / {
111     #        root   html;
112     #        index  index.html index.htm;
113     #    }
114     #}
115 ​
116 }

然后，当前文本有编辑状态和非编辑状态两种模式（底部含有 -- INSTERT -- 表示编辑状态，无此标志表示非编辑状态），默认是非编辑状态。

修改配置有两种方式：

第一种，主动进入编辑状态（按a键或i键），编辑代码（80端口下，大概35行上下）：

1 ...
2         location / {
3             root   html;
4             index  index.html index.htm;
5         }
6         ...

编辑后为：

 1  ...
 2         location /dist5 {
 3             try_files $uri $uri/ /dist5/index.html;
 4         }
 5         
 6         location /dist6 {
 7             try_files $uri $uri/ /dist6/index.html;
 8         }
 9         
10         location /dist7 {
11             try_files $uri $uri/ /dist7/index.html;
12         }
13         
14         location /dist9 {
15             try_files $uri $uri/ /dist9/index.html;
16         }
17         ...

然后按键ESC先退出编辑状态，之后再用命令 :wq 保存退出。（其他命令请看附录一）

提示：有一个location就是单套服务，多个就是多个服务。并且单套服务的可以直接把dist下的所有内容，都放到nginx的html下，访问的时候直接访问ip。

第二种，非编辑状态下可直接长按d键全部删除，删除后可能会自动进入编辑状态，接着将下面内容复制粘贴替换（注意：如果是xshell操作复制粘贴，有时候第一行的user会缺失一部分字符，需要补全。）。替换后，先用 ESC退出编辑状态，然后再用命令 :wq 保存退出。（其他命令请看附录一）

  1 #user  root;
  2 worker_processes  1;
  3 ​
  4 #error_log  logs/error.log;
  5 #error_log  logs/error.log  notice;
  6 #error_log  logs/error.log  info;
  7 ​
  8 #pid        logs/nginx.pid;
  9 ​
 10 ​
 11 events {
 12     worker_connections  1024;
 13 }
 14 ​
 15 ​
 16 http {
 17     include       mime.types;
 18     default_type  application/octet-stream;
 19 ​
 20     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
 21     #                  '$status $body_bytes_sent "$http_referer" '
 22     #                  '"$http_user_agent" "$http_x_forwarded_for"';
 23 ​
 24     #access_log  logs/access.log  main;
 25 ​
 26     sendfile        on;
 27     #tcp_nopush     on;
 28 ​
 29     #keepalive_timeout  0;
 30     keepalive_timeout  65;
 31 ​
 32     #gzip  on;
 33 ​
 34     server {
 35         listen       80;
 36         server_name  localhost;
 37 ​
 38         #charset koi8-r;
 39 ​
 40         #access_log  logs/host.access.log  main;
 41 ​
 42         location /dist5 {
 43             try_files $uri $uri/ /dist5/index.html;
 44         }
 45         
 46         location /dist6 {
 47             try_files $uri $uri/ /dist6/index.html;
 48         }
 49         
 50         location /dist7 {
 51             try_files $uri $uri/ /dist7/index.html;
 52         }
 53         
 54         location /dist9 {
 55             try_files $uri $uri/ /dist9/index.html;
 56         }
 57 ​
 58         #error_page  404              /404.html;
 59 ​
 60         # redirect server error pages to the static page /50x.html
 61         #
 62         error_page   500 502 503 504  /50x.html;
 63         location = /50x.html {
 64             root   html;
 65         }
 66 ​
 67         # proxy the PHP scripts to Apache listening on 127.0.0.1:80
 68         #
 69         #location ~ \.php$ {
 70         #    proxy_pass   http://127.0.0.1;
 71         #}
 72 ​
 73         # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
 74         #
 75         #location ~ \.php$ {
 76         #    root           html;
 77         #    fastcgi_pass   127.0.0.1:9000;
 78         #    fastcgi_index  index.php;
 79         #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
 80         #    include        fastcgi_params;
 81         #}
 82 ​
 83         # deny access to .htaccess files, if Apache's document root
 84         # concurs with nginx's one
 85         #
 86         #location ~ /\.ht {
 87         #    deny  all;
 88         #}
 89     }
 90 ​
 91 ​
 92     # another virtual host using mix of IP-, name-, and port-based configuration
 93     #
 94     #server {
 95     #    listen       8000;
 96     #    listen       somename:8080;
 97     #    server_name  somename  alias  another.alias;
 98 ​
 99     #    location / {
100     #        root   html;
101     #        index  index.html index.htm;
102     #    }
103     #}
104 ​
105 ​
106     # HTTPS server
107     #
108     #server {
109     #    listen       443 ssl;
110     #    server_name  localhost;
111 ​
112     #    ssl_certificate      cert.pem;
113     #    ssl_certificate_key  cert.key;
114 ​
115     #    ssl_session_cache    shared:SSL:1m;
116     #    ssl_session_timeout  5m;
117 ​
118     #    ssl_ciphers  HIGH:!aNULL:!MD5;
119     #    ssl_prefer_server_ciphers  on;
120 ​
121     #    location / {
122     #        root   html;
123     #        index  index.html index.htm;
124     #    }
125     #}
126 ​
127 }

3.2.3 检查配置与重启查看

1. 保存退出后，在终端输入以下代码，检查配置是否正确：

[root@localhost conf]# /usr/local/webserver/nginx/sbin/nginx -t

如果显示以下内容，则表示配置正确（以下内容无需执行）：

nginx: the configuration file /usr/local/webserver/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/webserver/nginx/conf/nginx.conf test is successful

2. 重启nginx

[root@localhost conf]# /usr/local/webserver/nginx/sbin/nginx -s reload

3. 到浏览器地址栏输入地址（如果已有页面，请清空缓存后刷新查看）查看，比如：

http://192.168.100.123/dist5

四. nginx部署单套服务

4.1前端配置

单套服务的nginx部署和多套服务部署类似，只是前端包配置和nginx对应的配置有所不同。

单套服务部署后，html文件夹目录结构如下：

至少包含index.html,umi.css,umi.js三个文件以及一个static文件夹。

4.2 Nginx对应配置

Nginx的单套服务与多套服务配置差别在于nginx.conf的配置不同。单套服务的主要修改配置代码部分是(80端口下的部分，第40行上下)：

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

修改后如下：

location / {
    try_files $uri $uri/ /index.html;
}

然后查看配置正确性，再重启nginx（参考3.2.3章节）

五. 更新操作

  1. 进入到nginx的html文件夹（命令请查看附录一）

  2. 先删除需要更新的包，否则可能会上传失败。比如（以下为示例代码，具体包名称以实际包为准）；

rm dist.zip

删除提示如下：

rm：是否删除普通文件 "dist.zip"？

只需要在后面输入小写字母 y ，然后回车即可。删除后可用命令 ls 查看是否已被删除。

  1. 使用命令 rz 直接上传包

  2. 解压

解压覆盖会产生如下提示（如果已删除则忽略此步骤）：

replace static/background.5e1e1790.jpg? [y]es, [n]o, [A]ll, [N]one, [r]ename:

可输入小写字母 y 一个一个覆盖，或者大写字母 A，全部覆盖。

  1. 去浏览器上进行清空缓存并刷新汇聚页面查看是否完成更新。

附录一：常用命令

 1 ----------
 2 pwd 显示当前目录
 3 ls 查看目录下的内容
 4 cd xxx 进入到xxx目录
 5 cd .. 返回上一层目录
 6 cat 显示文件的内容
 7 touch 创建文件
 8 mv 移动文件
 9 rm 删除文件
10 rm -rf xxx 删除文件夹（xxx是文件夹名称）
11 rm dir 删除目录
12 vi/vim 查看编辑文件(vim是vi的升级版)
13 unzip xxx.zip 解压zip的压缩包
14 unzip -o xxx.zip 解压.zip的压缩包后并直接覆盖文件
15 tar zxvf xxx.tar.gz 解压.tar.gz的压缩包
16 rz 上传文件
17 rz -y 上传并覆盖文件
18 sz 从nginx里面下载文件
19 
20 ----------
21 ESC按键 退出编辑模式，才能使用以下命令
22 :q 冒号+q，退出不保存
23 :q! 强制退出不保存
24 :wq 保存并退出
25 gg 回到最上行
26 dd操作，删除行操作，当vi xxx某个文件的时候，有编辑模式和非编辑模式两种状态，dd删除操作是非编辑模式下的删除行操作
27 u 撤销 
28 
29 ----------
30 查看nginx进程：ps aux | grep nginx 
31 启动防火墙： systemctl start firewalld
32 关闭防火墙： systemctl stop firewalld
33 查看防火墙状态： systemctl status firewalld
34 开机禁用防火墙： systemctl disable firewalld
35 开机启用防火墙： systemctl enable firewalld

附录二：常见错误

  1. 删除带括号的会报错

[root@localhost src]# rm pcre-8.35.tar(1).gz
-bash: 未预期的符号 `(' 附近有语法错误

在括号前加\ 就可以。

[root@localhost src]# rm pcre-8.35.tar\(1\).gz

  1. nginx已经启动，又再次启动，无效

nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
......

生成很多类似这样的代码。这个时候不应该启动，而是重启nginx

[root@localhost /]#  /usr/local/webserver/nginx/sbin/nginx -s reload

  1. 用tar去解压zip等压缩包解压不出来，tar是用来解压*.tar.gz文件的

[root@localhost src]# tar zxvf nginx-1.6.2.tar.gz

xxx.zip文件解压应该用命令 unzip ，如：

[root@localhost src]# unzip dist.zip

  1. 在终端输入命令时，若遇到权限问题，可以直接获得root权限。即在终端执行sudo -s，如下：

yzy@yzy-test:/usr/local/nginx/html$ sudo -s

，然后输入当前登录的普通用户密码(密码不可见，看起来像没有输入一样，保持正常输入就好)，

[sudo] yzy 的密码：

即可进入到root用户模式。

posted @ 2020-07-22 22:22  烈雾风雨城  阅读(1476)  评论(0)  编辑  收藏  举报