前端入門nginx

時間 2020-02-08

標籤前端入門 nginx 欄目 Nginx 简体版

原文原文鏈接

一.nginx是什麼

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

　　直譯：NGINX是一個免費的、開源的、高性能的HTTP服務器和反向代理，也是一個IMAP/POP3代理服務器。前端

　　我自動忽略掉全部的定語後，理解NGINX就是一個HTTP服務器（web服務器），反向代理服務器，或者說郵件服務器。vue

　　之前的時候對tomcat和apache這個兩個web服務器有些瞭解，大體知道tomcat服務器用於java web應用程序，而apache服務器自己只支持處理靜態的HTML資源。java

　　在nginx官網看了一下，還發現nginx給本身打的標籤有：高性能、穩定、功能豐富、配置簡單、更少的資源消耗。ios

　　先無論那些定義和標籤，本篇文章就只入門使用一下nginx。nginx

　　因此本篇文章沒有原理介紹，也沒有複雜的配置，感興趣的能夠試一試。git

二.使用nginx部署一個前端靜態項目

1.安裝啓動nginxgithub

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

　　下載解壓後，最簡單粗暴的方式就是直接運行根目錄下的nginx.exe。apache

　　這裏須要注意的是，雙擊運行後會有一個黑色的彈窗一閃而過。

　　假如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下。