nginx,做为前端的你会多少？

--如今阅读的你，若是是个FE，相信你不是个纯切图仔。反之，若是是，该进阶了，老铁！

前端的咱们，已经不单单是作页面，写样式了，咱们还须要会作相关的服务器部署。废话很少说，下面就从前端的角度来说如下nginx的相关使用。

• 给咱们的静态资源启一个web 服务
• 给咱们的nodejs 的项目设置反向代理，80端口访问
• 给咱们的接口作转发
• 设置跨域请求
• 配置https服务的请求接口

登陆云服务器

首先你得有一台linux服务器（用你电脑起个本地服务也OK，这里不作这个介绍，咱们用的是云服务器），若是没有，你能够上相关的云服务实验室开 一、2个小时的服务器玩玩也行，这里推荐 阿里云的 https://edu.aliyun.com/lab/ ，和腾讯云的 https://cloud.tencent.com/dev... 。下面是取阿里云开放实验室的服务器演示：

登陆

安装nginx (源码编译安装)

安装nginx 的相关依赖

yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

下载nginx包

wget http://nginx.org/download/ngi...

解压：

tar -zxvf nginx-1.15.8.tar.gz

编译安装

配置nginx安装选项

./configure --prefix=/usr/local/nginx

编译安装

make && make install

启动、查看进程

/usr/local/nginx/sbin/nginx

ps -ef | grep nginx

查看网页，nginx 启动成功。

补充命令：

/usr/local/nginx/sbin/nginx -t

// 查看nginx 配置文件是否语法正确

/usr/local/nginx/sbin/nginx -s reload
// 从新加载nginx 配置

/usr/local/nginx/sbin/nginx -s stop

// 中止nginx

咱们要修改nginx 的基本配置， 作如下步骤：

cd /usr/local/nginx

mkdir vhosts

cd vhosts

vim active.conf

按 esc

再按 :wq 保存并退出

修改nginx.conf

vim /usr/local/nginx/nginx.conf

在倒数第二行添加

include vhosts/*.conf

⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️

（以上nginx 的安装路径，能够本身自由选择）
注意：下面具体的演示案例，是我我的的服务器，使用的是域名访问, 上面的实验服务器的时长限制，没办法作不少的业务操做。

到这里基本上配置好nginx 的使用和扩展，下面就是咱们要利用 nginx 实现一些功能了。

使用nginx

一、给咱们的静态资源启一个web 服务

vim /usr/local/nginx/vhosts/active.conf

将server 模块写进去，

server {

listen 8008;
      server_name localhost;
      root /usr/myfile/dist;
      index index.html;

}

访问：

二、接口转发， 跨域请求

server {

server_name vue.wtodd.wang;
      charset utf-8;
      location /nodejsapi/ {
          proxy_pass http://localhost:5000/;
      }

}

实际请求 http://localhost:5000/ 的接口，被代理到请求该域名de /nodejsapi/ 下
访问：

三、给咱们其余端口启动的nodejs 项目设置反向代理到80端口访问

server {

listen 80;
  server_name csa.scampus.cn;
  location / {
      proxy_pass http://127.0.0.1:8000;
  }

}

页面访问：

实际项目访问地址：

四、配置https服务的请求接口

这里涉及到了https 证书的配置，这里不牵涉这个话题，这里
https://help.aliyun.com/docum...
是阿里云的免费https 证书，可参照该步骤。
有人说，前端为何还要https 的服务？ 微信小程序的服务接口，须要走https 的哇！咱们作demo，不要本身会配置一下吗，免得找后台哇😂

server {
            listen       80;
            server_name  api.scampus.cn;
            rewrite ^ https://$http_host$request_uri? permanent;
    }
    server {
            listen 443;
            ssl_certificate /etc/nginx/ssl/alyca.pem;
            ssl_certificate_key /etc/nginx/ssl/alyca.key;
            server_name api.scampus.cn;
            ssl on;
            ssl_session_timeout 5m;
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
            ssl_prefer_server_ciphers on;
            location / {
                    proxy_pass http://localhost:4000/;
            }
    }

访问：原先真实请求地址

配置 https 访问的地址：

总结：

这里nginx 在前端的使用只是不多的一部分，好比作请求拦截、api版本控制等，但这一些应用也是受到前端处理范围的局限，使得咱们运用的也很少，相信之后随着“大前端“的发展,咱们会更多的使用nginx功能或类nginx 服务功能。

欢迎评阅和指正！我是贰伶迩