Web_Advance
  • 本書簡介
  • Node.js 部分
    • Node 版本管理
    • 使用NPM
      • Yarn
    • 開始Node
    • Worker Thread
    • REPL
    • TCP
    • path
    • Cluster and Child_process
    • assert (自訂拋出的錯誤)
    • Stream(流)
    • util (工具類)
    • EventEmitter
    • fs 文件操作
    • Buffer
      • Binary Diff
      • 查看 Binary 檔案內容
    • Process (進程)
    • 錯誤處理
  • OS
  • Async Hook
  • TCP
  • HTTP
    • 有關爬蟲
    • HTTP/2
    • HTTP Protocal
  • HTTPS
    • HTTPS 流程
    • SSL pinning
    • HTTPS 封包解密
    • 建立自簽發 HTTPS 證書
    • 幫網站加上HTTPS
    • HTTPS原理
  • Crypto加密
  • 有關繼承
  • JS 基本
    • JavaScript 迴圈與異步處理
  • 使用 Express
    • 上傳檔案
    • 圖片伺服器
    • 簡單範例
  • 使用 Nest.js
  • 使用MongoDB
    • 設置帳戶登入權限
    • Mongoose 框架
    • 進階Mongo
    • 基本環境操作
    • MongoDB Sharding
  • 使用MySQL
    • Schema 架構設計
    • SQL 語法
    • SQL Procedure
    • Node.js 操作 MySQL
    • 使用 Sequelize
      • DB Migration
      • function
  • 使用PostgreSQL
    • 常見問題
    • replica
    • 基本指令
    • 使用Node.js操控pg
    • SQL 基礎
  • 使用TypeORM
  • RethinkDB
  • CSS 深度探討
    • Width, Height
  • React
    • 第三方組件
      • Formik
    • styled component
    • propTypes
    • React webpack 部署
    • React util
    • 寫component並且publish
    • create-react-app
    • Context API
    • i18n
    • Server side render
    • Next.js教學
    • Higher order component 與 Recompose
    • component 間 互相存取
    • React hook
  • React router
    • 自己寫一個Router
  • Redux
    • Redux Toolkit
    • 小技巧
    • Redux sagas
    • compose
  • React Native
    • adb
    • InApp Billing
    • Icon
    • SVG
    • Firebase
      • Phone Auth
    • 自動化測試
    • Splash screen
    • Websocket
    • Googla OAuth
      • iOS
      • Android
    • Facebook OAuth
      • iOS
      • Android
    • IOS
    • 第三方組件
      • Auth Code Input
      • Country Code Picker
      • onboarding screen
      • Toast
    • ESlint
    • Push notification
    • Android 上架步驟
    • Expo
    • router
      • react-navigation套件
    • 原生組件
      • RefreshControl
      • Modal
      • Alert
      • button
      • KeyboardAvoidingView
      • Drawer
      • Image
    • 限制螢幕垂直與水平
    • NativeBase UI
    • Debug
    • 常見問題
    • Network
    • 硬體操作
      • 隱藏鍵盤
      • 地理位置
      • 相機與圖片庫存取
    • Async Storage
    • Animation
    • Admob
  • JS 模組化
  • 使用 Webpack
  • 使用 Babel
  • JWT Token
  • ES6 ES7 ES8
    • Array method
    • ES8 Async
    • ES6 Proxy
    • ES6 Object
    • ES6 Arrow function
    • ES6 Promise
    • ES6 Symbol
    • ES6 Generator
    • ES6 Set,Map
    • ES6 Class
  • 模板引擎
    • Mustache
    • Handlebars.js
    • EJS
  • ESLint
  • 部屬到OpenShift
  • OpenStack
  • OAuth
    • Twitter OAuth
    • Google authenticator
    • facebook oauth
      • facebook like ,share
    • google oauth
  • Redis
  • 做一個簡單的markdown editor
  • Websocket
    • WebSocket 相關 Protocol
  • Sublime 安裝套件
  • Google api
    • Cloud Run
    • speech api
    • place autocomplete
    • Geocode
    • Map
      • React map
    • vision api
    • Google-recaptcha
    • Google sheet
  • Instagram API
  • Markdown 與 code pretty js
  • HTML5
    • IntersectionObserver
    • HTML5 audio
    • HTML5 Video 與 WebRTC
      • WebRTC 進階
      • WebEX API
    • HTML5 IndexedDB
  • Google Cloud Platform (GCP)
    • Cloud Storage
    • Cloud storage 串接 Cloud CDN
  • Vim 編輯器
  • 使用nginx
    • config
  • Unix 實用指令
    • 新 VPS 安裝流程
    • Ubuntu 22 安裝
    • Shell Script 教學
  • Git 實用指令
    • Git hook
    • 加上 SSH-key 到 GitHub
    • GPG簽名
  • SSH 實用指令
  • 有關Fetch與axios與跨域請求
  • 圖片上傳相關
    • imgur API
  • JS 格式轉換
  • js trick
  • AWS
    • AWS EBS
    • AWS HTTPS 憑證
    • AWS Cloudfront、ELB、ACL
    • AWS Athena
    • AWS CloudWatch、SNS
    • AWS RDS
    • AWS lambda
      • 範例
      • 加上權限控管
    • AWS S3
    • AWS DynamoDB
      • 結合Lambda
    • 快速把 EC2 串上 AWS Cloudfront CDN
    • AWS 證照相關
  • 有關日期Date
  • VS code 編輯器
    • VSCode 外掛 Plugin
  • CI with Gitlab&Jenkins
  • API 測試
    • Postman
      • 設置 Postman 環境變數
    • API Blueprint
    • swagger
      • 註解寫在Code內生成swagger UI
  • Javascript 實用Lib
  • 遠端寫程式
  • Quicktime錄影注意事項
  • Web開發進階Bug
  • Web壓力測試
  • LineBot
  • PM2部署
  • i18n
  • VPN
  • Protocol Buffers
  • Docker教學
    • LXC LXD
    • Docker Compose
    • Docker 原理
    • Docker 指令
  • E2E Testing
    • Cypress
    • PlayWright
    • Puppeteer 與其他 UI 測試工具
  • Unit Test (Jest & enzyme)
    • React Testing Library
    • mocha
  • Cassandra
    • cluster
  • Distribute Web
    • Dat project
    • IPFS project
  • Cluster and Child_process
  • 打包應用程式
  • Java
    • 使用gradle結合docker
  • Debug 頁面
  • Proxy
  • Chrome extension
  • 消息系統
    • RabbitMQ
  • 金流串接
    • Paypal
    • spgateway智富通
    • Stripe 串接
  • 有關Log
  • 設定 feature flag
  • Azure
    • Face API
    • Image Analyze API
    • Azure Serverless
    • Cosmos DB
      • 使用 SDK
      • 以 RESTful 操作 DB
      • 一致性策略與 DB replicate
  • NodeBB 筆記
  • 瀏覽器快取與緩存(Etag, If-None-Match)
  • 瀏覽器快取與緩存(Expires, Last-modified, Cache-Control)
  • Node.js 第三方模組
    • OpenCV
  • Kubernetes
    • 本地測試 MiniKube
  • Ngrok 使用
  • Telegram MiniAPP 開發
  • Firebase 教學
  • 演算法筆記
  • 圖表
    • Echart
    • TradingView 圖表
    • D3
    • 熱力圖 heatmap
  • 後端緩存 Cache
  • 資料一致性
  • Web 安全機制
    • Cookie 與 LocalStorage
  • Vue
    • Element UI
    • Devtool
    • Vuex
    • Vue router
  • 相關網路協議
    • 網路 IP 基礎
    • Google Search 技巧
    • 網路診斷工具
    • IP
    • DNS
  • GitLab 與 Drone
  • SMTP、POP、IMAP
    • SendGrid
  • IPC
  • 串流服務
    • Twilio
    • Agora
  • 其他資源
  • GraphQL
  • Typescript
  • UI 相關資源
  • FFmpeg
  • Unity 遊戲開發筆記
  • Influx DB
  • Windows 相關
  • DALL·E 3
  • Coap
  • Slack API
  • 資訊安全
    • 破解 ZIP 密碼
