快捷導(dǎo)航

如何使用Rancher發(fā)布前端服務(wù)過(guò)程詳解

更新時(shí)間：2023年08月25日 09:29:07 作者：HerryLo

這篇文章主要為大家介紹了如何使用Rancher發(fā)布前端服務(wù)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

項(xiàng)目中用到rancher發(fā)布前端代碼，我自己參與了一次構(gòu)建，遇到了很多的問(wèn)題，不過(guò)一一解決了，用閑暇的時(shí)間，將遇到的問(wèn)題記下來(lái)，也算是一次復(fù)盤了。

rancher是一個(gè)開源的企業(yè)級(jí)容器管理平臺(tái)，重點(diǎn)“容器管理”，可以極大的簡(jiǎn)化容器管理的復(fù)雜度（相對(duì)于K8s）,它是對(duì)于k8s容器引擎的封裝，有興趣可以看看官方文檔。

上傳鏡像

需要先安裝docker，確保docker是可以使用的。下面是Dockerfile文件和default.conf文件

FROM  nginx
COPY ./build /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/
EXPOSE 80

Dockerfile文件主要用于docker鏡像的創(chuàng)建；

FROM nginx：FROM指令初始化一個(gè)新的構(gòu)建階段，并為后續(xù)指令設(shè)置基礎(chǔ)鏡像，這里的基礎(chǔ)鏡像是nginx；

COPY ./build /usr/share/nginx/html/：./build是前端打包之后的文件地址，將它復(fù)制到nginx的html目錄下；

COPY ./default.conf /etc/nginx/conf.d/：./default.conf是nginx配置文件, 將它復(fù)制到nginx的conf.d目錄下；

EXPOSE 80：監(jiān)聽80端口；

打包代碼

通過(guò)如下命令行打包代碼（實(shí)際代碼根據(jù)自己項(xiàng)目而定）：

// 前端本地打包
$ npm run build:prod
// 移除之前舊的鏡像
$ docker rmi xx.harbor.com:10443/xx/front-web-project:1.0.0
// 構(gòu)建鏡像
$ docker build -f Dockerfile -t xx.harbor.com:10443/xx/front-web-project:1.0.0 .
// push 鏡像到鏡像倉(cāng)庫(kù)
$ docker push xx.harbor.com:10443/xx/front-web-project:1.0.0

鏡像倉(cāng)庫(kù)是提前構(gòu)建好的，可以找運(yùn)維工程師確認(rèn)。我上面使用到的是harbor鏡像存儲(chǔ)庫(kù)，這個(gè)是運(yùn)維工程師搭建好的，我這邊可以直接使用。鏡像名和tag根據(jù)自己項(xiàng)目實(shí)際來(lái)。

Nginx配置

下面就是nginx配置文件，由于是前端項(xiàng)目，nginx主要在這里做的就是靜態(tài)資源服務(wù)器，接口代理。

server {
  listen       80;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Methods *;
  client_max_body_size 2000M;
  location / {
    root   /usr/share/nginx/html/;
    index  index.html index.htm;
    try_files $uri /index.html;
  }
}

nginx配置文件根據(jù)自己的實(shí)際需求編寫，更多的配置也可以在這里繼續(xù)添加（比例接口代理，負(fù)載均衡等）。

工作負(fù)載

rancher是一個(gè)容器管理平臺(tái)，是k8s的二次封裝，提供更豐富的功能，有興趣的同學(xué)，可以看看官網(wǎng) 的相關(guān)資料。在rancher里工作負(fù)載是一個(gè)對(duì)象，包括pod以及部署應(yīng)用程序所需的其他文件和信息。

以下是rancher中工作負(fù)載服務(wù)的創(chuàng)建過(guò)程：

點(diǎn)擊部署服務(wù)，進(jìn)入到創(chuàng)建工作負(fù)載界面：

Docker鏡像地址是你已經(jīng)上傳的 前端鏡像地址 ，主機(jī)端口需要 找運(yùn)維確認(rèn)端口 ，命名空間可選中已有的。容器端口一般都是 80，這和你的 default.conf配置端口相關(guān)。以上填寫完成之后，滑動(dòng)到底部，點(diǎn)擊升級(jí)按鈕。

點(diǎn)擊進(jìn)入創(chuàng)建完成的工作負(fù)載中，如果pods中存在正常running的pod實(shí)例，既是創(chuàng)建成功。如果存在其他問(wèn)題，可以參考下面 出現(xiàn)的問(wèn)題，進(jìn)行相關(guān)問(wèn)題的排查。

創(chuàng)建發(fā)布成功后，既可通過(guò)ip+端口訪問(wèn)前端服務(wù)，如果能訪問(wèn)成功代表部署的沒有問(wèn)題。

出現(xiàn)的問(wèn)題

以下問(wèn)題是在實(shí)際使用發(fā)現(xiàn)的問(wèn)題，將它們記錄下來(lái)；

鏡像構(gòu)建服務(wù)無(wú)法成功，提示是失敗的構(gòu)建

優(yōu)先查看日志信息，根據(jù)日志信息提示排查問(wèn)題。例如：如果提示鏡像構(gòu)建服務(wù)時(shí)報(bào)錯(cuò)，記得排查前端靜態(tài)資源文件打包中，nginx配置文件編寫存在問(wèn)題，相關(guān)的Dockfile文件配置信息是否正常。

鏡像構(gòu)建服務(wù)成功后，頁(yè)面依然無(wú)法訪問(wèn)

查看日志信息，查看是否有提示信息。如果存在提示信息，根據(jù)提示排查問(wèn)題；
在保證服務(wù)啟動(dòng)正常，nginx配置正常的前提下，與相關(guān)人員確認(rèn)，服務(wù)器IP、端口號(hào)，是否正常開啟。

構(gòu)建服務(wù)成功，頁(yè)面訪問(wèn)不是目標(biāo)文件

確認(rèn)nginx配置信息是否生效，是否有被其他文件覆蓋；并確認(rèn)前端資源文件上傳到了指定目錄，存在相關(guān)文件目錄。

構(gòu)建服務(wù)成功，頁(yè)面訪問(wèn)正常，接口代理異常

查看訪問(wèn)日志信息，是否存在相關(guān)請(qǐng)求提示信息。確認(rèn)nginx配置接口代理編寫正確，不存在異常錯(cuò)誤；再打開命令行窗口，嘗試通過(guò) curl [目標(biāo)服務(wù)接口地址]，確認(rèn)接口ip是否可以正常訪問(wèn)。