Skip to main content

1-6

AWS ELB​

  • loadbalance 會依照自訂的頻率去 call 自訂的(port path...等等)檢查應用程序是否健康
  • 官方範本是預設 / 根路徑和導流自訂的 port 去檢查健康，若服務沒設根路徑的 api 做回應則會一直被檢測為不健康而一直重複關掉啟動

Vue config (環境變量與模式)​

  • 定義變量名稱必須 VUE_APP 開頭

  • .env 優先度最低但所有模式都會載入，再來是 .development(模式，可自定義)，再來是 .local 但不會進 git，最後是vue.config.js 優先度最高

  • vue-cli-service build --mode custom 在後面加入 mode 參數可指定自定義的模式

  • https://cli.vuejs.org/zh/guide/mode-and-env.html

Vue config/Webpack​

  • vue.config.js 打包時排除套件
module.exports = {
    configureWebpack: { // 此定義的配置將被‘合併’進 webpack 中
        externals: [
            {
                vue: 'Vue',
                'aws-amplify': 'aws_amplify'
            }
        ]
    } 
}
// 左邊的 key 是指 npm package name; 右邊的 value 是外部連結註冊全域的變數名(window.aws_amplify)
module.exports = {
    configureWebpack: config => { // 可更改為函數寫法，接收的參數：config 為原本配置好的物件，可直接做更改
        if (process.env.NODE_ENV === 'production') {

        } else {

        }
    }
    // 另外還有 `configureWebpack: config => .... 鏈式寫法可做更彈性化易用性的設定配置`
}
  • 如環境變量名稱想自訂，又不想綁在 VUE_APP 限制下，可以在 htmlwebpack 底下新增屬性，讓 html 模板可取用 (但 VUE_APP 變量可以在客戶端使用)
chainWebpack: config => { // 設定自定義變數，可用於 html 模板 <%= htmlWebpackPlugin.options.test %>
        config
        .plugin('html')
        .tap(args => {
            args[0].test = 'test' // 只能在 options 底下增加或修改屬性
            args[0].test2 = 'testtest'
            args[0].test3 = 'TESTTESTTEST'
            // args[1] = { coustom: 'coustom' } // 無法在 htmlWebpackPlugin 物件底下增加屬性
            return args
        })
    },
configureWebpack: config => {
    config.plugins[4].options.test = 'from configureWebpack' // 只能在 options 底下增加或修改屬性
    config.plugins[4].options.test4 = 'from configureWebpack'
    // config.plugins[4].test = 'not options from configureWebpack' // 無法在 htmlWebpackPlugin 物件底下增加屬性
}

AWS S3​

  • 下 S3 sync 指令時 加此參數：--cache-control 'max-age=604800'、--cache-control 'no-cache' 能設定 cache 時效
  • 應用：sync 前端檔案時，用 --exclude index.html，其餘檔案可設快取時效或不設，index.html 本身做 no-cache，之後每次佈版就不用再清快取了(其餘檔案不用 no-cache 是因為 css js 打包產出時都會帶 hash，但缺點是要定期清舊的檔案，因為 s3 sync 只會新增或更新)

try...catch... 語法​

  • 在 try{} 裡面有有 throw error 才會跳至 catch{} 執行，但一般賦值 undefine 之類的錯誤是不會跳的

JavaScript 撰寫風格指南​

html-webpack-plugin/lodash template 語法​

// 用 Javascript 做處理，這裡用到 lodash 提供的函式 
<% _.forEach(VUE_APP_TEST4.split(','), function(test) { %><script type="text/javascript" title="<%= test %>"></script><% }); %>

ES6​

let a = [1,2,3,4,5]
let b = a
let c = [...a]
b[0] = '222'
// a 的值也會被修改
// c 不會

解構賦值複習：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

實用：預設參數：

function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, coords, radius);
}
// = {} 可在呼叫函式未帶變數時做預設參數 即 drawChart() 可直接執行，若不加 = {} 則會報錯
drawChart({
  coords: {x: 18, y: 30},
  radius: 30
});

v-for 可以遞迴物件

Vue web component​

  • 為外置的 Vue component ，自己會有一個 Vue 實體，有提供像一般組件的 props 和 $emit event 接口供主程式的 Vue 做互動
  • Vue 需要用 CDN 引入，否則 Vue web component 和主程式需個別包 Vue
  • 有異步載入的功能，若有多個 web component，一起打包時還會生出個小入口檔，並在需要渲染該 web component 時才載對應的 JS
  • 其事件觸發傳來的資料為要下 參數.detail 才拿得到，與一般 component 傳來的資料直接拿有點差別
  • 文件：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%94%E7%94%A8

