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

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

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

正文

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

rancher是一個開源的企業(yè)級容器管理平臺，重點“容器管理”，可以極大的簡化容器管理的復(fù)雜度（相對于K8s）,它是對于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ò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端口；

打包代碼

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

// 前端本地打包
$ 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 鏡像到鏡像倉庫
$ docker push xx.harbor.com:10443/xx/front-web-project:1.0.0

鏡像倉庫是提前構(gòu)建好的，可以找運維工程師確認。我上面使用到的是harbor鏡像存儲庫，這個是運維工程師搭建好的，我這邊可以直接使用。鏡像名和tag根據(jù)自己項目實際來。

Nginx配置

下面就是nginx配置文件，由于是前端項目，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ù)自己的實際需求編寫，更多的配置也可以在這里繼續(xù)添加（比例接口代理，負載均衡等）。