前段時間，了不起給大家說過如果使用 Docker 發(fā)布自己的后端項目，也就不再使用 Jar 包進(jìn)行項目的發(fā)版操作，但是這其中就又涉及到了前端如何發(fā)版，為什么這么說，因為資深前端開發(fā)，可能知道各種發(fā)版內(nèi)容等，但是對于一般的前端開發(fā)來說，走到build后，就已經(jīng)算是比較不錯了，接下來如果沒有運(yùn)維的話，那么在不使用 jekins 的情況下，就只能是后端來進(jìn)行發(fā)版了，今天我們講講這個docker 是如何發(fā)布前端應(yīng)用的。
前端發(fā)布
現(xiàn)在部署前端服務(wù)，肯定少不了 Nginx，了不起就先從這個 Nginx 來開始講一下吧。
“Nginx是一款輕量級的HTTP服務(wù)器，采用事件驅(qū)動的異步非阻塞處理方式框架，這讓其具有極好的IO性能，時常用于服務(wù)端的反向代理和負(fù)載均衡。”
選擇Nginx的原因有以下幾點(diǎn)：
- 高性能：Nginx以事件驅(qū)動的方式處理請求，能夠高效地處理大量并發(fā)連接，適合高負(fù)載的場景。
- 資源消耗低：相比其他Web服務(wù)器，Nginx占用的系統(tǒng)資源更少，能夠在相同硬件上處理更多的請求。
- 可擴(kuò)展性：Nginx支持模塊化的架構(gòu)，可以通過添加模塊來擴(kuò)展功能，滿足不同需求。
- 反向代理和負(fù)載均衡：Nginx內(nèi)置了反向代理和負(fù)載均衡功能，能夠有效地分發(fā)請求到多個后端服務(wù)器。
- 高可靠性：Nginx經(jīng)過長時間的實際應(yīng)用驗證，穩(wěn)定性和可靠性較高。
總的來說，Nginx在高性能、低資源消耗、可擴(kuò)展性和高可靠性方面表現(xiàn)出色，因此被廣泛選擇作為Web服務(wù)器和反向代理服務(wù)器。
安裝 Nginx
一般的，我們都是使用 Docker 來進(jìn)行這個 Nginx 的安裝
要在Docker中安裝Nginx，可以按照以下步驟進(jìn)行操作：
- 首先，確保你已經(jīng)安裝了Docker。如果沒有安裝，可以根據(jù)你的操作系統(tǒng)在Docker官方網(wǎng)站上找到相應(yīng)的安裝指南。
- 打開終端或命令行界面，執(zhí)行以下命令來拉取Nginx鏡像：
docker pull nginx
這將從Docker Hub上拉取最新的Nginx鏡像到你的本地環(huán)境。
- 當(dāng)鏡像拉取完成后，可以使用以下命令來創(chuàng)建并運(yùn)行一個Nginx容器：
docker run --name mynginx -d -p 80:80 nginx
這個命令將創(chuàng)建一個名為mynginx的容器，并將容器的80端口映射到宿主機(jī)的80端口，使得可以通過瀏覽器訪問Nginx服務(wù)。
- 現(xiàn)在，你可以通過瀏覽器訪問http://localhost來查看Nginx默認(rèn)頁面，或者使用宿主機(jī)的IP地址來訪問Nginx服務(wù)。
這樣就完成了在Docker中安裝Nginx的過程。
Nginx 的相關(guān)配置
worker_processes 1； # worker進(jìn)程的數(shù)量
events { # 事件區(qū)塊開始
worker_connections 1024； # 每個worker進(jìn)程支持的最大連接數(shù)
} # 事件區(qū)塊結(jié)束
http { # HTTP區(qū)塊開始
include mime.types； # Nginx支持的媒體類型庫文件
default_type Application/octet-stream； # 默認(rèn)的媒體類型
sendfile on； # 開啟高效傳輸模式
keepalive_timeout 65； # 連接超時
server { # 第一個Server區(qū)塊開始，表示一個獨(dú)立的虛擬主機(jī)站點(diǎn)
listen 80； # 提供服務(wù)的端口，默認(rèn)80
server_name localhost； # 提供服務(wù)的域名主機(jī)名
location / { # 第一個location區(qū)塊開始
root html； # 站點(diǎn)的根目錄，相當(dāng)于Nginx的安裝目錄
index index.html index.htm； # 默認(rèn)的首頁文件，多個用空格分開
} # 第一個location區(qū)塊結(jié)果
error_page 500502503504 /50x.html； # 出現(xiàn)對應(yīng)的http狀態(tài)碼時，使用50x.html回應(yīng)客戶
location = /50x.html { # location區(qū)塊開始，訪問50x.html
root html； # 指定對應(yīng)的站點(diǎn)目錄為html
}
}
......
其實我們相對來說只需要關(guān)注 location 中的相關(guān)配置就可以了，
但是對于 Nginx 了不起還是想多說一下這個的。
Nginx 的正向代理
正向代理是指代理服務(wù)器代表客戶端向服務(wù)器發(fā)出請求，然后將服務(wù)器的響應(yīng)返回給客戶端。在Nginx中，可以通過配置代理服務(wù)器來實現(xiàn)正向代理功能。具體的配置如下：
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://example.com; # 將請求轉(zhuǎn)發(fā)到指定的服務(wù)器
proxy_set_header Host $host; # 設(shè)置請求頭中的Host字段
proxy_set_header X-Real-IP $remote_addr; # 設(shè)置請求頭中的真實IP地址
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 設(shè)置請求頭中的轉(zhuǎn)發(fā)地址
proxy_set_header X-Forwarded-Proto $scheme; # 設(shè)置請求頭中的協(xié)議類型
}
}
以上配置將客戶端的請求轉(zhuǎn)發(fā)到http://example.com，并且在轉(zhuǎn)發(fā)過程中設(shè)置了一些請求頭信息，以便服務(wù)器能夠正確處理請求。
Nginx的反向代理
Nginx的反向代理是指Nginx作為客戶端與其他服務(wù)器進(jìn)行通信，并將客戶端的請求轉(zhuǎn)發(fā)到這些服務(wù)器上。這種代理隱藏了真實的服務(wù)器，客戶端只知道與Nginx通信，而不知道真正處理請求的服務(wù)器是誰。反向代理可以用于負(fù)載均衡、安全性增強(qiáng)和緩存等方面。
在Nginx中配置反向代理可以使用以下指令：
location / {
proxy_pass http://backend_server;
}
其中backend_server是真實服務(wù)器的地址。這樣，當(dāng)客戶端發(fā)送請求時，Nginx會將請求轉(zhuǎn)發(fā)到backend_server上，并將響應(yīng)返回給客戶端。
Nginx 的錯誤頁面配置
在nginx中，可以通過配置自定義錯誤頁面來提供更友好的用戶體驗。你可以在nginx的配置文件中使用error_page指令來指定不同錯誤碼對應(yīng)的錯誤頁面，例如：
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
上面的配置指定了當(dāng)出現(xiàn)404錯誤時，顯示404.html頁面；當(dāng)出現(xiàn)500、502、503、504錯誤時，顯示50x.html頁面。
如果你想為所有的錯誤碼都顯示同一個錯誤頁面，可以這樣配置：
error_page 500 502 503 504 /error.html;
這樣就會將所有500系列的錯誤都顯示error.html頁面。
另外，你也可以使用變量來動態(tài)指定錯誤頁面的路徑，例如：
error_page 404 = /custom404.php;
這樣就可以根據(jù)具體情況動態(tài)指定404錯誤對應(yīng)的頁面路徑。
了解完這些內(nèi)容，我們就可以來看一下部署這個前端應(yīng)用了。
一般如果我們選擇部署前端項目并且使用 Nginx 的話，那么我們不需要單獨(dú)的去啟動這個 Nginx ，
而我們使用的則是通過前端的依賴，導(dǎo)入這個 Nginx ,也相當(dāng)于是依賴這個 Nginx,我們來看看這個 Docker怎么部署，
Docker 部署前端服務(wù)
準(zhǔn)備工作：
1：準(zhǔn)備 Nginx 鏡像
2：準(zhǔn)備 Dockerfile 文件
3：準(zhǔn)備 Nginx 的配置文件
4：準(zhǔn)備前端dist包
5：打包
6:啟動
我們剛才已經(jīng)說了這個 Nginx 的安裝了，已經(jīng)準(zhǔn)備好了，接下來就是準(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)容
接下來我們準(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 .
啟動命令如下：
docker run -d --name vue-app -p 17878:19529 vue-app
這樣我們就發(fā)版完成了，是不是很簡單，但是你要了解Nginx 的相關(guān)內(nèi)容才算是了解了。你學(xué)會了么？