Vue component 的 name 作用​

  1. 提供自身引用自身
  2. 官方開發工具上可看到組件名稱，方便除錯
  3. <keep-alive> 可用 include 和 exclude 指定組件

Vue Cannot read property 'ob' of undefined​

  • .vue 檔內，data 的值要用函式 return 的方式

Vue web component​

Vue component 事件​

  • 若要在自定義的組件上綁定原生事件，例如：click，則需要在後面加 .native
  • <my-component @click.native="myEvent" />

Vue component library​

// /components/index.js
import Vue from 'vue'
import MyButton from './MyButton.vue'
import MyCard from './MyCard.vue'
import MyInput from './MyInput.vue'

const components = {
    MyButton,
    MyCard,
    MyInput
}

Object.keys(components).forEach(name => {
    Vue.component(name, components[name])
})

export default components
// 打包入口檔寫這樣
  • package.json 指令增加這個 vue-cli-service build --target lib --name my-lib 'src/components/index.js'
  • 教你如何打包 Vue 元件庫並上架到 npm :https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3
  • 如有寫 css 則輸出會有 css 檔(若 vue.config.js 有設定 css extract: false 則會內聯在 js 檔內)，js 有 commo.js 跟 umd.js 兩種
  • 要在專案內載入自己包的 lib 可在 index.html 用 script 標籤載入即可 (有 css 檔的話也要載)，注意 Vue 要是全域的，且 lib 載入是在 vue 之後，專案之前
  • 若是要包在專案內則照一般 plugin 的方式，在 main.js 中 import my-lib.umd.js ，即可使用 (若有 css 檔則需自行引入一起打包或不引入放 <link>)
  • --watch 模式時是 development mode ，這時 npm run build 出來的只有 js 檔，css 是內聯在裡面，沒有加 —watch 時是 production mode，這時 build 出來的就是 js 檔和 css 檔

Vue component slot​

Google reCAPTCHA​

Object.freeze()​

  • 凍結一個物件，屬於淺凍結，其內的屬性不能被修改、新增、刪除和可設定性、可寫性被改動等等，同時也防止此物件的原型被改變

  • 在 use strict (嚴格模式)下，改動 freeze 過的物件會報錯，一般則不會

  • let obj = { prop: 42, prop2: { prop: 'test' } };

    Object.freeze(obj)

    obj.prop = 33; // Throws an error in strict mode obj.prop2 = [1,2,3]; // Throws an error in strict mode obj.prop2.prop = 3; // 可以被改變，非深凍結 obj = 2 // 會被改變其參考，可用 const 解決

  • Object.seal() 為不可新增刪除物件內屬性，但可以修改

  • 也因為不能改寫的特性，在資料量大且不會變動的情況下使用 Object.freeze()，能使 Vue 的效能提升

Fake Path​

  • 基於瀏覽器安全性，上傳的檔案拿不到此檔案的本機路徑，Fire Fox 和 Edge 有方法可以拿到但 Chrome 不行

Lora Server​

  • 在 Lora Server images 內同時讀 ENV 和 volume 的 toml 檔，ENV 優先度較大

EFS & EBS​

  • EFS:文件系統，能同步在多個 AZ 並掛載多個 EC2 或 ECS 的 container 上，資料同步為強一致性，價錢較貴
  • EBS:塊級磁碟區，需自行設置容量和格式，只能掛載在一個 EC2 上，價錢較便宜

AWS EFS​

  • 能操作 EFS 內檔案只能使用 data sync 服務或是通過掛載的 EC2 or ECS 的 container 操作
  • 初始 EFS 內為空白根目錄而已，如果掛載的 EFS 檔案路徑不存在的話會起不了
  • 若把 EFS 掛載到 ECS container 的工作目錄，工作目錄原有的東西會被 EFS 蓋掉而運行不了

ECS TaskDefinition ENV​

  • ENV 有三種方式可以設： dockerfile、taskdefinition、來自 s3 的 .env 檔
  • 優先度是 taskdefinition > .env 檔 > dockerfile
  • .env 檔 在 AWS console 和 AWS SDK 都可以設，但 cloudformation 沒有提供