Powered by GitBook
On this page
  • 部署到AWS
  • 上傳檔案
  • 注意事項
  • 其他AWS服務說明
  • AWS cloudfront 串接 S3
  • AWS load balancer
  • ELB 設定 HTTPS
  • 串接 Cloudfront 與 ELB
  • 清除 Cloudfront Cache
  • Cloudfront 預設不會傳 origin 的 Querystring 與 Header
  • 從現有 EC2 快速建立複製的 EC2
  • ACL 防護
  • AWS ECR

Was this helpful?

Edit on GitHub
  1. AWS

AWS Cloudfront、ELB、ACL

PreviousAWS HTTPS 憑證NextAWS Athena

Last updated 10 months ago

Was this helpful?

部署到AWS

記得開security group 來開port

上傳檔案

如果沒辦法用SFTP出現permission deny須先把該EC2上的資料夾使用sudo chmod 777 資料夾名稱來開啟權限即可

GUI部分,在window可用WINSCP或FileZillz在Mac可用CyberDuck

注意事項

1.如果上傳檔案時沒有權限,但你覺得一個一個資料夾開權限太麻煩,於是在usr之類的大資料夾整個開權限後會出現整個sudo出現錯誤

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set

原因:: 目前還沒找到解法,網路上目前推薦重灌系統

2.Elastic IP分配後如果把該機器刪掉,之後自開一台把同個Elastic IP分配,可能會產生錯誤,所以建議開新機器並分配新的Elastic IP

