前端不能不会的 Nginx 入门（图文并茂的服务器环境教程）

前言

说到 Nginx，你们可能会闪过几个画面php

这不是后端运维要用到技术吗，前端为啥要学这个
我学 Nginx 也没啥用啊
学了 Nginx 我能涨薪吗
。。。

1、简介

我我的拙见，前端自己就是一个很杂，且边界比较模糊的职业。如果在大公司，固然前端可能只须要专一页面上的业务开发，部署项目这块会交给一些专业的运维同事，轮不到你来操心这些事情。但很遗憾，大部分程序员不在大公司工做，多数就任于中小型的小厂。那么在小厂的话，很大几率上公司是没有运维人员的，前端项目的部署和运维极可能就会交给前端同窗来管理。再退一步讲，平时咱们接一些私活或者本身玩一些项目，都是须要部署到线上服务器。那么就能够选择咱们好用的 Nginx，借用官方的解释——“Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了 IMAP/POP3/SMTP 服务“html

2、须要的环境

学习Nginx须要什么环境呢？前端

一、买一个云服务器（腾讯云 or 阿里云）价格有点贵，就我目前而言，买的是腾讯的99元包年，最近好像有活动（非广告）node

二、本身找个电脑搭建一下服务器的环境nginx

三、搞个虚拟机，可是配置及其麻烦，新手不建议尝试c++

我买的服务器操做系统是 CentOS 7.6 64 位git

经过服务器提供的yum去安装一些工具库程序员

远程登陆服务器 ssh root@IP（这里的IP就是你购买服务器的IP地址），腾讯服务器里可让你选择密码登陆仍是密钥登陆，我选择添加本地密钥登陆，这样比较方便，不用每次都输入密码。进入服务器以后就是这样的画面github

而后输入下面这段代码，安装相应的工具包和库web

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
复制代码

基本上没什么大问题就会显示“Complete!”

恭喜你，服务器环境基本安装完毕～

3、搭建Nginx配置

我的建议，能够先去Nginx官方文档先看看，了解一下Nginx再开始下面的阅读，我尽可能不说理论知识，讲一些实操，由于我以为理论知识我说的确定不如官网来得细致。

首先看看服务器内yum内的Nginx源的版本

yum list | grep nginx
复制代码

这个版本不是很高，咱们可使用官方提供的源。

在终端输入以下

vim /etc/yum.repos.d/nginx.repo
复制代码

后填入下列代码，注意，个人centos是7.x版本，因此我写的是7，同窗们能够按照本身的版原本

保存退出，而后安装 nginx

yum install nginx
nginx -v
复制代码

运行上面指令以后，能获得最新的 Nginx 版本以下

只能用舒服二字形容，一切顺利安装好nginx，玩归玩，闹归闹，必定要把nginx掌握好～～～

4、Nginx的配置文件

经过rpm -ql nginx 指令查看 Nginx 都安装到了哪些目录

几个关键的位置要注意一下：/etc/nginx、/etc/nginx/conf.d 、/etc/nginx/nginx.conf

解释一下 /etc/nginx/nginx.conf，由于这个是 Nginx 的主配置，比较重要

输入命令行

cd /etc/nginx
vim nginx.conf
复制代码

#运行用户，默认便是nginx，能够不进行设置
user  nginx;
#Nginx进程，通常设置为和CPU核数同样
worker_processes  1;   
#错误日志存放目录
error_log  /var/log/nginx/error.log warn;
#进程pid存放位置
pid        /var/run/nginx.pid;


events {
    worker_connections  1024; # 单个后台进程的最大并发数
}


