數(shù)據(jù)家,idc官網(wǎng),算力,裸金屬,高電機(jī)房,邊緣算力,云網(wǎng)合一,北京機(jī)房,北京云計(jì)算,北京邊緣計(jì)算,北京裸金屬服務(wù)器,北京數(shù)據(jù)服務(wù)器,北京GPU服務(wù)器,高算力服務(wù)器,數(shù)據(jù)機(jī)房相關(guān)技術(shù)新聞最新報(bào)道
前段時(shí)間,了不起給大家說過如果使用 Docker 發(fā)布自己的后端項(xiàng)目,也就不再使用 Jar 包進(jìn)行項(xiàng)目的發(fā)版操作,但是這其中就又涉及到了前端如何發(fā)版,為什么這么說,因?yàn)橘Y深前端開發(fā),可能知道各種發(fā)版內(nèi)容等,但是對(duì)于一般的前端開發(fā)來說,走到build后,就已經(jīng)算是比較不錯(cuò)了,接下來如果沒有運(yùn)維的話,那么在不使用 jekins 的情況下,就只能是后端來進(jìn)行發(fā)版了,今天我們講講這個(gè)docker 是如何發(fā)布前端應(yīng)用的。
現(xiàn)在部署前端服務(wù),肯定少不了 Nginx,了不起就先從這個(gè) Nginx 來開始講一下吧。
“Nginx是一款輕量級(jí)的HTTP服務(wù)器,采用事件驅(qū)動(dòng)的異步非阻塞處理方式框架,這讓其具有極好的IO性能,時(shí)常用于服務(wù)端的反向代理和負(fù)載均衡?!?/p>
選擇Nginx的原因有以下幾點(diǎn):
總的來說,Nginx在高性能、低資源消耗、可擴(kuò)展性和高可靠性方面表現(xiàn)出色,因此被廣泛選擇作為Web服務(wù)器和反向代理服務(wù)器。
一般的,我們都是使用 Docker 來進(jìn)行這個(gè) Nginx 的安裝
要在Docker中安裝Nginx,可以按照以下步驟進(jìn)行操作:
docker pull nginx
這將從Docker Hub上拉取最新的Nginx鏡像到你的本地環(huán)境。
docker run --name mynginx -d -p 80:80 nginx
這個(gè)命令將創(chuàng)建一個(gè)名為mynginx的容器,并將容器的80端口映射到宿主機(jī)的80端口,使得可以通過瀏覽器訪問Nginx服務(wù)。
這樣就完成了在Docker中安裝Nginx的過程。
worker_processes 1; # worker進(jìn)程的數(shù)量
events { # 事件區(qū)塊開始
worker_connections 1024; # 每個(gè)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; # 連接超時(shí)
server { # 第一個(gè)Server區(qū)塊開始,表示一個(gè)獨(dú)立的虛擬主機(jī)站點(diǎn)
listen 80; # 提供服務(wù)的端口,默認(rèn)80
server_name localhost; # 提供服務(wù)的域名主機(jī)名
location / { # 第一個(gè)location區(qū)塊開始
root html; # 站點(diǎn)的根目錄,相當(dāng)于Nginx的安裝目錄
index index.html index.htm; # 默認(rèn)的首頁文件,多個(gè)用空格分開
} # 第一個(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ū)塊開始,訪問50x.html
root html; # 指定對(duì)應(yīng)的站點(diǎn)目錄為html
}
}
......
其實(shí)我們相對(duì)來說只需要關(guān)注 location 中的相關(guān)配置就可以了,
但是對(duì)于 Nginx 了不起還是想多說一下這個(gè)的。
正向代理是指代理服務(wù)器代表客戶端向服務(wù)器發(fā)出請(qǐng)求,然后將服務(wù)器的響應(yīng)返回給客戶端。在Nginx中,可以通過配置代理服務(wù)器來實(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ā)過程中設(shè)置了一些請(qǐng)求頭信息,以便服務(wù)器能夠正確處理請(qǐng)求。
Nginx的反向代理是指Nginx作為客戶端與其他服務(wù)器進(jìn)行通信,并將客戶端的請(qǐng)求轉(zhuǎn)發(fā)到這些服務(wù)器上。這種代理隱藏了真實(shí)的服務(wù)器,客戶端只知道與Nginx通信,而不知道真正處理請(qǐng)求的服務(wù)器是誰。反向代理可以用于負(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àn)。你可以在nginx的配置文件中使用error_page指令來指定不同錯(cuò)誤碼對(duì)應(yīng)的錯(cuò)誤頁面,例如:
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
idc網(wǎng),算力,裸金屬,高電機(jī)房,邊緣算力,云網(wǎng)合一,北京機(jī)房,北京云計(jì)算,北京邊緣計(jì)算,北京裸金屬服務(wù)器,北京數(shù)據(jù)服務(wù)器,北京GPU服務(wù)器,高算力服務(wù)器,數(shù)據(jù)機(jī)房上面的配置指定了當(dāng)出現(xiàn)404錯(cuò)誤時(shí),顯示404.html頁面;當(dāng)出現(xiàn)500、502、503、504錯(cuò)誤時(shí),顯示50x.html頁面。
如果你想為所有的錯(cuò)誤碼都顯示同一個(gè)錯(cuò)誤頁面,可以這樣配置:
error_page 500 502 503 504 /error.html;
這樣就會(huì)將所有500系列的錯(cuò)誤都顯示error.html頁面。
另外,你也可以使用變量來動(dòng)態(tài)指定錯(cuò)誤頁面的路徑,例如:
error_page 404 = /custom404.php;
這樣就可以根據(jù)具體情況動(dòng)態(tài)指定404錯(cuò)誤對(duì)應(yīng)的頁面路徑。
了解完這些內(nèi)容,我們就可以來看一下部署這個(gè)前端應(yīng)用了。
一般如果我們選擇部署前端項(xiàng)目并且使用 Nginx 的話,那么我們不需要單獨(dú)的去啟動(dòng)這個(gè) Nginx ,
而我們使用的則是通過前端的依賴,導(dǎo)入這個(gè) Nginx ,也相當(dāng)于是依賴這個(gè) Nginx,我們來看看這個(gè) Docker怎么部署,
準(zhǔn)備工作:
1:準(zhǔn)備 Nginx 鏡像
2:準(zhǔn)備 Dockerfile 文件
3:準(zhǔn)備 Nginx 的配置文件
4:準(zhǔn)備前端dist包
5:打包
6:啟動(dòng)
我們剛才已經(jīng)說了這個(gè) 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 .
啟動(dòng)命令如下:
docker run -d --name vue-app -p 17878:19529 vue-app
這樣我們就發(fā)版完成了,是不是很簡單,但是你要了解Nginx 的相關(guān)內(nèi)容才算是了解了。你學(xué)會(huì)了么?