前端入门nginx

一.nginx是什么

　　NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server.

　　直译：NGINX是一个免费的、开源的、高性能的HTTP服务器和反向代理，也是一个IMAP/POP3代理服务器。

　　我自动忽略掉全部的定语后，理解NGINX就是一个HTTP服务器（web服务器），反向代理服务器，或者说邮件服务器。

　　之前的时候对tomcat和apache这个两个web服务器有些了解，大体知道tomcat服务器用于java web应用程序，而apache服务器自己只支持处理静态的HTML资源。

　　在nginx官网看了一下，还发现nginx给本身打的标签有：高性能、稳定、功能丰富、配置简单、更少的资源消耗。

　　先无论那些定义和标签，本篇文章就只入门使用一下nginx。

　　因此本篇文章没有原理介绍，也没有复杂的配置，感兴趣的能够试一试。

二.使用nginx部署一个前端静态项目

1.安装启动nginx

　　我本地使用的是window 7 环境，因此下载了Stable version nginx/Windows-1.16.1。

　　下载解压后，最简单粗暴的方式就是直接运行根目录下的nginx.exe。

　　

　　这里须要注意的是，双击运行后会有一个黑色的弹窗一闪而过。

　　假如nginx启动成功，那么在浏览器中访问 http://localhost:80/就能出现nginx服务提供的默认网页。

　　

　　假如浏览器不能正常访问，那说明没有启动成功（也能够查看windows的任务管理器，看是否有nginx这个进程）。

　　接着咱们能够去看下nginx的log日志排查这个问题。

　　

　　日志中，咱们能够看到一个错误：

　　　　[emerg] 6584#6220: bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)

　　到网上搜索，能够很容易知道是由于nginx启动时绑定的默认80端口被占用了。

　　因此，当出现这个问题后，咱们须要修改nginx的配置，将启动绑定的端口号进行修改.

　　本次个人电脑80端口被其余程序占用，所以我将nginx服务的端口改成8088。

　　（根据我的电脑应用程序运行状况修改一个没有被使用的端口）

 　　

 2.部署前端项目

 　　nginx准备好后，接着我从github上将本身之前写的一个文件上传组件小demo克隆到了本地。

　　（原本想去克隆一个完整的项目，但这些天在家里电脑链接的是手机热点，网速太慢，试了好几个github上的热门项目，都卡在依赖包安装上，因而就放弃了）

　　

　　克隆下来的目录：

　　 

　　而后安装、打包。

　　前面说过nginx服务启动后会提供一个默认的网页，那这个网页就是nginx安装根目录中html目录的文件

　　

 　　查看index.html的内容

　　

　　能够看到，和前面咱们浏览器访问展现的内容是一致的。

　　这个其实是nginx的一个默认配置，咱们在\nginx-1.16.1\nginx-1.16.1\conf\nginx.conf文件中能够看到这个默认的配置

　　

　　root配置的是服务器网页默认的根目录位置。

　　index配置的是当访问的url不指定具体的文件时，会默认访问html目录下的index.html。

　　因此这个配置就能够解释为何咱们启动nginx后，在浏览器中访问http://localhost:8088/就能够展现html目录下的index.html页面。

　　

　　接着回到咱们刚才在github上克隆的项目，通过安装和构建以后，会生成最终的上线文件代码。

　　

 

　　我把这个构建后的dist里面的代码放入nginx配置的服务器根目录html下

　　

 

　　而后重启nginx，再次刷新网页

　　

　　能够发现，咱们的项目已经成功的跑在了nginx服务器上。

　　

　　可是呢，只会这些也没啥用，个人这个项目基本上是一个纯静态页面，而实际项目确定会有和后端的动态数据交互。

　　所以，除了在nginx跑起这个静态项目以外，还须要将nginx和后端的动态数据给整合起来。

　　

三.搭建后端服务

　　接着，我须要搭建一个后端的服务。

　　关于后端，为了方便快速，我决定使用的django搭建一个后端的web服务。

　　这里不详细去说django安装和使用，只用它去搭建一个简单的后端服务。

　　首先是使用django-admin命令行工具建立一个项目。

　　

　　建立完成后的目录

　　

　　接着进入E盘的myDemo目录，启动django内置的一个调试开发服务器。

　　

　　如今后端的服务器就简单的准备好了，咱们在浏览器中访问localhost:8099，就能够看到django内置服务器提供的默认页面。

　　

　　接着，咱们须要将这个后端项目进行一下改动：添加一个后端API，返回前面文件上次组件的列表数据。

　　第一步：E:\myDemo\myDemo\目录下新建views.py文件，并添加返回列表数据的API。

 1 from django.shortcuts import render  2 from django.shortcuts import HttpResponse  3  4 import json  5  6 # Create your views here.  7 def tableList(request):  8  9 tablelist = [{ 10 "date": '2016-05-02', 11 "name": '王小虎', 12 "address": '上海市普陀区金沙江路', 13 "attachList":[] 14  }, { 15 "date": '2016-05-04', 16 "name": '王小虎', 17 "address": '上海市普陀区金沙江路', 18 "attachList":[] 19  }, { 20 "date": '2016-05-01', 21 "name": '王小虎', 22 "address": '上海市普陀区金沙江路', 23 "attachList":[] 24  }, { 25 "date": '2016-05-03', 26 "name": '王小虎', 27 "address": '上海市普陀区金沙江路', 28 "attachList":[] 29  }] 30 31 return HttpResponse(json.dumps(tablelist), content_type='application/json')