http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;   #nginx访问日志存放位置

    sendfile        on;   #开启高效传输模式
    #tcp_nopush     on;    #减小网络报文段的数量

    keepalive_timeout  65;  #保持链接的时间，也叫超时时间

    #gzip  on;  #开启gzip压缩

    include /etc/nginx/conf.d/*.conf; #包含的子配置项位置和文件
复制代码

再解释一下主文件中的子文件，就是👆上面这个 include 下的 .conf 文件

进入 /etc/nginx/conf.d/ 这个文件夹，再经过 vim 或者 cat 打开

server {
    listen       80;   #配置监听端口
    server_name  localhost;  //配置域名

    #charset koi8-r; 
    #access_log /var/log/nginx/host.access.log main;

    location / {
        root   /usr/share/nginx/html;     #服务默认启动目录
        index  index.html index.htm;    #默认访问文件
    }

    #error_page 404 /404.html; # 配置404页面

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;   #错误状态码的显示页面，配置后须要重启
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    # proxy_pass http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    # root html;
    # fastcgi_pass 127.0.0.1:9000;
    # fastcgi_index index.php;
    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
    # include fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    # deny all;
    #}
}
复制代码

这里的root表示，项目文件是放在'/usr/share/nginx/html'下面，那么咱们就去看看这里有啥呢

就这俩玩意儿，也就是一个默认的index文件和报错的时候会展现的50x.html页面

经过安全组的配置，容许浏览器访问服务器地址的80端口，下面就是个人腾讯云服务器的默认首页

安全组的配置会有些复杂，须要一些网络协议的知识，不过腾讯云提供了视频教程，你们能够看看地址在这里

这里还有一个小问题，就是当大家配置好 default.conf 的时候，须要重启nginx才能运行新改的配置，这里在服务器里运行指令 nginx -s reload 会报错nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory)，这个时候能够以下

// 先输入
nginx
nginx -s reload
复制代码

或者是若是你使用 iTerm 的话，能够配置 .bashrc 文件，添加一个 alias 的配置来简化运行nginx指令；或者是经过指令 systemctl start nginx.service 启动 nginx 服务，经过指令 ps aux | grep nginx 查看 nginx 是不是否启动；还有不少 nginx 的指令，你们自行去官网查看，这里很少bb了。

5、亲手配置404错误页面

打开default.conf文件进行编辑

添加一个 error_page 配置，而后再去配置 /usr/share/nginx/html 里面的 404_*error.html

直接输入指令 vim 404_error.html 就会直接建立 html 文件

保存退出以后，记得重启一下nginx，而后去浏览器随便输入一个未知的路径，就能看到404页面以下

还能将位置页面指向另外一个网址，default.conf 以下设置

刷新刚才的浏览器页面，就会跳转到百度的首页去了

6、权限配置

简单的说，就是我想让谁能访问个人服务器，谁禁止访问个人浏览器

关键词是 allow 和 deny

顾名思义，allow 就是容许谁访问，deny 就是禁止谁访问

首先看看本身的 ip 地址，经过这个网址来获取

个人 ip 地址是 112.10.54.90，那么我来禁止个人 ip 访问服务器

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    deny 112.10.54.90;
}
复制代码

重启nginx以后，访问ip地址首页，结果以下

还能够更精准的定位某个路径下不可访问，以下设置

location =/admin {
    deny all
}
复制代码

再也不演示了，自行操做，光看可不行，请本身多多练习，看别人bb没用的

7、虚拟主机的设置

三种形式

一、基于端口号配置

二、基于域名配置

三、基于IP配置

工做中通常是不会基于IP配置的，由于哪来那么多钱买那么多IP呢，多数都是经过域名来配置，设置一下二级域名，作一个反向代理啥的。经过端口号也很少，由于我总不能在域名后面加个端口号把，十分难看且不雅。

着重讲一讲经过域名配置的状况，你们能够去买个域名玩一玩，几块几十块就有一个属于本身的船新域名，多的不说，去万网买一个吧。买完以后，经过解析添加一条记录以下

同理再添加一条记录，主机记录命名为nginx2

那么如今我就有两个二级域名

一、nginx.chennick.wang

二、nginx2.chennick.wang

那么用第一个域名指向默认的nginx首页，用第二个新建一个虚拟主机

第一个域名配置

第二个域名配置

回去设置一下第二个域名的index2.html

玩到这儿，基本上你也就差很少入门了nginx的配置了

8、Nginx反向代理

反向代理对前端而言，是很是有用的，由于前端的跨域问题跨域经过反向代理来解决。废话很少说，进入正题。

如何配置反向代理呢，配置以下

server{
        listen 80;
        server_name nginx2.chennick.wang;
        location / {
               proxy_pass https://www.baidu.com/;
        }
}
复制代码

上述配置，在浏览器访问nginx2.chennick.wang这个域名的时候，展现的页面是www.baidu.com/的页面，以下图所示

还有一些对PC端和移动端的判断，相似浏览器的userAgent去判断，而后根据PC和Mobile返回不一样的站点，这里就不展开多说了，东西都差很少，看文档就行。

最后再多说一句，小伙伴们必定要本身去亲手写一写，光蹭一蹭不进去，是不行滴。

PS、后续补充

在云端服务器配置node环境：

这里推荐你们使用nvm去安装node，版本随时能够升级降级，很是友好，不过不建议在服务器随便升降版本，很危险。。。

具体方法：

一、经过 wget 下载nvm的sh脚本

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
复制代码

二、先更新一下bash_profile文件

source ~/.bash_profile
复制代码

三、安装完成之后使用 nvm - v 来测试安装是否成功

nvm -v
复制代码

四、安装成功之后会显示版本号和nvm 相关命令等提示

nvm install v12.6.0
nvm use v12.6.0
nvm alias default v12.6.0
复制代码

而后就能在全局使用npm

前端不能不会的 Nginx 入门 （图文并茂的服务器环境教程）

前言