人善交ⅹzzzzz另类,一区二区三区四区视频,青娱乐一级无码,91视频网国产,狠狠狠久久久,欧美香蕉在线,国产黄色一级,日韩不卡无码视频

?
聊到運維，很長一段時間我覺得跟前端就是毫無關(guān)聯(lián)的玩意，應(yīng)該說半毛錢關(guān)系都木。但隨著前端工程化的發(fā)展，前端基本運維部署相關(guān)知識甚至也逐步被重視，如果你公司的運維部門很強大，那么你也可以完全忽略運維相關(guān)的。只是樹醬覺得，如果你想更多了解前端架構(gòu)，還是需要具備一定的運維相關(guān)知識儲備。當(dāng)然，現(xiàn)在云廠商都想應(yīng)推出自己的Serverless服務(wù)(下一篇會講～)，號稱讓前端更專注業(yè)務(wù)的開發(fā)，而不用擔(dān)心底層應(yīng)用的部署和維護，對開發(fā)者而言可以更多聚焦到業(yè)務(wù)領(lǐng)域的開發(fā)，有興趣的童鞋可以去玩玩
?

1.npm

?
npm 是 Node.js 官方提供的包管理工具，主要用來管理項目依賴，發(fā)布等等，下面介紹幾個比較常見的部署應(yīng)用場景，常用的npm命令這里不作介紹了
?

1.1 nrm

?
nrm(npm registry manager )是npm的鏡像源管理工具，因為npm默認(rèn)建立的鏈接訪問的是國外的資源，訪問速度較慢，使用這個就可以快速地在 npm 源間切
?

如何安裝

npm install -g nrm

查看可選的資源

nrm ls   

*npm ---- https://registry.npmjs.org/

cnpm --- http://r.cnpmjs.org/

taobao - http://registry.npm.taobao.org/

eu ----- http://registry.npmjs.eu/
...

添加私有倉庫鏈接

nrm add name http://registry.npm.tree.com/  # 私有倉庫鏈接
nrm use name # 使用本址的鏡像地址

nrm 更多用于如果公司內(nèi)網(wǎng)部署了私有倉庫，也就是方便用nrm作來源切換，也有益于依賴的版本管理，如果你想搭建自己的私有倉庫，可以使用verdaccio，可以看這個具體的教程點我??

1.2 發(fā)布npm包

?
當(dāng)我們想發(fā)布一個npm包，需要完成什么樣的流程呢？
?

先注冊npm賬號 ??
配置package.json

{
  "name": "kutil",
  "version": "1.0.0", #版本名稱
  "scripts":[], # 可執(zhí)行的腳本命令
  "repository": "https://github.com/xxx/xxx.git", #github倉庫地址
  "author": "tree <[email protected]>", #作者
  "description": "工具包“, #包的說明
  "keywords": [
    "utils",
  ]
}

配置打包機制

?
如果是工具類打包，推薦使用rollup，webpack比較適合打包一些應(yīng)用，例如SPA或者同構(gòu)項目
?

添加單元測試

?
優(yōu)質(zhì)的開源包，都有單元測試模塊，來保證包的穩(wěn)定性和代碼質(zhì)量，常見會有build-passing的標(biāo)記，有興趣的童鞋可以閱讀樹醬之前寫的前端單元測試那些事
?

開發(fā)文檔readme.me

?
readme方便開發(fā)者快速熟悉，包括具體的Api介紹、使用例子、項目介紹等等，還可以加入包括單元測試覆蓋率、下載量、證書等等
?

最后完成上面一系列操作之后，到了最終的發(fā)布環(huán)節(jié)

npm login # 登錄你上面注冊的npm賬號

npm publish # 登錄成功后，執(zhí)行發(fā)布命令

+ [email protected] # 發(fā)布成功顯示npm報名及包的版本號

2. jenkins

?
jenkins作為一個可擴展的自動化服務(wù)器，可以用作簡單的 CI 服務(wù)器，具有自動化構(gòu)建、測試和部署等功能，簡而言之，jenkins可以方便我們?nèi)粘５那岸隧椖堪姹靖碌ㄩ_發(fā)、測試、生產(chǎn)環(huán)境等），也可以通過它自動化完成一系列的操作包括：編譯打包元測試、代碼掃描等，官方文檔
?

2.1 如何安裝

下載 Jenkins.
打開終端進(jìn)入到下載目錄.
運行命令 java -jar jenkins.war --httpPort=8080.
打開瀏覽器進(jìn)入鏈接 http://localhost:8080.
按照說明完成安裝.

