一文教你學(xué)會(huì)使用Nginx-魔扣目錄

前段時(shí)間，了不起給大家說(shuō)過(guò)如果使用 Docker 發(fā)布自己的后端項(xiàng)目，也就不再使用 Jar 包進(jìn)行項(xiàng)目的發(fā)版操作，但是這其中就又涉及到了前端如何發(fā)版，為什么這么說(shuō)，因?yàn)橘Y深前端開(kāi)發(fā)，可能知道各種發(fā)版內(nèi)容等，但是對(duì)于一般的前端開(kāi)發(fā)來(lái)說(shuō)，走到build后，就已經(jīng)算是比較不錯(cuò)了，接下來(lái)如果沒(méi)有運(yùn)維的話，那么在不使用 jekins 的情況下，就只能是后端來(lái)進(jìn)行發(fā)版了，今天我們講講這個(gè)docker 是如何發(fā)布前端應(yīng)用的。

前端發(fā)布

現(xiàn)在部署前端服務(wù)，肯定少不了 Nginx，了不起就先從這個(gè) Nginx 來(lái)開(kāi)始講一下吧。

“Nginx是一款輕量級(jí)的HTTP服務(wù)器，采用事件驅(qū)動(dòng)的異步非阻塞處理方式框架，這讓其具有極好的IO性能，時(shí)常用于服務(wù)端的反向代理和負(fù)載均衡。”

選擇Nginx的原因有以下幾點(diǎn)：

高性能：Nginx以事件驅(qū)動(dòng)的方式處理請(qǐng)求，能夠高效地處理大量并發(fā)連接，適合高負(fù)載的場(chǎng)景。
資源消耗低：相比其他Web服務(wù)器，Nginx占用的系統(tǒng)資源更少，能夠在相同硬件上處理更多的請(qǐng)求。
可擴(kuò)展性：Nginx支持模塊化的架構(gòu)，可以通過(guò)添加模塊來(lái)擴(kuò)展功能，滿足不同需求。
反向代理和負(fù)載均衡：Nginx內(nèi)置了反向代理和負(fù)載均衡功能，能夠有效地分發(fā)請(qǐng)求到多個(gè)后端服務(wù)器。
高可靠性：Nginx經(jīng)過(guò)長(zhǎng)時(shí)間的實(shí)際應(yīng)用驗(yàn)證，穩(wěn)定性和可靠性較高。

總的來(lái)說(shuō)，Nginx在高性能、低資源消耗、可擴(kuò)展性和高可靠性方面表現(xiàn)出色，因此被廣泛選擇作為Web服務(wù)器和反向代理服務(wù)器。

安裝 Nginx

一般的，我們都是使用 Docker 來(lái)進(jìn)行這個(gè) Nginx 的安裝

要在Docker中安裝Nginx，可以按照以下步驟進(jìn)行操作：

首先，確保你已經(jīng)安裝了Docker。如果沒(méi)有安裝，可以根據(jù)你的操作系統(tǒng)在Docker官方網(wǎng)站上找到相應(yīng)的安裝指南。
打開(kāi)終端或命令行界面，執(zhí)行以下命令來(lái)拉取Nginx鏡像：

docker pull nginx

這將從Docker Hub上拉取最新的Nginx鏡像到你的本地環(huán)境。

當(dāng)鏡像拉取完成后，可以使用以下命令來(lái)創(chuàng)建并運(yùn)行一個(gè)Nginx容器：

docker run --name mynginx -d -p 80:80 nginx

這個(gè)命令將創(chuàng)建一個(gè)名為mynginx的容器，并將容器的80端口映射到宿主機(jī)的80端口，使得可以通過(guò)瀏覽器訪問(wèn)Nginx服務(wù)。

現(xiàn)在，你可以通過(guò)瀏覽器訪問(wèn)http://localhost來(lái)查看Nginx默認(rèn)頁(yè)面，或者使用宿主機(jī)的IP地址來(lái)訪問(wèn)Nginx服務(wù)。

這樣就完成了在Docker中安裝Nginx的過(guò)程。

Nginx 的相關(guān)配置

worker_processes  1；                   # worker進(jìn)程的數(shù)量
events {                                 # 事件區(qū)塊開(kāi)始
    worker_connections  1024；            # 每個(gè)worker進(jìn)程支持的最大連接數(shù)
}                                  # 事件區(qū)塊結(jié)束
http {                              # HTTP區(qū)塊開(kāi)始
    include       mime.types；            # Nginx支持的媒體類型庫(kù)文件
    default_type  Application/octet-stream；            # 默認(rèn)的媒體類型
    sendfile        on；           # 開(kāi)啟高效傳輸模式
    keepalive_timeout  65；          # 連接超時(shí)
    server {                              # 第一個(gè)Server區(qū)塊開(kāi)始，表示一個(gè)獨(dú)立的虛擬主機(jī)站點(diǎn)
        listen       80；                 # 提供服務(wù)的端口，默認(rèn)80
        server_name  localhost；       # 提供服務(wù)的域名主機(jī)名
        location / {                      # 第一個(gè)location區(qū)塊開(kāi)始
            root   html；          # 站點(diǎn)的根目錄，相當(dāng)于Nginx的安裝目錄
            index  index.html index.htm；        # 默認(rèn)的首頁(yè)文件，多個(gè)用空格分開(kāi)
        }                      # 第一個(gè)location區(qū)塊結(jié)果
        error_page   500502503504  /50x.html；          # 出現(xiàn)對(duì)應(yīng)的http狀態(tài)碼時(shí)，使用50x.html回應(yīng)客戶
        location = /50x.html {                   # location區(qū)塊開(kāi)始，訪問(wèn)50x.html
            root   html；                       # 指定對(duì)應(yīng)的站點(diǎn)目錄為html
        }
    }  
    ......

其實(shí)我們相對(duì)來(lái)說(shuō)只需要關(guān)注 location 中的相關(guān)配置就可以了，

但是對(duì)于 Nginx 了不起還是想多說(shuō)一下這個(gè)的。

Nginx 的正向代理

正向代理是指代理服務(wù)器代表客戶端向服務(wù)器發(fā)出請(qǐng)求，然后將服務(wù)器的響應(yīng)返回給客戶端。在Nginx中，可以通過(guò)配置代理服務(wù)器來(lái)實(shí)現(xiàn)正向代理功能。具體的配置如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://example.com;  # 將請(qǐng)求轉(zhuǎn)發(fā)到指定的服務(wù)器
        proxy_set_header Host $host;    # 設(shè)置請(qǐng)求頭中的Host字段
        proxy_set_header X-Real-IP $remote_addr;  # 設(shè)置請(qǐng)求頭中的真實(shí)IP地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 設(shè)置請(qǐng)求頭中的轉(zhuǎn)發(fā)地址
        proxy_set_header X-Forwarded-Proto $scheme;  # 設(shè)置請(qǐng)求頭中的協(xié)議類型
    }
}

