標籤: USB CONNECTOR 

一 Nginx代理實現kube-apiserver高可用

1.1 Nginx實現高可用

基於 nginx 代理的 kube-apiserver 高可用方案。

控制節點的 kube-controller-manager、kube-scheduler 是多實例部署，所以只要有一個實例正常，就可以保證高可用；

集群內的 Pod 使用 K8S 服務域名 kubernetes 訪問 kube-apiserver， kube-dns 會自動解析出多個 kube-apiserver 節點的 IP，所以也是高可用的；

在每個節點起一個 nginx 進程，後端對接多個 apiserver 實例，nginx 對它們做健康檢查和負載均衡；

kubelet、kube-proxy、controller-manager、scheduler 通過本地的 nginx（監聽 127.0.0.1）訪問 kube-apiserver，從而實現 kube-apiserver 的高可用；

從而基於 nginx 4 層透明代理功能實現 K8S 節點( master 節點和 worker 節點)高可用訪問 kube-apiserver 。

1.2 下載編譯Nginx

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# wget http://nginx.org/download/nginx-1.15.3.tar.gz
  3 [root@k8smaster01 work]# tar -xzvf nginx-1.15.3.tar.gz
  4 [root@k8smaster01 ~]# cd /opt/k8s/work/nginx-1.15.3/
  5 [root@k8smaster01 nginx-1.15.3]# mkdir nginx-prefix
  6 [root@k8smaster01 nginx-1.15.3]# ./configure --with-stream --without-http --prefix=$(pwd)/nginx-prefix --without-http_uwsgi_module --without-http_scgi_module --without-http_fastcgi_module
  7 [root@k8smaster01 ~]# cd /opt/k8s/work/nginx-1.15.3/
  8 [root@k8smaster01 nginx-1.15.3]# make && make install

解釋：

• –with-stream：開啟 4 層透明轉發(TCP Proxy)功能；
• –without-xxx：關閉所有其他功能，這樣生成的動態鏈接二進製程序依賴最小。
• [root@k8smaster01 ~]# cd /opt/k8s/work/nginx-1.15.3/
• [root@k8smaster01 nginx-1.15.3]# ./nginx-prefix/sbin/nginx -v

1.3 驗證編譯后的Nginx

  1 [root@k8smaster01 ~]# cd /opt/k8s/work/nginx-1.15.3
  2 [root@k8smaster01 nginx-1.15.3]# ./nginx-prefix/sbin/nginx -v
  3 nginx version: nginx/1.15.3
  4 [root@k8smaster01 nginx-1.15.3]# ldd ./nginx-prefix/sbin/nginx	#查看 nginx 動態鏈接的庫
  5         linux-vdso.so.1 =>  (0x00007ffdda980000)
  6         libdl.so.2 => /lib64/libdl.so.2 (0x00007feb37300000)
  7         libpthread.so.0 => /lib64/libpthread.so.0 (0x00007feb370e4000)
  8         libc.so.6 => /lib64/libc.so.6 (0x00007feb36d17000)
  9         /lib64/ld-linux-x86-64.so.2 (0x00007feb37504000)

提示：由於只開啟了 4 層透明轉發功能，所以除了依賴 libc 等操作系統核心 lib 庫外，沒有對其它 lib 的依賴(如 libz、libssl 等)，以便達到精簡編譯的目的。

1.4 安裝和部署Nginx

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# source /opt/k8s/bin/environment.sh
  3 [root@k8smaster01 work]# for master_ip in ${MASTER_IPS[@]}
  4   do
  5     echo ">>> ${master_ip}"
  6     mkdir -p /opt/k8s/kube-nginx/{conf,logs,sbin}
  7   done						#創建Nginx目錄
  8 [root@k8smaster01 ~]# cd /opt/k8s/work
  9 [root@k8smaster01 work]# source /opt/k8s/bin/environment.sh
 10 [root@k8smaster01 work]# for master_ip in ${MASTER_IPS[@]}
 11   do
 12     echo ">>> ${master_ip}"
 13     scp /opt/k8s/work/nginx-1.15.3/nginx-prefix/sbin/nginx  root@${master_ip}:/opt/k8s/kube-nginx/sbin/kube-nginx
 14     ssh root@${master_ip} "chmod a+x /opt/k8s/kube-nginx/sbin/*"
 15     ssh root@${master_ip} "mkdir -p /opt/k8s/kube-nginx/{conf,logs,sbin}"
 16   done						#分發Nginx二進制

