–现在阅读的你,如果是个FE,相信你不是个纯切图仔。反之,如果是,该进阶了,老铁!前端的我们,已经不仅仅是做页面,写样式了,我们还需要会做相关的服务器部署。废话不多说,下面就从前端的角度来讲以下nginx的相关使用。给我们的静态资源启一个web 服务给我们的nodejs 的项目设置反向代理,80端口访问给我们的接口做转发设置跨域请求配置https服务的请求接口登录云服务器首先你得有一台linux服务器(用你电脑起个本地服务也OK,这里不做这个介绍,我们用的是云服务器),如果没有,你可以上相关的云服务实验室开 1、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/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/; }}实际请求 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://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 服务功能。欢迎品阅和指正!