Skip to main content

1-4

Nuxt server：Vuetify 斷點和 swiper 調整 GA：照著小工具指示做優化(放header、別包在外部JS檔內等等) SEO：

  • 搜尋後發現google能爬到 js 產生的資料，故官網回到原本方式(不起server)，繼續做meta data、sitemap
  • 跨國語言網站SEO是以網域做區分(com.tw)，鴻海是用同一個網站以不同語言網址掛domain方式實作，我們原本是只有.com，所以搜尋結果一直都是英文顯示而已
  • 原本以為 S3 掛另外兩個domain就行，但它這樣網址以tw做根目錄的話，會抓不到存放在真正根目錄的檔案，而且本身route URL 也會錯亂，所以解法是用 S3 的複製功能，上版時同步另外兩個 bucket ，用3個 bucket 掛不同 domain 下去做語言 SEO優化

動態 head meta 設定，default layout 設定 jsonld Organization，動態文章 page 設定 jsonld NewsArticle(這頁面會有兩組 json-ld)，測試上估狗結構化資料工具都抓得到 JS 產生的資料，複合式搜尋結果測試工具官方未完工(測試文章功能未有，標誌功能測試OK)， open graph 因 FB 無法抓動態產生的資料所以沒做，只有設預設。

  • S3 Replication 只能指向一個目標 bucket，但能有多條 rule
  • Replication 功能須雙方 bucket 都開啟 version (刪除 bucket 時需連版本紀錄都刪除)
  • 源 bucket 設定完後需在目標 bucket 的 action 內設定 Receive objects

cloudformation 寫 template 只是自動化建立所有需要的服務和設定，關於 S3 上傳檔案等等的操作還是需寫指令。 因 cloudfront 的設置指向 S3 資源，所以 S3 本身就不需要再設置 bucketpolicy 和 開啟 website 設定，因為 S3 不會直接對到 enduser。

  • nuxt sitemap 設定，能設多個子 .xml、用axios產動態路徑、hostname、lastmod等等基本設置：https://www.npmjs.com/package/@nuxtjs/sitemap#usage
  • 和 client 同層可建 hooks 資料夾，裡面 deploy.js 可自訂額外的指令流程。
  • nuxt i18n 可設置 domain 指向對應語言，原本 spa 模式 build 出來會有 tw 等等資料夾，設置後就沒了。

aws S3 cli​

  • 文檔：https://docs.aws.amazon.com/cli/latest/reference/s3/index.html#use-of-exclude-and-include-filters
  • 範例：aws2`` s3 sync /Users/zhuangbocheng/Desktop/AWS/xxx.com/dists s3://test-xxx --exclude "*" --include ".png" --include ".xml" —include "anest/"
  • sync 指令會判斷檔案是否有變更，沒變更就不會更新。
  • 條件判斷是越後面權重越大，先 exclude 所有檔案再 include 要需要的
  • s3 和 s3api 指令差別在，s3 比較簡化和專注在核心操作，s3api 較複雜可以做所有關於 s3 bucket 的設定

Sam cli​

  • Serverless Application Model (SAM) 為 cloundformation 的擴展，用於建構無伺服應用程序框架，集成很多東西
  • 因為目前只有對比過 aws2 create stack 、sam deploy，使用感覺差別不大，但 lambda 那邊 sam 做掉很多程序，很方便
  • cloudformation template 一定都要 package 再 deploy 上去，佈建前要先建個 S3 bucket 放轉譯後的 template
  • 上傳至 aws ecr：docker tag 的資源名稱要跟 ecr repositories 名稱一樣
  • push 到 ecr 前要先 aws ecr get-login-password
  • ECS taskDefine 也可以除了從 ECR 抓映像檔，也可以從 dockerhub 抓
  • ECS service 起多少個， ApplicationAutoScaling::ScalableTarget、ScalingPolicy 就要設多少個

Redis：是一個 in-memory 的 key-value database，因此常常被用在需要快取（Cache）一些資料的場合，可以減輕許多後端資料庫的壓力。https://blog.techbridge.cc/2016/06/18/redis-introduction/

  • Redis 是用 TCP 傳輸協定
  • 在 ELB 中 TCP 傳輸是用 NLB (不是ALB)
  • NLB 不能設 SG，不用偵聽規則、其他相關配置都跟 ALB 不一樣。(要看官方文件- -)

IAM role 教學會

  • service role 需要設 relation ship，定義此 role 只能給指定的服務做使用
  • relation ship 也能指定給特定 user ，授權他可以操作

safari 中 css heigtht 計算顯示有不同，導致按鈕元件的 svg 在 safari 無法根據外框做自適應，不太清楚規則，但用外層包 flex 就能讓內部元素根據外面做 scalling

  • ECS 起的服務，其 SG VPC 都是依賴於 ec2 instance 上配置的，(這樣不太符合 ECS 本身的特色)，故有提供 taskdefine 可選 awsvpc 連網模式，再在 service 配置 NetworkConfiguration，即可將 service 抽出並配置 SG、VPC 更能彈性連線
  • AutoScalingGroup 設的 VPCZoneIdentifier 如果指定的 subnet 沒有 MapPublicIpOnLaunch=true ，啟動實例會失敗(收不到訊號)
  • ECS 啟用的實例 type 為 Fargate 才能使服務在 awsvpc 模式啟用 Assign public IP
  • 接上段：啟用實例為 EC2 的話官方建議使用 NAT gateway 使其服務能聯網
  • 使用 awsvpc 的服務掛載 ELB 時需指定 TargetType:ip ，若是 Lambda 要掛載則指定 TargetType:lambda
  • ECS 佈建時 service 掛 ELB 需 DependsOn:ELBListener ， DependsOn 是保證建立先後順序
  • Internet Gateway 除了要貼在 vpc 之外，public route 也要掛
  • NAT Gateway 要設在 public subnet 上，並給他貼個 EIP，並在 private route 掛上
  • 若 private subnet 的 service 需聯網，不用 NAT Gateway 的情況下只能貼 EIP 給他(若只連 AWS 服務則可用 VPC endpoint
  • ACL 用於限制流量大小
  • fargate 如果不 assign public IP 則需要 NAT gateway 才能進行需要聯網的動作(ECR 下載 image，或用 ECR VPC endpoint
  • SG 若指定來源另個 SG，來源必定要前一個，前前個不收
  • 若服務有掛 loadbanlce，服務若用 awsvpc mode 有設 SG 的話要允許 loadbanlce 來的，不然 loadbanlce healthy check 會連不到而一直重複起服務
  • ECS service discovery 除了 network:none 之外的模式都可用，host、bridge 模式只有類型 SRV 紀錄受會到支援。選擇容器名稱和連接埠組合以與該紀錄建立關聯，awsvpc 模式可選取 A 或 SRV 紀錄類型
  • ECS 的服務建議都是無狀態 (stateless)，有狀態的放 RDS

JS 30: Day 2 - CSS + JS Clock​

  • 若 setTimeout 要重複呼叫，在其回呼函式內再 setTimeout 一次
  • requestAnimationFrame 是以畫面更新頻率來重複呼叫，當頁面不可見時不會呼叫以節省效能，使用上和 setTimeout 類似，若要重複呼叫需在回呼函式內再 requestAnimationFrame 一次
  • 額外：document.visibilityState 會回傳目前網頁的可見狀態(visible, hidden, prerender)，可用此判斷網頁是否在背景或隱藏縮小
  • visibilitychange 事件為網頁可見狀態改變時會呼叫，搭配判斷 visibilityState 可做很多功能

用 Js 操控 CSS 偽元素屬性：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html

Last updated on