詳細(xì)流程圖可參考 Jenkins+github 前端自動化部署

2.2 配合前端項目自動化部署

?
這里主要介紹jenkins流水線配置的使用，流水線的代碼定義了整個的構(gòu)建過程, 他通常包括構(gòu)建, 測試和交付應(yīng)用程序的階段，下面是路徑和倉庫的配置
?

圖片相關(guān)配置如下：

SCM:選擇git或者svn作為代碼觸發(fā)器
腳本路徑：在項目根目錄創(chuàng)建jenkinsfile來編寫流水線

下面介紹一個簡單版的jenkinsfile的流水線任務(wù)寫法，完成整個前端工程化部署涉及的編譯打包、靜態(tài)掃描、單元測試等環(huán)節(jié)

def gitUrl = "http://gitlab.****.com/shc/****.git"//GIT入口（隨不同工程改變）
def gitCred = "***-***-4f00-a926-1848b670d97b"    //GIT 身份憑據(jù)
if ("DEV" == buildType) {
    buildScript = "build_development"
    try {
        node('k8s') {
            stage('下拉源碼') {
                   checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "${gitCred}", url: "${gitUrl}"]]])
                 #可由片段生成器生成，選擇示例步驟 “checkout:Check out from version control”，生成流水線腳本獲取
            }
            checkStatus('下拉源碼')
            stage('代碼構(gòu)建編譯') {
                sh "yarn run ${buildScript}"
            }
            checkStatus('代碼構(gòu)建編譯')
            stage('代碼靜態(tài)掃描') {
                sh 'yarn run lint'
            }
            checkStatus('代碼靜態(tài)掃描')
            stage('單元測試') {
                 sh 'yarn run unit'
            }
            checkStatus('單元測試')
        }
    } catch(Exception e) {
       
    }
}

完成后，即可構(gòu)建項目，分階段完成，首先是下拉源碼、代碼構(gòu)建編譯、代碼掃描等等，所有環(huán)節(jié)成功才算自動化部署成功，如下所示

3.Docker

?
Docker是一個虛擬環(huán)境容器,可以將開發(fā)環(huán)境、代碼、配置文件等一并打包到這個容器中,最后發(fā)布應(yīng)用
?

3.1 如何使用

?
通過將部署的操作集中成一個部署腳本完成傳統(tǒng)的部署流程，通過在服務(wù)器上運行docker容器來運行前端應(yīng)用
?

如何安裝

yum install docker-ce

項目目錄，部署項目需要準(zhǔn)備Dockerfile和nginx.conf(如果nginx不作定制化，可以直接用官方鏡像)

3.2 Dockerfile 配置

?
dockerfile是一個配置文件,用來讓docker build命令清楚運行那些操作，創(chuàng)建dockerfile并編寫相關(guān)配置
?

FROM node:latest as builder 
WORKDIR /app
COPY package.json 
RUN npm install   
COPY . .
RUN npm run build


FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/dist  /usr/share/nginx/html

//ps: 每一個指令的前綴都必須是大寫的。

ADD和COPY：將文件或目錄復(fù)制到Dockerfile構(gòu)建的鏡像中
EXPOSE：指定運行該鏡像的容器使用的端口，可以是多個。
RUN ：指令告訴docker 在鏡像內(nèi)執(zhí)行命令
FROM ：通過FROM指定的鏡像名稱，這個鏡像稱之為基礎(chǔ)鏡像，必須位于第一條非注釋指令
WORKDIR：在容器內(nèi)部設(shè)置工作目錄

Nginx.conf 配置如下

events {
    worker_connections  1024;
}
http{
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }   
    }
}

創(chuàng)建文件并編寫后，用docker創(chuàng)建鏡像

3.3 如何創(chuàng)建鏡像

?
使用當(dāng)前目錄的 Dockerfile 創(chuàng)建鏡像，標(biāo)簽為 frontend
?

docker build -t frontend .

-t ：指定要創(chuàng)建的目標(biāo)鏡像
. ：Dockerfile 文件所在目錄，可以指定Dockerfile 的絕對路徑

鏡像成功生成

3.4 查看鏡像

docker image ls | grep frontend

出現(xiàn)結(jié)果則應(yīng)用鏡像 frontend 成功創(chuàng)建,然后我們基于該鏡像啟動一個Docker容器

4.5 如何啟動

?
使用docker鏡像frontend:latest以指定80端口映射模式啟動容器,并將容器命名為frontend
?

