这是一个只会前端的后台小白日常杂记，工作闲时的自学经历，如有错误欢迎指正：
目标是3个Demo（Angular，Vue，React），用到的技术应该有：
后台：Nginx，Node，Express，PM2；（对后台没啥了解，用到再补充吧）
前端：Vue，VueX及一些相关技术；
万事开头难首先第一件事是买台云服务器因为以前用现有的服务器搭建了一个博客，怕弄乱了，这次趁着百度云优惠就又买了一台。
废话不多说，现在就开始吧。
前置要求：1H1G服务器一台（跑个小网站绰绰有余）域名一个满世界的特惠域名随便买了一个练手

第一步：阅读大神写的nginx文档 http://www.nginx.cn/install 由于一时没找到官方写的nginx文档，没办法先用民间的吧，看评论都是说好的，作为小白没办法就硬着头皮上吧。（以下步骤多为参考该网站，侵删）。

第二步：看完了大神的文档我们就开始操作吧！
首先在终端连接我们的服务器 ssh [email protected]@后面的是我们的服务器外网地址。
连接成功后开始安装nginx

# 安装依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
# 下载nginx安装包
wget http://nginx.org/download/nginx-1.12.2.tar.gz
# 解压缩
tar -zxvf linux-nginx-1.12.2.tar.gz
cd nginx-1.12.2/
# 执行配置
./configure
# 编译安装(默认安装在/usr/local/nginx)
make
make install

防火墙配置
nginx默认监听80端口，如果未关闭防火墙需要配置iptables规则开放80端口(以centos6为例)。
编辑配置文件：vim /etc/sysconfig/iptables
在文件中间添加iptables规则
-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT
重启防火墙：service iptables restart
或者关闭iptables规则：iptables -F && iptables -t nat -F

Nginx验证
nginx主配置文件：/usr/local/nginx/conf/nginx.conf
nginx日志文件：/usr/local/nginx/logs/access.log
启动Nginx：sudo /usr/local/nginx/sbin/nginx

Nginx常用命令
测试配置文件：${Nginx}/sbin/nginx -t
启动命令：${Nginx}/sbin/nginx
停止命令：${Nginx}/sbin/nginx -s stop/quit
重启命令：${Nginx}/sbin/nginx -s reload
查看进程命令：ps -ef | grep nginx
平滑重启：kill -HUP [Nginx主进程号(即ps命令查到的PID)]

也可建立软连接
ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/
nginx -t

访问网址/直接访问IP地址

好了，现在我们的nginx安装好了！
这时想到公司的不同网站都是在同一个主域名下，通过子域名进行区分，该如何配置呢？
经过度娘的百般折磨后我找到了配置的方法。
首先我们来到nginx的配置目录下

image.png

我们可以看到目录下有这些文件
用vi编辑器打开配置文件 vi nginx.conf 以下是添加注释后的文件

# 运行用户
#user  nobody; 
#启动进程,通常设置成和cpu的数量相等
worker_processes  1;

#全局错误日志及PID文件
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

#工作模式及连接数上限
events {
    #单个后台worker process进程的最大并发链接数
    worker_connections  1024;
    # 根据大神的说法
    # 并发总数是 worker_processes 和 worker_connections 的乘积
    # 即 max_clients = worker_processes * worker_connections
    # 在设置了反向代理的情况下，max_clients = worker_processes * worker_connections / 4  为什么
    # 为什么上面反向代理要除以4，应该说是一个经验值
    # 根据以上条件，正常情况下的Nginx Server可以应付的最大连接数为：4 * 8000 = 32000
    # worker_connections 值的设置跟物理内存大小有关
    # 因为并发受IO约束，max_clients的值须小于系统可以打开的最大文件数
    # 而系统可以打开的最大文件数和内存大小成正比，一般1GB内存的机器上可以打开的文件数大约是10万左右
    # 我们来看看360M内存的VPS可以打开的文件句柄数是多少：
    # $ cat /proc/sys/fs/file-max
    # 输出 34336
    # 32000 < 34336，即并发连接总数小于系统可以打开的文件句柄总数，这样就在操作系统可以承受的范围之内
    # 所以，worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的最大文件总数进行适当地进行设置
    # 使得并发总数小于操作系统可以打开的最大文件数目
    # 其实质也就是根据主机的物理CPU和内存进行配置
    # 当然，理论上的并发总数可能会和实际有所偏差，因为主机还有其他的工作进程需要消耗系统资源。
    # ulimit -SHn 65535
}