Linux Shell Script​

  • 在工作目錄下新增 .sh 檔，內容例：
sam package --s3-bucket bocheng-ap-northeast-1 --template iamrole.yaml --output-template-file iamrole.packaged.yaml --profile dev-jasonzhuang
sam deploy --template-file iamrole.packaged.yaml --stack-name test-${userName}-iamrole --capabilities CAPABILITY_IAM CAPABILITY_AUTO_EXPAND --profile dev-jasonzhuang --region ap-northeast-1 --parameter-overrides TagName=${userName}
  • 輸入 ./deploy.sh 可執行 sh 檔內的指令 (同步，會照順序執行) (若某一行指令出錯會顯示並繼續執行下一行不會中斷)
  • userName=chengcheng ./deploy.sh 在指令前宣告參數可帶入執行指令內，${userName} 即可取得

AWS ECS​

  • Q: 多個 taskdefinition 在同一個 stack 中，若改動其中一個 taskdefinition，其他 taskdefinition 是否會跟著進版？
  • A: 不會，只有更動的會進版
  • task 有更動會在更新 stack 時先起新的 task 再把舊的 task 關掉，所以 EC2 資源不夠容納兩倍數的已更動 task 的話會卡住更新
  • task 更新為藍綠部署，若舊的還有人在 access 的話不會關閉直到全部連線結束，期間會將新流量導到新的 task

Linux Shell Script​

AWS cloudformation​

  • 整數或浮點數。AWS CloudFormation 會將參數值驗證為數字；不過，當您在範本中的其他位置使用參數時 (例如，使用 Ref 內部函數)，參數值會變成字串。
  • 當 cloudformation 沒支援的資源可以用 custom resource 去呼叫 lambda 操作 sdk 建資源，其呼叫、傳入值與回傳值都要符合 cloudformation 的規則，其傳入值可判斷 stack 目前是 create、update.... 從而去做對應操作

AWS IoT​

  • IoT 需要 service-role 才能執行 deploy 到設備，因 cloudformation 沒有此資源可以建立，所以用 custom resource 呼叫 lambda 操作 sdk 將對應的 role associate 到 IoT

AWS cloudformation​

  • yaml 有做修改會更新，若是下指令 --parameter-overrides 第一次有加，第二次沒加的情況不會更新。
  • 若額外用 sdk 或 console 頁面更改其他資源設定，cloudformation 在下次更新時不會覆蓋掉額外的設定，除非有更新的地方和額外設定是同一種
  • 更新方式是根據對應資源的 update 行為而定，有些設定可以複數會先加新的再把舊的砍掉(像這情況如果舊的被額外操作修改過，則 cloudformation 會不認得所以最後會有兩個設定值)，有些設定為單一則會直接覆寫
  • 像更改 taskdefinition 內設定後，task 會先啟新的一批將新流量導去，待舊的 task 沒有流量後，再關掉舊的

AWS Service Discovery​

  • Q: service discovery 是否跟 loadbalancing 一樣能分發流量？
  • A: 不行，有多個同樣的只會 access 到同一個，除非那一個被關掉，才會 access 到另一個

npm script​

AWS ECS​

  • 每個 EC2 給的 ENI 不多，而且本身會吃掉一個，所以後來 aws 推出 awsvpcTrunking 功能，能讓特定 EC2 的 ENI 很多
  • awsvpcTrunking 需要手動開啟或 SDK 或 cli (無 cloudformation)
  • 開啟後啟動的實例才會有很多 ENI，且限定幾種 type 的 EC2 而已
  • 其中 a1 系列為通用便宜型，但 AMI 只能使用 Arm64 架構，一般 docker image 是 x86 之類的，跑在上面不能正常執行，故需將程式包成能在 Arm64 架構執行的 image
  • Arm64 架構 AMI 不適用指令或主控台直接更新，只能手動進去實例更新或重開...

docker​

  • docker 要包 Arm64 上可以跑的 image 需裝 docker buildx 指令：https://www.docker.com/blog/getting-started-with-docker-for-arm-on-linux/ (裝 buildx 指令、啟用 Arm64 的 container 用來執行包 image 的程序)
  • buildx 時後面加 --load 不加 --push 即為輸出到本地
  • 本地輸出時， --platform 只帶一種 (不然輸出多個平台的 image 但名稱都共用同個會打架) (push 到 dockerhub 不會是因為會在名稱後多加個 sha 亂數)

x86/x64 & ARM​

Last updated on