3.如出現 以下可輸入sudo chmod 400 ~/Downloads/Trading-Platform.pem,並且ssh不要輸入sudo

Load key "/Users/eason.wang/Downloads/Trading-Platform.pem": bad permissions Permission denied (publickey).

其他AWS服務說明

可參考以下不錯文章

AWS cloudfront 串接 S3

創建好 S3 後上傳檔案, bucket 先設為 private,且不用開啟靜態 host,之後設置 cloudfront 後使用OAI 讓他更改 bucket policy,之後記得設置 cloudfront 預設根路徑為 index.html (S3 上的)

AWS load balancer

要先點選左側創建 Target Group (目標群組) 且連結到 EC2,之後在下方 Target 加入 EC2 目標,並確認 health check 正常:

1.設置 Target

2. health 設置,他會實際發送請求到 EC2 上。你可以在下面是設置請求路徑與 http or https。

3.之後記得要去 LB 安全群組設置,不能用 default,不然會連線不到。

4.設置後用 ELB 創建後自動產生的 DNS 名稱即可連線到 EC2 上的 server。

ELB 設定 HTTPS

假設之後會把 cloudfront 綁定到 ELB 前方的話,這段不一定要做, ELB 保持 HTTP 即可

記得去申請 acm 的 *.domain 證書,可用在 api.domain 網域,然後串接上去 ELB listener

最後到 Route53 新增 A 紀錄使用 ELB 即可

串接 Cloudfront 與 ELB

這邊記得備用網域設置要使用的 domain,且使用的 https 證書與 ELB 相同即可。

如果 ELB 可以直接設定為 A record 且連線正常,通常在 ELB 前面多串一個 cloudfront 然後把 A record 從 ELB 改為 cloudfront 也可以正常。

設定內容

  • Origin Domain Name: 選擇 ELB

  • Origin Path: 空白

  • Origin Protocol Policy: HTTP Only (CloudFront後面走 HTTP 即可)

  • Viewer Protocol Policy: Redirect HTTP to HTTPS

  • Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

  • Alternate Domain Names: 設定你的網站網址 (api.domain....)

  • 來源請求政策選:All Viewer (沒選會無法傳遞 query string)

  • SSL Certificate: 使用 AWS Certification Manager 建立,將憑證建立在 (us-east-1) 才能使用。

  • 備用網域別名記得設定跟要設置的網域相同,不然之後 route53 無法選擇到該 CDN

設定後如果直接前往 cloudfront 給的網址會出現 502 錯誤,記得要先去 route53 設定好 A record 且指向 cloudfront,這樣前往要去的 domain 就可以了,但不要直接連到 cloudfront domain。

且記得設置 "僅限 HTTP" 就好,讓流量從 cloudfront 後就從 HTTPS 轉為 HTTP,不然會有 server 502 ssl error。

最後,綁定到 route53,記得紀錄類型下方開啟別名,才能選得到 cloudfront

清除 Cloudfront Cache

Cloudfront 請求一次 API 後就會 cache 不會重複請求到 server,所以返回資料有改動的話要記得添加

如果用 API 或 static asset 更改內容後沒更新,需要使用 Invalidation 更新。

輸入要重置的路徑

Cloudfront 預設不會傳 origin 的 Querystring 與 Header

這邊要特別留意:

記得選擇 origin request policy

從現有 EC2 快速建立複製的 EC2

包含內部應用程式內容。

步驟:磁碟區->建立快照->快照建立 AMI->AMI建立 instance

ACL 防護

ACL 為類似 cloudflare DDos 防護的功能,能設置 RateLimit 等請求阻擋,搭配 cloudfront 使用。

但可能會影響到正常功能,例如有時上傳檔案會被 ACL commonRuleSet 擋住

AWS ECR

docker image 託管服務。

1.如果遇到如下問題:

is not authorized to perform: ecr-public:GetAuthorizationToken on resource: * because no identity-based policy allows the ecr-public:GetAuthorizationToken action

Private registry: AmazonEC2ContainerRegistryFullAccess

Public registry: AmazonElasticContainerRegistryPublicFullAccess

https://www.youtube.com/watch?v=WxhFq64FQzA
http://stackoverflow.com/questions/20939562/scp-permission-denied-publickey-on-ec2-only-when-using-r-flag-on-directories
http://stackoverflow.com/questions/16682297/getting-message-sudo-must-be-setuid-root-but-sudo-is-already-owned-by-root/19306929#19306929
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/controlling-origin-requests.html#origin-request-create-origin-request-policy
https://docs.aws.amazon.com/waf/latest/developerguide/listing-managed-ips.html
https://stackoverflow.com/questions/64853122/aws-waf-getting-403-forbidden-error-while-trying-to-upload-an-image
https://stackoverflow.com/questions/65727113/aws-ecr-user-is-not-authorized-to-perform-ecr-publicgetauthorizationtoken-on-r
Amazon AWS – 架構與服務