http {
    #设定mime类型,类型由mime.type文件定义
    include       mime.types;
    default_type  application/octet-stream;

    #设定日志格式
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，
    #对于普通应用，必须设为 on,
    #如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，
    #以平衡磁盘与网络I/O处理速度，降低系统的uptime.
    sendfile        on;
    #tcp_nopush     on;

    #连接超时时间
    #keepalive_timeout  0;
    keepalive_timeout  65;

    #开启gzip压缩
    gzip  on;
    # gzip_disable "MSIE [1-6].";

    #设定虚拟主机配置
    server {
        #侦听80端口
        listen       80;
        #定义使用 www.dev.xxxxxxxx.cn访问
        server_name  www.dev.xxxxxxxx.cn;
        
        #默认请求
        location / {
            #根路径配置
            root  html;
            #定义首页索引文件的名称
            index  dev.html  dev.htm;
        }
        # 定义错误提示页面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}
    server {
        listen       80;
        server_name  www.test.xxxxxxx.cn;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root  /www;

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

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
         location /page {
            root   html;
            index  index.html index.htm;
        }#
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

}

要想实现同一网址指向不同页面有3种方案
方案1：监听不同的端口

 server {
        #侦听80端口
        listen       80;
        #定义使用 www.dev.xxxxxxxx.cn访问
        server_name  www.dev.xxxxxxxx.cn;
        
        #默认请求
        location / {
            #根路径配置
            root  html;
            #定义首页索引文件的名称
            index  dev.html  dev.htm;
        }
        # 定义错误提示页面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}
 server {
        #侦听80端口
        listen       8888;
        #定义使用 www.dev.xxxxxxxx.cn访问
        server_name  www.dev.xxxxxxxx.cn;
        
        #默认请求
        location / {
            #根路径配置
            root  html;
            #定义首页索引文件的名称
            index  dev.html  dev.htm;
        }
        # 定义错误提示页面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}

方案2：使用不同的子域名

 server {
        #侦听80端口
        listen       80;
        #定义使用 www.dev.xxxxxxxx.cn访问
        server_name  www.dev.xxxxxxxx.cn;
        
        #默认请求
        location / {
            #根路径配置
            root  html;
            #定义首页索引文件的名称
            index  dev.html  dev.htm;
        }
        # 定义错误提示页面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}
 server {
        #侦听80端口
        listen       80;
        #定义使用 www.dev.xxxxxxxx.cn访问
        server_name  www.test.xxxxxxxx.cn;
        
        #默认请求
        location / {
            #根路径配置
            root  html;
            #定义首页索引文件的名称
            index  dev.html  dev.htm;
        }
        # 定义错误提示页面
        error_page 500 502 503 504 /50x.html;
        location /50x.html{
            root html;

        }
}

方法3 配置location 见配置文件详解

location这就有点复杂了

nginx location指令详解

Nginx的HTTP配置主要包括三个区块，结构如下：
http { //这个是协议级别
　　include mime.types;
　　default_type application/octet-stream;
　　keepalive_timeout 65;
　　gzip on;
　　　　server { //这个是服务器级别
　　　　　　listen 80;
　　　　　　server_name localhost;
　　　　　　　　location / { //这个是请求级别
　　　　　　　　　　root html;
　　　　　　　　　　index index.html index.htm;
　　　　　　　　}
　　　　　　}
}

location区段

通过指定模式来与客户端请求的URI相匹配，基本语法如下：location [=|_|*|^~|@] pattern{……}

1、没有修饰符表示：必须以指定模式开始，如：

server {
　　server_name baidu.com;
　　location /abc {
　　　　……
　　}
}

那么，如下是对的：
http://baidu.com/abc
http://baidu.com/abc?p1
http://baidu.com/abc/
http://baidu.com/abcde

2、=表示：必须与指定的模式精确匹配

server {
server_name sish
　　location = /abc {
　　　　……
　　}
}
那么，如下是对的：
http://baidu.com/abc
http://baidu.com/abc?p1
如下是错的：
http://baidu.com/abc/
http://baidu.com/abcde

3、~ 表示：指定的正则表达式要区分大小写

server {
server_name baidu.com;
　　location ~ ^/abc$ {
　　　　……
　　}
}
那么，如下是对的：
http://baidu.com/abc
http://baidu.com/abc?p1=11&p2=22
如下是错的：
http://baidu.com/ABC
http://baidu.com/abc/
http://baidu.com/abcde

4、~* 表示：指定的正则表达式不区分大小写

server {
server_name baidu.com;
location ~* ^/abc$ {
　　　　……
　　}
}
那么，如下是对的：
http://baidu.com/abc
http://baidu..com/ABC
http://baidu..com/abc?p1=11&p2=22
如下是错的：
http://baidu..com/abc/
http://baidu..com/abcde

5、^~ 类似于无修饰符的行为，也是以指定模式开始，不同的是，如果模式匹配，
那么就停止搜索其他模式了。
6、@ ：定义命名location区段，这些区段客户段不能访问，只可以由内部产生的请
求来访问，如try_files或error_page等

查找顺序和优先级

1：带有“=“的精确匹配优先

2：没有修饰符的精确匹配

3：正则表达式按照他们在配置文件中定义的顺序

4：带有“^~”修饰符的，开头匹配

5：带有“~” 或“~*” 修饰符的，如果正则表达式与URI匹配

6：没有修饰符的，如果指定字符串与URI开头匹配

Location区段匹配示例

location = / {
　　# 只匹配 / 的查询.
　　[ configuration A ]
}
location / {
　　# 匹配任何以 / 开始的查询，但是正则表达式与一些较长的字符串将被首先匹配。
　　[ configuration B ]
}
location ^~ /images/ {
　　# 匹配任何以 /images/ 开始的查询并且停止搜索，不检查正则表达式。
　　[ configuration C ]
}
location ~* \.(gif|jpg|jpeg)$ {
　　# 匹配任何以gif, jpg, or jpeg结尾的文件，但是所有 /images/ 目录的请求将在Configuration C中处
　　理。
　　[ configuration D ]
} 各
请求的处理如下例：
■/ → configuration A
■/documents/document.html → configuration B
■/images/1.gif → configuration C
■/documents/1.jpg → configuration D

root 、alias指令区别

location /img/ {
    alias /var/www/image/;
}
#若按照上述配置的话，则访问/img/目录里面的文件时，ningx会自动去/var/www/image/目录找文件

location /img/ {
    root /var/www/image;
}
#若按照这种配置的话，则访问/img/目录下的文件时，nginx会去/var/www/image/img/目录下找文件。

$\color{red}{还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的。。。而root则可有可无~~}$

proxy_pass

proxy_pass——反向代理配置，用于代理请求，适用于前后端负载分离或多台机器、服务器负载分离的场景，在匹配到location配置的URL路径后，转发请求到proxy_pass配置额URL，是否会附加location配置路径与proxy_pass配置的路径后是否有"/"有关，有"/"则不附加，如：

location   /test/  {
        proxy_pass    http://127.0.0.1:8080/;
}

请求/test/1.jpg，将会被nginx转发请求到http://127.0.0.1:8080/1.jpg（未附加/test/路径）

--以上部分内容转载自 http://www.nginx.cn/install

从零开始摸爬滚打搭建自己的网站（一）