1.5 配置Nginx 四層透明轉發

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# cat > kube-nginx.conf <<EOF
  3 worker_processes 1;
  4 
  5 events {
  6     worker_connections  1024;
  7 }
  8 
  9 stream {
 10     upstream backend {
 11         hash $remote_addr consistent;
 12         server 172.24.8.71:6443        max_fails=3 fail_timeout=30s;
 13         server 172.24.8.72:6443        max_fails=3 fail_timeout=30s;
 14         server 172.24.8.73:6443        max_fails=3 fail_timeout=30s;
 15     }
 16 
 17     server {
 18         listen 127.0.0.1:8443;
 19         proxy_connect_timeout 1s;
 20         proxy_pass backend;
 21     }
 22 }
 23 EOF
 24 [root@k8smaster01 ~]# cd /opt/k8s/work
 25 [root@k8smaster01 work]# source /opt/k8s/bin/environment.sh
 26 [root@k8smaster01 work]# for master_ip in ${MASTER_IPS[@]}
 27   do
 28     echo ">>> ${master_ip}"
 29     scp kube-nginx.conf  root@${master_ip}:/opt/k8s/kube-nginx/conf/kube-nginx.conf
 30   done						#分發Nginx四層透明代理配置文件

1.6 配置Nginx system

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# cat > kube-nginx.service <<EOF
  3 [Unit]
  4 Description=kube-apiserver nginx proxy
  5 After=network.target
  6 After=network-online.target
  7 Wants=network-online.target
  8 
  9 [Service]
 10 Type=forking
 11 ExecStartPre=/opt/k8s/kube-nginx/sbin/kube-nginx -c /opt/k8s/kube-nginx/conf/kube-nginx.conf -p /opt/k8s/kube-nginx -t
 12 ExecStart=/opt/k8s/kube-nginx/sbin/kube-nginx -c /opt/k8s/kube-nginx/conf/kube-nginx.conf -p /opt/k8s/kube-nginx
 13 ExecReload=/opt/k8s/kube-nginx/sbin/kube-nginx -c /opt/k8s/kube-nginx/conf/kube-nginx.conf -p /opt/k8s/kube-nginx -s reload
 14 PrivateTmp=true
 15 Restart=always
 16 RestartSec=5
 17 StartLimitInterval=0
 18 LimitNOFILE=65536
 19 
 20 [Install]
 21 WantedBy=multi-user.target
 22 EOF

1.7 分發Nginx systemd

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# source /opt/k8s/bin/environment.sh
  3 [root@k8smaster01 work]# for master_ip in ${MASTER_IPS[@]}
  4   do
  5     echo ">>> ${master_ip}"
  6     scp kube-nginx.service  root@${master_ip}:/etc/systemd/system/
  7   done

二 啟動並驗證

2.1 啟動Nginx

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# source /opt/k8s/bin/environment.sh
  3 [root@k8smaster01 work]# for master_ip in ${MASTER_IPS[@]}
  4   do
  5     echo ">>> ${master_ip}"
  6     ssh root@${master_ip} "systemctl daemon-reload && systemctl enable kube-nginx && systemctl restart kube-nginx"
  7   done

2.2 檢查Nginx服務

  1 [root@k8smaster01 ~]# cd /opt/k8s/work
  2 [root@k8smaster01 work]# source /opt/k8s/bin/environment.sh
  3 [root@k8smaster01 work]# for master_ip in ${MASTER_IPS[@]}
  4   do
  5     echo ">>> ${master_ip}"
  6     ssh root@${master_ip} "systemctl status kube-nginx |grep 'Active:'"
  7   done

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選

※評比南投搬家公司費用收費行情懶人包大公開

如今，webpack 毫無疑問是前端構建領域里最耀眼的一顆星，無論你前端走哪條路線，都需要有很強的webpack 知識。webpack 的基本用法這裏就不展開講了。主要探討一下如何提高 webpack 的打包速度。

這篇文章以 vue cli3.0+，webpack4.0+，nodejs10.0+ 這幾個版本為例。

一、打包分析

1.1、速度分析

我們的目的是優化打包速度，那肯定需要一個速度分析插件，此時 speed-measure-webpack-plugin 就派上用場了。它的作用如下：

• 分析整個打包總耗時
• 每個 plugin 和 loader 的耗時情況

首先，安裝插件

npm i -D speed-measure-webpack-plugin

