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

前段時間，了不起給大家說過如果使用 Docker 發布自己的后端項目，也就不再使用 Jar 包進行項目的發版操作，但是這其中就又涉及到了前端如何發版，為什么這么說，因為資深前端開發，可能知道各種發版內容等，但是對于一般的前端開發來說，走到build后，就已經算是比較不錯了，接下來如果沒有運維的話，那么在不使用 jekins 的情況下，就只能是后端來進行發版了，今天我們講講這個docker 是如何發布前端應用的。

前端發布

現在部署前端服務，肯定少不了 Nginx，了不起就先從這個 Nginx 來開始講一下吧。

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

選擇Nginx的原因有以下幾點：

1. 高性能：Nginx以事件驅動的方式處理請求，能夠高效地處理大量并發連接，適合高負載的場景。
2. 資源消耗低：相比其他Web服務器，Nginx占用的系統資源更少，能夠在相同硬件上處理更多的請求。
3. 可擴展性：Nginx支持模塊化的架構，可以通過添加模塊來擴展功能，滿足不同需求。
4. 反向代理和負載均衡：Nginx內置了反向代理和負載均衡功能，能夠有效地分發請求到多個后端服務器。
5. 高可靠性：Nginx經過長時間的實際應用驗證，穩定性和可靠性較高。

總的來說，Nginx在高性能、低資源消耗、可擴展性和高可靠性方面表現出色，因此被廣泛選擇作為Web服務器和反向代理服務器。

安裝 Nginx

一般的，我們都是使用 Docker 來進行這個 Nginx 的安裝

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

1. 首先，確保你已經安裝了Docker。如果沒有安裝，可以根據你的操作系統在Docker官方網站上找到相應的安裝指南。
2. 打開終端或命令行界面，執行以下命令來拉取Nginx鏡像：

docker pull nginx

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

1. 當鏡像拉取完成后，可以使用以下命令來創建并運行一個Nginx容器：

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

這個命令將創建一個名為mynginx的容器，并將容器的80端口映射到宿主機的80端口，使得可以通過瀏覽器訪問Nginx服務。

1. 現在，你可以通過瀏覽器訪問http://localhost來查看Nginx默認頁面，或者使用宿主機的IP地址來訪問Nginx服務。

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

Nginx 的相關配置

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

其實我們相對來說只需要關注 location 中的相關配置就可以了，

但是對于 Nginx 了不起還是想多說一下這個的。

Nginx 的正向代理

正向代理是指代理服務器代表客戶端向服務器發出請求，然后將服務器的響應返回給客戶端。在Nginx中，可以通過配置代理服務器來實現正向代理功能。具體的配置如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://example.com;  # 將請求轉發到指定的服務器
        proxy_set_header Host $host;    # 設置請求頭中的Host字段
        proxy_set_header X-Real-IP $remote_addr;  # 設置請求頭中的真實IP地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 設置請求頭中的轉發地址
        proxy_set_header X-Forwarded-Proto $scheme;  # 設置請求頭中的協議類型
    }
}

以上配置將客戶端的請求轉發到http://example.com，并且在轉發過程中設置了一些請求頭信息，以便服務器能夠正確處理請求。

Nginx的反向代理

Nginx的反向代理是指Nginx作為客戶端與其他服務器進行通信，并將客戶端的請求轉發到這些服務器上。這種代理隱藏了真實的服務器，客戶端只知道與Nginx通信，而不知道真正處理請求的服務器是誰。反向代理可以用于負載均衡、安全性增強和緩存等方面。

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

location / {
    proxy_pass http://backend_server;
}

其中backend_server是真實服務器的地址。這樣，當客戶端發送請求時，Nginx會將請求轉發到backend_server上，并將響應返回給客戶端。

Nginx 的錯誤頁面配置

在nginx中，可以通過配置自定義錯誤頁面來提供更友好的用戶體驗。你可以在nginx的配置文件中使用error_page指令來指定不同錯誤碼對應的錯誤頁面，例如：

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

上面的配置指定了當出現404錯誤時，顯示404.html頁面；當出現500、502、503、504錯誤時，顯示50x.html頁面。

如果你想為所有的錯誤碼都顯示同一個錯誤頁面，可以這樣配置：

error_page 500 502 503 504 /error.html;

這樣就會將所有500系列的錯誤都顯示error.html頁面。

另外，你也可以使用變量來動態指定錯誤頁面的路徑，例如：

error_page 404 = /custom404.php;

這樣就可以根據具體情況動態指定404錯誤對應的頁面路徑。

了解完這些內容，我們就可以來看一下部署這個前端應用了。

一般如果我們選擇部署前端項目并且使用 Nginx 的話，那么我們不需要單獨的去啟動這個 Nginx ，

而我們使用的則是通過前端的依賴，導入這個 Nginx ,也相當于是依賴這個 Nginx,我們來看看這個 Docker怎么部署，

Docker 部署前端服務

準備工作：

1：準備 Nginx 鏡像

2：準備 Dockerfile 文件

3：準備 Nginx 的配置文件

4：準備前端dist包

5：打包

6:啟動

我們剛才已經說了這個 Nginx 的安裝了，已經準備好了，接下來就是準備 Dockerfile 文件

# 使用nginx鏡像
FROM nginx
# 作者
MAINTAINER zhiyikeji
# 刪除nginx 默認配置
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/

上面的內容就是 Dockerfile 文件中的內容

接下來我們準備 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 .

啟動命令如下：

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

這樣我們就發版完成了，是不是很簡單，但是你要了解Nginx 的相關內容才算是了解了。你學會了么？