前端入门nginx

站长

发表文章数:3062

【WPF学习】第三十一章 WPF命令模型

一.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

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

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

  前端入门nginx

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

  接着我们可以去看下nginx的log日志排查这个问题。

  前端入门nginx

  日志中,我们可以看到一个错误:

    [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。

  (根据个人电脑应用程序运行情况修改一个没有被使用的端口)

   前端入门nginx

 2.部署前端项目

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

  (本来想去克隆一个完整的项目,但这些天在家里电脑连接的是手机热点,网速太慢,试了好几个github上的热门项目,都卡在依赖包安装上,于是就放弃了)

  前端入门nginx

  克隆下来的目录:

   前端入门nginx

  然后安装、打包。

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

  前端入门nginx

   查看index.html的内容

  前端入门nginx

  可以看到,和前面我们浏览器访问展示的内容是一致的。

  这个实际上是nginx的一个默认配置,我们在\nginx-1.16.1\nginx-1.16.1\conf\nginx.conf文件中可以看到这个默认的配置

  前端入门nginx

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

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

  所以这个配置就可以解释为什么我们启动nginx后,在浏览器中访问http://localhost:8088/就可以展示html目录下的index.html页面。

  

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

  前端入门nginx

 

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

  前端入门nginx

 

  然后重启nginx,再次刷新网页

  前端入门nginx

  可以发现,我们的项目已经成功的跑在了nginx服务器上。

  

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

  因此,除了在nginx跑起这个静态项目之外,还需要将nginx和后端的动态数据给整合起来。

  

三.搭建后端服务

  接着,我需要搭建一个后端的服务。

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

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

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

  前端入门nginx

  创建完成后的目录

  前端入门nginx

SOAP与REST API的爱恨情仇

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

  前端入门nginx

  现在后端的服务器就简单的准备好了,我们在浏览器中访问localhost:8099,就可以看到django内置服务器提供的默认页面。

  前端入门nginx

  接着,我们需要将这个后端项目进行一下改动:添加一个后端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/

  前端入门nginx

 

 

    可以看到已经访问到了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这个请求,那么就将这个请求转发给后端服务器,让后端服务器去代理处理。

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

  前端入门nginx

  

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

 

  那么,到此所有的配置和代码修改以完成。

  我们重启nginx,并且开启后端django server(前面其实已经启动的话,就不需要在执行什么操作)。

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

  前端入门nginx

 

 

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

  前端入门nginx

 

   前端入门nginx

 

   前端入门nginx

 

 六.总结  

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

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

  接着后面的第三、四、五节,将这个静态项目改为动态项目并且去请求后端数据,这部分就是nginx反向代理的一个用法。

  

  一个简单的实战操作,希望对大家都所帮助;

  如果有问题,欢迎大家一起讨论~

 

 

  完结!!!

 

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

 微信公众号会分享一些自己日常的东西,包括个人总结呀,吸猫日常呀,同时也会分享一些博客上的前端技术文章。

  前端入门nginx

 

 欢迎大家扫码关注~

  

Java反射

未经允许不得转载:www.xssyun.com作者:站长, 转载或复制请以 超链接形式 并注明出处 xss云之家-资源网,新人技术交流平台,一个湖北娃的个人博客
原文地址:《前端入门nginx》 发布于2020-02-07

分享到:
赞(0) 生成海报

长按图片转发给朋友

投稿赚钱
2020年在家赚取零花钱
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册