然後修改 vue.config.js 配置文件 （vuecli3+ 版本的配置文件統一在這個文件里修改，如果沒有該文件，在根目錄新建一個）

// 導入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 實例化插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 這裡是自己項目里需要使用到的其他插件
            new yourOtherPlugin()
        ]
    })
}

運行打包命令之後，可以看到，打包總耗時為 2min,51.99s

1.2、體積分析

分析完打包速度之後，接着我們來分析打包之後每個文件以及每個模塊對應的體積大小。使用到的插件為 webpack-bundle-analyzer，構建完成後會在 8888 端口展示大小。

首先，安裝插件

npm i -D webpack-bundle-analyzer

修改 vue.config.js 配置文件

// 導入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 導入體積分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 實例化速度分析插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 實例化體積分析插件
            new BundleAnalyzerPlugin()
        ]
    })
}

構建之後可以看到，其中黃色塊 chunk-vendors 文件佔比最大，為 1.34MB

二、打包優化

2.1、多進程多實例構建，資源并行解析

多進程構建的方案比較知名的有以下三個：

• thread-loader (推薦使用這個)
• parallel-webpack
• HappyPack

這裏以 thread-loader 為例配置多進程多實例構建
安裝 loader

npm i -D thread-loader

接下來在 vue.config.js 配置文件中使用該 loader

// 導入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        }
    })
}

然後看下構建花費的時間， 2min,49.21s，相較於之前提升了 5s

2.2、公用代碼提取，使用 CDN 加載

對於vue，vuex，vue-router，axios，echarts，swiper等我們可以利用webpack的externals參數來配置，這裏我們設定只需要在生產環境中才需要使用。
下面配置 vue.config.js

// 導入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 導入體積分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

//判斷是否為生產環境
const isProduction = process.env.NODE_ENV === 'production';

//定義 CDN 路徑，這裏採用 bootstrap 的 cdn
const cdn = {
    css: [
        'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
        'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
    ]
}

// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    chainWebpack: config => {
        // 生產環境配置
        if (isProduction) {
            // 生產環境注入 cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ],
        //生產環境注入 cdn
        externals: isProduction && {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'echarts': 'echarts',
            'swiper': 'Swiper'
        } || {}
    })
}

緊接着，改造 html 頁面。用於讓我們配置的 cdn 路徑注入到 html 頁面

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 使用 CDN 的 CSS 文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

 <!-- 使用 CDN 的 JS 文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>

</html>

最重要的一步，看下效果，可以看到現在耗時 1min，39.19s，整整提升了 1 分多鍾！

2.3、多進程多實例并行壓縮

并行壓縮主流有以下三種方案

• 使用 parallel-uglify-plugin 插件
• uglifyjs-webpack-plugin 開啟 parallel 參數
• terser-webpack-plugin 開啟 parallel 參數 （推薦使用這個，支持 ES6 語法壓縮）

安裝插件依賴

npm i -D terser-webpack-plugin

接下來在 vue.config.js 配置文件中使用插件，最終的配置文件如下

// 導入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 導入代碼壓縮插件
const TerserPlugin = require("terser-webpack-plugin");

// 導入體積分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

//判斷是否為生產環境
const isProduction = process.env.NODE_ENV === 'production';

//定義 CDN 路徑，這裏採用 bootstrap 的 cdn
const cdn = {
    css: [
        'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
        'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
    ]
}

// 實例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    chainWebpack: config => {
        // 生產環境配置
        if (isProduction) {
            // 生產環境注入 cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ],
        //生產環境注入 cdn
        externals: isProduction && {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'echarts': 'echarts',
            'swiper': 'Swiper'
        } || {},
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: 4
                })
            ]
        }
    })
}

2.4、使用 polyfill 動態服務

動態 polyfill 指的是根據不同的瀏覽器，動態載入需要的 polyfill。 Polyfill.io 通過嘗試使用 polyfill 重新創建缺少的功能，可以更輕鬆地支持不同的瀏覽器，並且可以大幅度的減少構建體積。

Polyfill Service 原理

識別 User Agent，下發不同的 Polyfill

使用方法：在 index.html 中引入如下 script 標籤

<script crossorigin="anonymous" src=""></script>

三、完結

At last，看完之後有什麼不懂的，可以留言反饋。

轉載請註明出處：
作者：TSY
個人空間：

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選

※評比南投搬家公司費用收費行情懶人包大公開