docker run --name frontend -p 80:80 frontend:latest

-p: 指定端口映射，格式為：主機(宿主)端口:容器端口將宿主的80端口映射到容器的80端口
-name: 為容器指定一個名稱；

完成 docker 部署

docker也可以集成到上一節(jié)講的jenkins自動化部署流水線中去

  stage('部署到開發(fā)聯(lián)調(diào)環(huán)境') {
                echo "auto deploy to test environment"
                sh "docker build -t frontend ."
                sh "docker run --name frontend -p 80:80 frontend:latest"
  }

4.PM2

?
PM2是node進(jìn)程管理工具，可以利用它來簡化很多node應(yīng)用管中繁瑣任務(wù)，是Nodejs應(yīng)用程序守護進(jìn)程必不可少的選擇，方便管理基于nodejs平臺下能夠有獨立運行訪問的web服務(wù)，如nextjs、express、koa等前端應(yīng)用
?

4.1 常見的應(yīng)用場景

部署node koa2 或 express 項目應(yīng)用
部署前端SSR（后端渲染）應(yīng)用，如nuxt.js（Vue）和 next.js(React)等構(gòu)建服務(wù)端渲染應(yīng)用框架

4.2 如何使用

安裝：npm install -g pm2
啟動node項目 : pm2 start app.js 或者 pm2 start bin/www
停止pm2服務(wù)：pm2 stop bin/www
停止所有pm2服務(wù): stop all
重啟pm2服務(wù): pm2 restart bin/www
pm2所有進(jìn)程信息：pm2 list

啟動后如下所示

4.3 高階應(yīng)用

?
在項目根目錄中添加一個processes.json
?

{
 #apps是一個數(shù)組，每一個數(shù)組成員就是對應(yīng)一個pm2中運行的應(yīng)用
  "apps": [{
    "name": "app",  #名稱
    "script": "./", #程序入口
    "cwd": "./",           #應(yīng)用程序所在的目錄
    "error_file": "./logs/err.log",#錯誤輸出日志
    "log_date_format": "YYYY-MM-DD HH:mm Z" #日期格式
  }]
}

結(jié)合packjson腳本命令，可以用processes來管理多應(yīng)用

"script":{
    "pm2":"pm2 start processes.json"
}

更多命令和配置信息查看 pm2文檔

5.Nginx

?
Nginx它既可以作為 Web 服務(wù)器，也可以作為負(fù)載均衡服務(wù)器，具備高性能、高并發(fā)連接等
?

5.1 前端Nginx那些事

詳細(xì)信息請看之前梳理的前端Nginx那些事

5.2 補充

灰度發(fā)布

?
灰度發(fā)布即是讓一部分人繼續(xù)用舊版本的產(chǎn)品A，然后一部分用戶開始用新版本特征的產(chǎn)品B，如果用戶對B沒有什么問題反饋，則逐步擴大范圍。一方面可以保證整體系統(tǒng)的穩(wěn)定，而且在初始灰度的時候就可以發(fā)現(xiàn)、調(diào)整問題，以保證其影響度
?

傳統(tǒng)的灰度是通過Nginx分發(fā)流量到服務(wù)器，這里介紹一下簡單的灰度規(guī)則配置，通過在nginx里面配置路由規(guī)則就好，如果是規(guī)則復(fù)雜的話,可以結(jié)合nginx+lua 做一些些灰度的業(yè)務(wù)邏輯

1.根據(jù)Cookie實現(xiàn)灰度發(fā)布

?
通過獲取cookie設(shè)置的版本號來區(qū)分
?

upstream test1 {
    server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}

upstream default {
    server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}

server {
  listen 80;
  server_name  www.****.com;
  set $group "default";
    if ($http_cookie ~* "version=V1"){
        set $group test1;
    }

  location / {                       
    proxy_pass http://$group;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    index  index.html index.htm;
  }
 }

根據(jù)IP實現(xiàn)灰度發(fā)布

?
通過內(nèi)外網(wǎng)IP來區(qū)分
?

upstream test1 {
    server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}

upstream default {
    server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}

server {
  listen 80;
  server_name  www.xxx.com;
  set $group default;
  if ($remote_addr ~ "10.0.0.110") {
      set $group test1;
  }

location / {                       
    proxy_pass http://$group;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    index  index.html index.htm;
  }
}

請你喝杯?? 記得三連哦～

1.閱讀完記得給?? 醬點個贊哦，有?? 有動力

2.關(guān)注公眾號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star?

前端運維部署那些事