整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          使用nginx部署前端html等靜態(tài)頁面

          、前言

          最近想要部署一個純前端的靜態(tài)頁面,項目的內(nèi)容很簡單,也就是一些簡單的html、css、js、jpg、mp3等靜態(tài)資源,不涉及后端開發(fā)。

          之前一直都是使用Tomcat來部署項目的,因為涉及后端接口等方面的內(nèi)容,這次再用它來部署純前端的東西,顯得大材小用,過于笨重。

          此時,使用nginx,便是最合適的選擇了,輕量、簡單、靈活。

          二、nginx安裝下載

          我的服務(wù)器是在騰訊云上買的,操作系統(tǒng)是Centos,Linux中的一種。

          安裝使用自帶的命令yum即可

          yum install nginx

          三、nginx配置

          安裝完,nginx的相關(guān)目錄就都有了,最重要的一個配置文件nginx.conf在于

          /etc/nginx/nginx.conf

          我們一般在這里配置完項目的相關(guān)信息的配置,如訪問權(quán)限、訪問端口、訪問機器、訪問項目、訪問文件等:

          #1.注意user使用root,以便輕松訪問任何文件
          user root;
          worker_processes auto;
          error_log /var/log/nginx/error.log;
          pid /run/nginx.pid;
          
          # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
          include /usr/share/nginx/modules/*.conf;
          
          events {
              worker_connections 1024;
          }
          
          http {
              log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                                '$status $body_bytes_sent "$http_referer" '
                                '"$http_user_agent" "$http_x_forwarded_for"';
          
              access_log  /var/log/nginx/access.log  main;
          
              sendfile            on;
              tcp_nopush          on;
              tcp_nodelay         on;
              keepalive_timeout   65;
              types_hash_max_size 2048;
          
              include             /etc/nginx/mime.types;
              default_type        application/octet-stream;
          
              include /etc/nginx/conf.d/*.conf;
          
              server {
              #2.這里監(jiān)聽我們常用的80端口
                  listen       80;
              #3.這里配置機器地址,一般是本機localhost
                  server_name  localhost;
              #4.這里配置項目根路徑
                  root         /root/love;
              #5.這里配置項目的訪問頁面
          	   index        index.html; 
                  # Load configuration files for the default server block.
                  include /etc/nginx/default.d/*.conf;
          
                location / {
                  }
          
                  error_page 404 /404.html;
                  location = /404.html {
                  }
          
                  error_page 500 502 503 504 /50x.html;
                  location = /50x.html {
                  }
              }
          }

          四、nginx命令

          配置完畢,我們便可啟動nginx,完成部署,如果期間修改配置文件,我們則在reload下即可,下面羅列下幾個常用的命令:

          篇文章主要介紹了關(guān)于使用 Nginx 部署靜態(tài)頁面的方法,有著一定的參考價值,現(xiàn)在分享給大家,有需要的朋友可以參考一下

          Nginx 介紹

          Nginx 是俄羅斯人編寫的十分輕量級的 HTTP 服務(wù)器, Nginx,它的發(fā)音為 “ engine X ”,是一個高性能的 HTTP 和反向代理服務(wù)器,同時也是一個 IMAP/ POP3/ SMTP 代理服務(wù)器。Nginx 是由俄羅斯人 Igor Sysoev 為俄羅斯訪問量第二的 Rambler.ru 站點開發(fā)的,它已經(jīng)在該站點運行超過兩年半了。Igor Sysoev 在建立的項目時,使用基于 BSD 許可。

          Nginx 作為 HTTP 服務(wù)器,有以下幾項基本特性:

          1. 處理靜態(tài)文件,索引文件以及自動索引;打開文件描述符緩沖。
          2. 無緩存的反向代理加速,簡單的負載均衡和容錯。
          3. FastCGI,簡單的負載均衡和容錯。
          4. 模塊化的結(jié)構(gòu)。包括 gzipping, byte ranges, chunked responses,以及 SSI-filter 等 filter。如果由 Fast CGI 或其它代理服務(wù)器處理單頁中存在的多個 SSI,則這項處理可以并行運行,而不需要相互等待。
          5. 支持 SSL 和 TLSSNI。

          即 Nginx 的優(yōu)點:輕量、高性能、并發(fā)能力強。用來部署靜態(tài)頁面也是相當便捷。

          這種高性能得益于 Nginx 的框架。在 Nginx 啟動后,會有一個 master 進程和多個 worker 進程。master 進程主要用來管理 worker 進程,包含:接收來自外界的信號,向各 worker 進程發(fā)送信號,監(jiān)控 worker 進程的運行狀態(tài),當 worker 進程退出后(異常情況下),會自動重新啟動新的 worker 進程。而基本的網(wǎng)絡(luò)事件,則是放在 worker 進程中來處理的。多個 worker 進程之間是對等的,他們同等競爭來自客戶端的請求,各進程互相之間是獨立的。一個請求,只可能在一個 worker 進程中處理,一個 worker 進程,不可能處理其它進程的請求。worker 進程的個數(shù)是可以設(shè)置的,一般我們會設(shè)置與機器 cpu 核數(shù)一致,這與 Nginx 的進程模型以及事件處理模型有關(guān)。

          為何選用 Nginx

          說到 Nginx,可能第一反應(yīng)就是 反向代理 和 負載均衡 了。那么什么是 反向代理,什么又是 負載均衡 呢?

          反向代理

          首先了解一下什么是 前向代理 。代理 (Proxy) 也稱網(wǎng)絡(luò)代理,是一種特殊的網(wǎng)絡(luò)服務(wù),通俗來講,就是在客戶端和目標服務(wù)器之間的充當中間人,接收客戶端的請求,再根據(jù)客戶端請求向目標服務(wù)器發(fā)起相應(yīng)的請求,從目標服務(wù)器獲得指定資源后返回給客戶端。且代理服務(wù)器可以對目標服務(wù)器的資源下載至本地緩存,如果客戶端所要獲取的資源在代理服務(wù)器的緩存之中,則代理服務(wù)器并不會再向目標服務(wù)器發(fā)起請求,而是直接返回緩存的資源。

          其實代理服務(wù)器非常常見,就比如因為 GWF 而存在的一些科學(xué)上網(wǎng)的代理商,就是利用國外服務(wù)器作為代理服務(wù)器,從而正確解析域名來實現(xiàn)科學(xué)上網(wǎng)。代理服務(wù)器也可以實現(xiàn)隱藏真實 IP,比如著名的 Tor (洋蔥路由器)就是通過多重代理和一些加密技術(shù)來實現(xiàn)匿名交流。

          而 反向代理 則是在服務(wù)器端作為代理使用,而不是客戶端。也就是說,前向代理 是代理內(nèi)部網(wǎng)絡(luò)用戶訪問 Internet 上服務(wù)器的連接請求,反向代理 是以代理服務(wù)器來接受 Internet 上的連接請求,然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器,并將從服務(wù)器上得到的結(jié)果返回給 Internet 上請求連接的客戶端,此時的代理服務(wù)器對外就表現(xiàn)為一個服務(wù)器。

          負載均衡

          反向代理負載均衡技術(shù)是把將來自 Internet 上的連接請求以反向代理的方式動態(tài)地轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的多臺服務(wù)器進行處理,從而達到負載均衡的目的。

          真巧, Nginx 都做到了

          Nginx 作為一個優(yōu)秀的代理服務(wù)器,反向代理和負載均衡必然是都具備的。想要更詳細得了解這方面的知識和使用方法,可參見文末給出的參考資料: Nginx 入門指南。

          Nginx 安裝

          本人使用的是騰訊云的服務(wù)器,版本為: Ubuntu Server 14.04.1 LTS 32 位。

          $ apt-get install nginx

          Mac OS 系統(tǒng)參考這篇文章:Installing Nginx in Mac OS X

          Nginx 配置

          簡單地配置 Nginx 的配置文件,以便在啟動 Nginx 時去啟用這些配置。而本文的重點也是于此。

          Nginx 的配置系統(tǒng)由一個主配置文件和其他一些輔助的配置文件構(gòu)成。這些配置文件均是純文本文件,一般地,我們只需要配置主配置文件就行了。例如在我的服務(wù)器上是在:/etc/nginx/nginx.conf 。

          指令上下文

          nginx.conf 中的配置信息,根據(jù)其邏輯上的意義,對它們進行了分類,也就是分成了多個作用域,或者稱之為配置指令上下文。不同的作用域含有一個或者多個配置項。

          其中每個配置項由配置指令和指令參數(shù)構(gòu)成,形成一個鍵值對,# 后面地為注釋,理解起來也非常容易。

          一般配置文件的結(jié)構(gòu)和通用配置如下:

          user www-data; # 運行 nginx 的所屬組和所有者

          worker_processes 1; # 開啟一個 nginx 工作進程,一般 CPU 幾核就寫幾

          pid /run/nginx.pid; # pid 路徑

          events {

          worker_connections 768; # 一個進程能同時處理 768 個請求

          # multi_accept on;

          }

          # 與提供 http 服務(wù)相關(guān)的配置參數(shù),一般默認配置就可以,主要配置在于 http 上下文里的 server 上下文

          http {

          ##

          # Basic Settings

          ##

          ... 此處省略通用默認配置

          ##

          # Logging Settings

          ##

          ... 此處省略通用默認配置

          ##

          # Gzip Settings

          ##

          ... 此處省略通用默認配置

          ##

          # nginx-naxsi config

          ##

          ... 此處省略通用默認配置

          ##

          # nginx-passenger config

          ##

          ... 此處省略通用默認配置

          ##

          # Virtual Host Configs

          ##

          ... 此處省略通用默認配置

          # 此時,在此添加 server 上下文,開始配置一個域名,一個 server 配置段一般對應(yīng)一個域名

          server {

          listen 80; # 監(jiān)聽本機所有 ip 上的 80 端口

          server_name _; # 域名:www.example.com 這里 "_" 代表獲取匹配所有

          root /home/filename/; # 站點根目錄

          location / { # 可有多個 location 用于配置路由地址

          try_files index.html =404;

          }

          }

          # 郵箱的配置,因為用不到,所以把這個 mail 上下文給注釋掉

          #mail {

          # # See sample authentication script at:

          # # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript

          #

          # # auth_http localhost/auth.php;

          # # pop3_capabilities "TOP" "USER";

          # # imap_capabilities "IMAP4rev1" "UIDPLUS";

          #

          # server {

          # listen localhost:110;

          # protocol pop3;

          # proxy on;

          # }

          #

          # server {

          # listen localhost:143;

          # protocol imap;

          # proxy on;

          # }

          #}

          這里需要注意的是 http 上下文里的 server 上下文。

          server {

          listen 80; # 監(jiān)聽本機所有 ip 上的 80 端口

          server_name _; # 域名:www.example.com 這里 "_" 代表獲取匹配所有

          root /home/filename/; # 站點根目錄

          location / { # 可有多個 location 用于配置路由地址

          try_files index.html =404;

          }

          }

          這里的 root 字段最好寫在 location 字段的外邊,防止出現(xiàn)無法加載 css、js 的情況。因為 css、js 的加載并不是自動的,nginx 無法執(zhí)行,需要額外的配置來返回資源,所以,對于靜態(tài)頁面的部署,這樣做是最為方便的。

          這里對 root 作進一步解釋,例如在服務(wù)器上有 /home/zhihu/ 目錄,其下有 index.html 文件和 css/ 以及 img/ , root /home/zhihu/; 就將指定服務(wù)器加載資源時是在 /home/zhihu/ 下查找。

          其次, location 后的匹配分多種,其各類匹配方式優(yōu)先級也各不相同。這里列舉一精確匹配例子:

          server {

          listen 80;

          server_name _;

          root /home/zhihu/;

          location = /zhihu {

          rewrite ^/.* / break;

          try_files index.html =404;

          }

          }

          此時,訪問 www.example.com/zhihu 就會加載 zhihu.html 出來了。由于 location 的精確匹配,只有訪問 www.example.com/zhihu 這個路由時才會正確響應(yīng),而且此時要通過 rewrite 正則匹配,把 /zhihu 解析替換成原來的 / 。關(guān)于更多 location 字段用法,可以在文章最后給出的參考資料中查看。

          關(guān)于使用 nginx 部署靜態(tài)頁面,最簡單便捷的配置方法

          上面說了挺多關(guān)于配置的說明,下面推薦一種個人認為最為便捷的配置方法。(特此感謝 guyskk 學(xué)長的答疑解惑)

          首先創(chuàng)建一個目錄,例如: /home/ubuntu/website 然后在這個 website 文件夾下可以放置你需要部署的靜態(tài)頁面文件,例如 website 下我有 google、zhihu、fenghuang 這三個文件夾,其中 server 字段配置如下:

          server {

          listen 80;

          server_name _;

          root /home/ubuntu/website;

          index index.html;

          }

          這里每個文件夾下面的靜態(tài)頁面文件名都是 index.html ,我以前有個很不好的習(xí)慣,比如 zhihu 頁面就喜歡命名為 zhihu.html ,但就從前端來看,這也是不符合規(guī)范的。

          這樣配置的話,例如當你訪問 www.showzeng.cn/google/ 時,nginx 就會去 website 目錄下的 google 文件夾下尋找到 index.html 并把 google 頁面返回,同理,訪問 www.showzeng.cn/zhihu/ 時,會尋找到 zhihu 文件夾下的 index.html 并把 zhihu 頁面返回。

          而在 zhihu、google 、fenghuang 文件夾的同級目錄上,再添加你的域名首頁 index.html 時,訪問 www.example.com 時就會返回了。

          這里唯一美中不足的是,訪問域名中 www.showzeng.cn/zhihu 末尾會自動加上 / ,在瀏覽器中按 F12 調(diào)試會發(fā)現(xiàn) www.showzeng.cn/zhihu 為 301 狀態(tài)碼,因為 index.html 是在 zhihu/ 文件夾下,所以在搜索過程中會重定向到 www.showzeng.cn/zhihu/ ,起初我是接受不了的,那一 / 看起來太難受了,但是只要一想到要一個一個 location 字段去匹配,我一下子就接受了。不知道你怎么看,反正我是接受了。

          Nginx 啟動運行

          $ sudo nginx -s reload

          使用 reload 方法不用重啟服務(wù),直接重新加載配置文件,客戶端感覺不到服務(wù)異常,實現(xiàn)平滑切換。當然你也可以重新啟動 nginx 服務(wù)。

          $ sudo service nginx restart

          Nginx 停止運行

          $ sudo nginx -s stop

          相關(guān)推薦:

          nginx應(yīng)用:使用nginx進行負載均衡

          使用nginx搭建高可用,高并發(fā)的wcf集群

          以上就是使用 Nginx 部署靜態(tài)頁面的方法的詳細內(nèi)容,更多請關(guān)注其它相關(guān)文章!

          更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦!

          建Http靜態(tài)服務(wù)器環(huán)境

          搭建靜態(tài)網(wǎng)站,首先需要部署環(huán)境。下面的步驟,將告訴大家如何在服務(wù)器上通過 Nginx 部署 HTTP 靜態(tài)服務(wù)。

          安裝 Nginx

          在 CentOS 上,可直接使用 yum 來安裝 Nginx

          yum install nginx -y

          安裝完成后,使用 nginx 命令啟動 Nginx:

          nginx

          此時,訪問 http://你的域名 可以看到 Nginx 的測試頁面


          如果無法訪問,請重試用 nginx -s reload 命令重啟 Nginx

          配置靜態(tài)服務(wù)器訪問路徑

          外網(wǎng)用戶訪問服務(wù)器的 Web 服務(wù)由 Nginx 提供,Nginx 需要配置靜態(tài)資源的路徑信息才能通過 url 正確訪問到服務(wù)器上的靜態(tài)資源。

          打開 Nginx 的默認配置文件 /etc/nginx/nginx.conf ,修改 Nginx 配置,將默認的 root /usr/share/nginx/html; 修改為: root /data/www;,如下:

          示例代碼:/etc/nginx/nginx.conf
          user nginx;
          worker_processes auto;
          error_log /var/log/nginx/error.log;
          pid /run/nginx.pid;

          include /usr/share/nginx/modules/*.conf;

          events {
          worker_connections 1024;
          }

          http {
          log_format main '$remote_addr - $remote_user [$time_local] "$request" '
          '$status $body_bytes_sent "$http_referer" '
          '"$http_user_agent" "$http_x_forwarded_for"';

          access_log /var/log/nginx/access.log main;

          sendfile on;
          tcp_nopush on;
          tcp_nodelay on;
          keepalive_timeout 65;
          types_hash_max_size 2048;

          include /etc/nginx/mime.types;
          default_type application/octet-stream;

          include /etc/nginx/conf.d/*.conf;

          server {
          listen 80 default_server;
          listen [::]:80 default_server;
          server_name _;
          root /data/www;

          include /etc/nginx/default.d/*.conf;

          location / {
          }

          error_page 404 /404.html;
          location = /40x.html {
          }

          error_page 500 502 503 504 /50x.html;
          location = /50x.html {
          }
          }

          }

          配置文件將 /data/www/static 作為所有靜態(tài)資源請求的根路徑,如訪問: http://<您的域名>/static/index.js,將會去 /data/www/static/ 目錄下去查找 index.js。現(xiàn)在我們需要重啟 Nginx 讓新的配置生效,如:

          nginx -s reload

          重啟后,現(xiàn)在我們應(yīng)該已經(jīng)可以使用我們的靜態(tài)服務(wù)器了,現(xiàn)在讓我們新建一個靜態(tài)文件,查看服務(wù)是否運行正常。

          首先讓我們在 /data 目錄 下創(chuàng)建 www 目錄,如:

          mkdir -p /data/www

          創(chuàng)建第一個靜態(tài)文件

          在 /data/www 目錄下創(chuàng)建我們的第一個靜態(tài)文件 index.html

          示例代碼:/data/www/index.html
          <!DOCTYPE html>
          <html lang="zh">
          <head>
          <meta charset="UTF-8">
          <title>第一個靜態(tài)文件</title>
          </head>
          <body>
          Hello world!
          </body>
          </html>

          現(xiàn)在訪問 http://<您的域名>/index.html 應(yīng)該可以看到頁面輸出 [Hello world!]

          到此,一個基于 Nginx 的靜態(tài)服務(wù)器就搭建完成了,現(xiàn)在所有放在 /data/www 目錄下的的靜態(tài)資源都可以直接通過域名訪問。


          如果無顯示,請刷新瀏覽器頁面

          完成實驗


          主站蜘蛛池模板: 亚洲一区精品伊人久久伊人| 亚洲AV无码一区二区三区在线观看| 亚洲国产韩国一区二区| 99久久精品午夜一区二区| 一区二区三区免费视频播放器| 亚洲国产精品一区二区久| 亚洲色无码一区二区三区| 国产日韩一区二区三区在线观看| 呦系列视频一区二区三区| 亚洲熟女少妇一区二区| 日韩经典精品无码一区| 久久精品无码一区二区三区不卡| 文中字幕一区二区三区视频播放 | 久久久人妻精品无码一区| 少妇人妻精品一区二区三区| 国产伦精品一区二区免费| 亚洲AV无码一区二区二三区入口| 一区二区三区免费电影| 中文无码一区二区不卡αv| 成人精品一区二区三区电影| 亚洲一区AV无码少妇电影| 亚洲AV成人精品日韩一区| 后入内射国产一区二区| 国精产品一区二区三区糖心| 国产韩国精品一区二区三区久久| 亚洲高清日韩精品第一区| 亚洲国产成人久久综合一区77| 久久精品无码一区二区三区日韩 | 亚洲bt加勒比一区二区| 成人乱码一区二区三区av| 丰满人妻一区二区三区视频 | 亚洲AV无码一区二区一二区| 国产精品伦一区二区三级视频 | 一区国产传媒国产精品| 精品女同一区二区三区免费站 | 国产精品无码一区二区三区毛片| 亚洲AV日韩综合一区| 日韩精品中文字幕视频一区| 国产免费av一区二区三区| 亚洲国产激情一区二区三区| 中文字幕在线精品视频入口一区|