　　第二步：在E:\myDemo\myDemo\urls.py文件中为该条API配置路由。（新增的代码为19行和22行）

 1 """myDemo URL Configuration  2  3 The `urlpatterns` list routes URLs to views. For more information please see:  4  https://docs.djangoproject.com/en/2.2/topics/http/urls/  5 Examples:  6 Function views  7  1. Add an import: from my_app import views  8  2. Add a URL to urlpatterns: path('', views.home, name='home')  9 Class-based views 10  1. Add an import: from other_app.views import Home 11  2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 Including another URLconf 13  1. Import the include() function: from django.urls import include, path 14  2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 """ 16 from django.contrib import admin 17 from django.urls import path 18 19 from myDemo import views 20 urlpatterns = [ 21 path('admin/', admin.site.urls), 22 path('api/tableList/',views.tableList) 23 ]

　　这两步完成后，在浏览器中访问这个API：http://localhost:8099/api/tableList/

　　

 

 

 　  能够看到已经访问到了API和API返回的数据了。

四.补充前端静态demo

　　前面第二小节中的demo说过基本是一个静态页面，如今须要将页面中表格的数据来源修改成咱们后端的API tableList。

　　本次使用vue推荐的axios实现数据请求，所以首先须要安装axios。

　　接着须要在App.vue中添加数据请求处理代码。

　　注意：

　　在这以前呢，还有一个关键的步骤：在config/index.js中配置同源策略。

　　由于前端nginx提供的服务在localhost:8088上，然后端API提供的服务在localhost:8099上，所以直接使用axios获取数据，会遭到浏览器同源策略的限制。

　　这里直接将/element-upload-demo-master/config/index.js中的配置代码贴出来，配置项的含义在注释中。

　　（这里只贴出重要代码）

 1 module.exports = {  2  dev: {  3  4  proxyTable: {  5 '/api': {  6 target: 'http://localhost:8099', //设置后端API服务器和端口  7 changeOrigin: true,  8  pathRewrite: {  9 '^/api': 'http://localhost:8099'// 配置该选项后，本来的请求url http://localhost:8099/api/tableList/ 可直接写为/api/tableList/ 10  } 11  } 12  }, 13 14  } 15 16 }

　　其中proxyTable就是关于同源策略的配置。

 

　　接着就是App.vue组件的修改了。

　　（这里依旧只将新增的代码贴出）

<script>

import axios from 'axios'; export default { ......省略 mounted(){ const url = '/api/tableList/'; axios.get(url).then(response =>{ this.tableData = response.data; }); }, ......省略 } </script>

　　如今，前端demo已经准备好了，使用npm run build进行构建后，从新将构建好dist目录下的代码放入nginx配置的服务器根目录html下。

五.nginx在配置

　　前面第三节咱们搭建了一个后端的服务器，并新增了一个API为/api/tableList。

　　第四节中将前端文件上传demo进行了修改，新增了访问后端/api/tabelList的代码。

　　那么此时，前端的请求能访问到后端服务提供的API吗？显然是不能的，由于咱们还缺乏一个配置。

　　这个配置就叫反向代理，大体意思就是说nginx本身处理不了/api/tableList这个请求，那么就将这个请求转发给后端服务器，让后端服务器去代理处理。

　　这个配置也比较简单，我就直接贴出来

　　

　　

　　就是直接新增一个location的配置，将/api/这样的请求转发给http://localhost:8099这服务。

 

　　那么，到此全部的配置和代码修改以完成。

　　咱们重启nginx，而且开启后端django server（前面其实已经启动的话，就不须要在执行什么操做）。

　　在浏览器中访问http://localhost:8088

　　

 

 

 　　能够发现，咱们的数据已经成功的展现在界面上，同时查看网络请求数据，也能看到后端API请求成功，数据也成功返回。。

　　

 

 　　

 

 　　

 

 六.总结　　

　　到这里本篇《前端入门nginx》的总结就完成了。

　　其中第二节将一个静态项目部署到了nginx上，而且成功运行，这部分其实就是nginx web服务器的一个用法。

　　接着后面的第3、4、五节，将这个静态项目改成动态项目而且去请求后端数据，这部分就是nginx反向代理的一个用法。

　　

　　一个简单的实战操做，但愿对你们都所帮助；

　　若是有问题，欢迎你们一块儿讨论～

 

 

　　完结！！！

 

　最近做者新开通了一个微信公众号。

　微信公众号会分享一些本身平常的东西，包括我的总结呀，吸猫平常呀，同时也会分享一些博客上的前端技术文章。

 

 

　欢迎你们扫码关注～