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

--现在阅读的你，如果是个FE，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁！前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下nginx的相关使用。给我们的静态资源启一个web 服务给我们的nodejs 的项目设置反向代理，80端口访问给我们的接口做转发设置跨域请求配置https服务的请求接口一、登录云服务器

首先你得有一台linux服务器（用你电脑起个本地服务也OK，这里不做这个介绍，我们用的是云服务器），如果没有，你可以上相关的云服务实验室开 1、2个小时的服务器玩玩也行，这里推荐 阿里云的

下面是取阿里云开放实验室的服务器演示：

登录服务器:

二、安装nginx (源码编译安装)

1、安装nginx 的相关依赖yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

1. 下载nginx包

解压：

tar -zxvf nginx-1.15.8.tar.gz

3.编译安装

3.1、 配置nginx安装选项./configure --prefix=/usr/local/nginx

3.2、编译安装

make && make install

3.3、启动、查看进程

/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/nginxmkdir vhostscd vhostsvim active.conf按 esc在按 :wq 保存并退出修改nginx.confvim /usr/local/nginx/nginx.conf在倒数第二行添加 include vhosts/*.conf

（以上nginx 的安装路径，可以自己自由选择），

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

注意：下面具体的演示案例，是我个人的服务器，使用的是域名访问, 上面的实验服务器的时长限制，没办法做很多的业务操作。====到这里基本上配置好nginx 的使用和扩展，下面就是我们要利用 nginx 实现一些功能了。====三、使用nginx1、给我们的静态资源启一个web 服务vim /usr/local/nginx/vhosts/active.conf ，将server 模块写进去，server {

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

}

访问：

2、接口转发， 跨域请求

server {

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

}

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

3、给我们其他端口启动的nodejs 项目设置反向代理到80端口访问

server {

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

}

页面访问：

实际项目访问地址：

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

这里涉及到了https 证书的配置，这里不牵涉这个话题，这里 是阿里云的免费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 服务功能。原文地址