以上配置將客戶端的請(qǐng)求轉(zhuǎn)發(fā)到http://example.com，并且在轉(zhuǎn)發(fā)過(guò)程中設(shè)置了一些請(qǐng)求頭信息，以便服務(wù)器能夠正確處理請(qǐng)求。

Nginx的反向代理

Nginx的反向代理是指Nginx作為客戶端與其他服務(wù)器進(jìn)行通信，并將客戶端的請(qǐng)求轉(zhuǎn)發(fā)到這些服務(wù)器上。這種代理隱藏了真實(shí)的服務(wù)器，客戶端只知道與Nginx通信，而不知道真正處理請(qǐng)求的服務(wù)器是誰(shuí)。反向代理可以用于負(fù)載均衡、安全性增強(qiáng)和緩存等方面。

在Nginx中配置反向代理可以使用以下指令：

location / {
    proxy_pass http://backend_server;
}

其中backend_server是真實(shí)服務(wù)器的地址。這樣，當(dāng)客戶端發(fā)送請(qǐng)求時(shí)，Nginx會(huì)將請(qǐng)求轉(zhuǎn)發(fā)到backend_server上，并將響應(yīng)返回給客戶端。

Nginx 的錯(cuò)誤頁(yè)面配置

在nginx中，可以通過(guò)配置自定義錯(cuò)誤頁(yè)面來(lái)提供更友好的用戶體驗(yàn)。你可以在nginx的配置文件中使用error_page指令來(lái)指定不同錯(cuò)誤碼對(duì)應(yīng)的錯(cuò)誤頁(yè)面，例如：

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;

上面的配置指定了當(dāng)出現(xiàn)404錯(cuò)誤時(shí)，顯示404.html頁(yè)面；當(dāng)出現(xiàn)500、502、503、504錯(cuò)誤時(shí)，顯示50x.html頁(yè)面。

如果你想為所有的錯(cuò)誤碼都顯示同一個(gè)錯(cuò)誤頁(yè)面，可以這樣配置：

error_page 500 502 503 504 /error.html;

這樣就會(huì)將所有500系列的錯(cuò)誤都顯示error.html頁(yè)面。

另外，你也可以使用變量來(lái)動(dòng)態(tài)指定錯(cuò)誤頁(yè)面的路徑，例如：

error_page 404 = /custom404.php;

這樣就可以根據(jù)具體情況動(dòng)態(tài)指定404錯(cuò)誤對(duì)應(yīng)的頁(yè)面路徑。

了解完這些內(nèi)容，我們就可以來(lái)看一下部署這個(gè)前端應(yīng)用了。

一般如果我們選擇部署前端項(xiàng)目并且使用 Nginx 的話，那么我們不需要單獨(dú)的去啟動(dòng)這個(gè) Nginx ，

而我們使用的則是通過(guò)前端的依賴，導(dǎo)入這個(gè) Nginx ,也相當(dāng)于是依賴這個(gè) Nginx,我們來(lái)看看這個(gè) Docker怎么部署，

Docker 部署前端服務(wù)

準(zhǔn)備工作：

1：準(zhǔn)備 Nginx 鏡像

2：準(zhǔn)備 Dockerfile 文件

3：準(zhǔn)備 Nginx 的配置文件

4：準(zhǔn)備前端dist包

5：打包

6:啟動(dòng)

我們剛才已經(jīng)說(shuō)了這個(gè) Nginx 的安裝了，已經(jīng)準(zhǔn)備好了，接下來(lái)就是準(zhǔn)備 Dockerfile 文件

# 使用nginx鏡像
FROM nginx
# 作者
MAINTAINER zhiyikeji
# 刪除nginx 默認(rèn)配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我們自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把剛才生成dist文件夾下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/

上面的內(nèi)容就是 Dockerfile 文件中的內(nèi)容

接下來(lái)我們準(zhǔn)備 nginx 的配置文件 default.conf

server {
    listen       17878;
    server_name  192.168.10.1;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
location /api/{
        proxy_pass   http://192.168.10.1:18081/;
        }

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}

前端dist包我們直接沖前端要一份即可。

打包命令如下：

docker build -t vue-app .

啟動(dòng)命令如下：

docker run -d --name vue-app -p 17878:19529 vue-app

這樣我們就發(fā)版完成了，是不是很簡(jiǎn)單，但是你要了解Nginx 的相關(guān)內(nèi)容才算是了解了。你學(xué)會(huì)了么？

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