# 無伺服器架構：談談 Serverless ###### 正男 ###### 2020/05/30 --- ### 正男 - Rocko - 任職於 : 世成科技 - PHP 也有 Day 、Laravel 台灣固定班底 - roc26002w@gmail.com - FB : [正男](https://www.facebook.com/roc26002w) --- ### 今天可以討論到 - AWS Service - serverless 部署 - RDS - GCP Service - serverless 部署 - Cloud SQL --- ### 什麼是 Serverless? ---- ### 無伺服器管理 - 無須管理 Server 就能執行寫好的 code 或服務 <!-- .element: class="fragment" data-fragment-index="1" --> - 排除掉 Server 的 OS 維護、容量等的部署及調整的時間 <!-- .element: class="fragment" data-fragment-index="2" --> - 也可以排除掉規畫資料庫 、 cluster 以及如何儲存等系統架構 <!-- .element: class="fragment" data-fragment-index="3" --> - 簡單來說就是 code 交給 (~~苦手~~), (~~苦手~~) 就會自動的把底層裝好並執行 code 或服務 <!-- .element: class="fragment" data-fragment-index="4" --> - 如果你有，恭喜你~~可以左轉 exit(); 唷~~ <!-- .element: class="fragment" data-fragment-index="5" --> - 但很多時候我們就是那個苦手，所以我們還是繼續往下嘿 <!-- .element: class="fragment" data-fragment-index="6" --> --- ### Serverless 的二三事 ---- ### 常見的部署方法 - 一台伺服器，運行所有的程式碼 <!-- .element: class="fragment" data-fragment-index="1" --> * 開一台伺服器 -> 設定底層架構 -> (ftp, scp, ssh git, rsync, CI....) 部署 -> 提供服務 <!-- .element: class="fragment" data-fragment-index="2" --> - 工程師除了管理程式碼以外，還需要管理伺服器的健康狀態 <!-- .element: class="fragment" data-fragment-index="3" --> --- ### Serverless 部署 - run commend serverless deploy <!-- .element: class="fragment" data-fragment-index="1" --> * 開發程式 -> run serverless deploy -> 提供服務 <!-- .element: class="fragment" data-fragment-index="2" --> * 理想很偉大、現實很殘酷 <!-- .element: class="fragment" data-fragment-index="3" --> * 開發程式 -> ~~操作一瞇瞇的雲端服務~~(可能) -> run serverless deploy -> 提供服務 <!-- .element: class="fragment" data-fragment-index="4" --> --- ### Serverless 優點 - 不管理，更新，配置服務器或容器 <!-- .element: class="fragment" data-fragment-index="1" --> - 不用操心要保留或自動擴展服務器或容器 <!-- .element: class="fragment" data-fragment-index="2" --> - 只對使用到的地方負責(付費 <!-- .element: class="fragment" data-fragment-index="3" --> - 是一種可擴展、而且是可靠的系統架構 <!-- .element: class="fragment" data-fragment-index="4" --> - Function as a Service (FaaS) <!-- .element: class="fragment" data-fragment-index="5" --> - FaaS 託管提供商負責設置所有內容，保持應用程序24/7可用，並且依程式碼運行來收費 <!-- .element: class="fragment" data-fragment-index="5" --> - deploy 方便，能在 push code 的時候就直接把 code 部署完成 <!-- .element: class="fragment" data-fragment-index="6" --> --- ### 託管提供商 - AWS - Lambda - GCP - App Engine - Azure - App Service --- ### Serverless 會遇到的問題 - 確保端點運行時間不會超過 30 秒 <!-- .element: class="fragment" data-fragment-index="1" --> - 背景作業問題 <!-- .element: class="fragment" data-fragment-index="2" --> - 所有解決方案都會是雲解決方案 (依賴第三方服務 <!-- .element: class="fragment" data-fragment-index="3" --> - 如果不用 framework 幫忙配置，配置會變複雜 <!-- .element: class="fragment" data-fragment-index="4" --> - debug 會有點麻煩, 需要用到 log 處理機制 <!-- .element: class="fragment" data-fragment-index="6" --> - Cloud Watch <!-- .element: class="fragment" data-fragment-index="7" --> - 無法處理 Schedule job <!-- .element: class="fragment" data-fragment-index="8" --> - Lambda 非 always running <!-- .element: class="fragment" data-fragment-index="9" --> - 會有啟動時間 <!-- .element: class="fragment" data-fragment-index="10" --> ---- - 登入狀態無法保存 - Request 無法保證運行在同一個 Lambda 上 <!-- .element: class="fragment" data-fragment-index="1" --> - 無法將 file 儲存在 Lambda 上 <!-- .element: class="fragment" data-fragment-index="2" --> - Lambda 的限制 <!-- .element: class="fragment" data-fragment-index="3" --> - 1000 個併發數 / per account <!-- .element: class="fragment" data-fragment-index="4" --> - 512 MB /tmp dir <!-- .element: class="fragment" data-fragment-index="5" --> - 3G memory <!-- .element: class="fragment" data-fragment-index="6" --> - 900/s timeout <!-- .element: class="fragment" data-fragment-index="7" --> - [Lambda-limit](https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-limits.html) ---- - App Engine 的限制 - 無法同時上傳 10000 個檔案<!-- .element: class="fragment" data-fragment-index="1" --> - [App-Engine-quotas](https://cloud.google.com/appengine/quotas?hl=zh-tw)<!-- .element: class="fragment" data-fragment-index="1" --> --- ### Demo AWS Lambda  ----  ---- ### Laravel + Bref + Serverless + RDS ---- #### 在開始之前..... ---- #### 要先儲備一點點的~~姿勢~~ (知識) - 本機環境 required <!-- .element: class="fragment" data-fragment-index="1" --> - [laravel installer](https://laravel.com/docs/7.x/installation#installing-laravel) - [node](https://nodejs.org/en/) - [serverless](https://www.serverless.com/) - node >> npm install -g serverless ---- - [aws cli v2](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html) - Ubuntu Install ``` curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" unzip awscliv2.zip sudo ./aws/install ``` ---- - AWS Service - ~~IAM~~ - ~~VPC~~ - Security Groups - Subnets - API Gateway - ~~Route53~~ - Lambda - RDS --- ### DEMO Project - AWS Lambda ---- ### 設定 aws credential - `$> aws configure` - AWS-IAM 取得的 - `access_key` - `secret_key` ---- ### 建立 laravel 專案 - $> laravel new demo_aws ---- ### 專案內加入 [bref](https://bref.sh/docs/frameworks/laravel.html) package - PHP runtimes for AWS Lambda - $> composer require bref/bref - $> ./vendor/bin/bref init <!-- .element: class="fragment" data-fragment-index="1" --> ---- ### 編輯 ./serverless.yml <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=149%25&si=false&es=2x&wm=false&code=service%253A%2520demo-aws%250A%250Aprovider%253A%250A%2520%2520%2520%2520name%253A%2520aws%250A%2520%2520%2520%2520region%253A%2520us-east-1%250A%2520%2520%2520%2520runtime%253A%2520provided%250A%250Aplugins%253A%250A%2520%2520%2520%2520-%2520.%252Fvendor%252Fbref%252Fbref%250A%250Afunctions%253A%250A%2520%2520%2520%2520website%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520handler%253A%2520public%252Findex.php%250A%2520%2520%2520%2520%2520%2520%2520%2520timeout%253A%252028%2520%2523%2520in%2520seconds%2520(API%2520Gateway%2520has%2520a%2520timeout%2520of%252029%2520seconds)%250A%2520%2520%2520%2520%2520%2520%2520%2520layers%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2524%257Bbref%253Alayer.php-74-fpm%257D%250A%2520%2520%2520%2520%2520%2520%2520%2520events%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520http%253A%2520'ANY%2520%252F'%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520http%253A%2520'ANY%2520%252F%257Bproxy%252B%257D'%250A%2520%2520%2520%2520artisan%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520handler%253A%2520artisan%250A%2520%2520%2520%2520%2520%2520%2520%2520timeout%253A%2520120%2520%2523%2520in%2520seconds%250A%2520%2520%2520%2520%2520%2520%2520%2520layers%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2524%257Bbref%253Alayer.php-74%257D%2520%2523%2520PHP%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2524%257Bbref%253Alayer.console%257D%2520%2523%2520The%2520%2522console%2522%2520layer%250A%250Apackage%253A%250A%2520%2520%2520%2520exclude%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520node_modules%252F**%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520public%252Fstorage%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520resources%252Fassets%252F**%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520storage%252F**%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520tests%252F**" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 更新 serverless.yml 加入 env 參數 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=seti&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=16.5px&lh=133%25&si=false&es=2x&wm=false&code=provider%253A%250A%2520%2520%2520%2520environment%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520APP_ENV%253A%2520dev%250A%2520%2520%2520%2520%2520%2520%2520%2520APP_DEBUG%253A%2520true%250A%2520%2520%2520%2520%2520%2520%2520%2520LOG_CHANNEL%253A%2520stderr%250A%2520%2520%2520%2520%2520%2520%2520%2520SESSION_DRIVER%253A%2520cookie%250A%2520%2520%2520%2520%2520%2520%2520%2520VIEW_COMPILED_PATH%253A%2520%252Ftmp%252Fstorage%252Fframework%252Fviews%250A%2520%2520%2520%2520%2520%2520%2520%2520APP_STORAGE%253A%2520%252Ftmp" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- #### 更新 app/Providers/AppServiceProvider.php <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=16.5px&lh=133%25&si=false&es=2x&wm=false&code=%252F**%250A*%2520Register%2520any%2520application%2520services.%250A*%2520%250A*%2520%2540return%2520void%250A*%252F%250Apublic%2520function%2520boot()%250A%257B%250A%2520%2520%2520%2520%252F%252F%2520Make%2520sure%2520the%2520directory%2520for%2520compiled%2520views%2520exist%250A%2520%2520%2520%2520if%2520(!%2520is_dir(config('view.compiled')))%2520%257B%250A%2520%2520%2520%2520%2520%2520%2520%2520mkdir(config('view.compiled')%252C%25200755%252C%2520true)%253B%250A%2520%2520%2520%2520%257D%250A%257D" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 利用 serverless 部署 - run serverless deploy - `$> serverless deploy` <!-- .element: class="fragment" data-fragment-index="1" --> ----  ---- ### 看一下 AWS Console * VPC * ApiGateway * Lambda ---- ### 新增新的端點測試 routes/web.php <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=text%2Fx-php&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=149%25&si=false&es=2x&wm=false&code=Route%253A%253Aget('hello'%252C%2520function%2520()%2520%257B%250A%2520%2520return%2520'Hi%2520PHP%2520Has%2520Day'%253B%250A%257D)%253B" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 測試 Lambda Artisan 指令 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=149%25&si=false&es=4x&wm=false&code=%2524%253E%2520.%252Fvendor%252Fbin%252Fbref%2520cli%2520demo-aws-dev-artisan%2520--%250A%2524%253E%2520.%252Fvendor%252Fbin%252Fbref%2520cli%2520demo-aws-dev-artisan%2520--%2520route%253Alist" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> --- ### Serverless Connect RDS Aurora ---- ### 建立 RDS - 使用 AWS Console 建立 RDS - (也可以) 使用 AWS cli 建立 RDS <!-- .element: class="fragment" data-fragment-index="1" --> ---- - 建立 php extensions 設定檔 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=149%25&si=false&es=2x&wm=false&code=mkdir%2520php%2520%2526%2526%2520mkdir%2520php%252Fconf.d%250Aecho%2520extension%253Dpdo_mysql%2520%253E%2520php%252Fconf.d%252Fphp.ini" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> <!-- .element: class="fragment" data-fragment-index="1" --> ---- ### 其它的 php-extensions (Optional) - AWS Lambda layers with PHP extensions. - 引入 [brefphp/extra-php-extensions](https://github.com/brefphp/extra-php-extensions) package <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=149%25&si=false&es=2x&wm=false&code=%2524%253E%2520composer%2520require%2520bref%252Fextra-php-extensions" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> <!-- .element: class="fragment" data-fragment-index="1" --> ---- ### 更新 serverless.yml - 加入 vpc 相關設定 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=vpc%253A%250A%2520%2520%2520%2520securityGroupIds%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520sg-abe037ce%250A%2520%2520%2520%2520subnetIds%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520subnet-7893f542%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520subnet-c5567e83%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520subnet-e5c34ee9%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520subnet-1671393e%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520subnet-66d9d612%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520subnet-11c6a674" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- - 加入 policies 設定 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=vpc%253A%250A%2520%2520%2520%2520securityGroupIds%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520...%250A%2520%2520%2520%2520subnetIds%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520...%250A%2520%2520%2520%2520policies%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520-%2520AWSLambdaVPCAccessExecutionRole%250A%2520" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 調整 RDS 資料庫連線 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=DB_CONNECTION%253Dmysql%250ADB_HOST%253Ddemo-laravel.cluster-cnquotyn0l6e.us-east-1.rds.amazonaws.com%250ADB_PORT%253D3306%250ADB_DATABASE%253Dlaravel%250ADB_USERNAME%253Dadmin%250ADB_PASSWORD%253Ddemo-laravel" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### Lambda env 覆寫優先權 - .env <!-- .element: class="fragment" data-fragment-index="1" --> - serverless.yml <!-- .element: class="fragment" data-fragment-index="2" --> - AWS Lambda Service <!-- .element: class="fragment" data-fragment-index="3" --> ---- ### MySQL 5.7.7 以下更新 AppServiceProvider.php fixed `Specified key was too long; max key length is 767 bytes" <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=use%2520Illuminate%255CSupport%255CFacades%255CSchema%253B%250A%250Apublic%2520function%2520boot()%250A%257B%250A%2520%2520%2520%2520Schema%253A%253AdefaultStringLength(191)%253B%250A%257D" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 測試資料庫連線 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=.%252Fvendor%252Fbin%252Fbref%2520cli%2520demo-aws-dev-artisan%2520--%2520migrate%253Ainstall" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 執行資料庫 Migrate <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=.%252Fvendor%252Fbin%252Fbref%2520cli%2520demo-aws-dev-artisan%2520--%2520migrate" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 調整 RDS 為 public access (~~確認用~~) - AWS Console - 測試 Sequel Pro 連線 --- ### 加入 Laravel Auth UI ---- ### 專案內加入 Laravel UI Package <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=composer%2520require%2520laravel%252Fui" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### Install Laravel UI <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=php%2520artisan%2520ui%2520vue%2520--auth%250Anpm%2520install%250Anpm%2520run%2520dev" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 設定 asset 資料夾 (S3) * 更新 serverless.yaml * BUCKET_NAME=laravel-public-demo <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=text%2Fx-php&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=resources%253A%250A%2520%2520%2520%2520%2520Resources%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520The%2520S3%2520bucket%2520that%2520stores%2520the%2520assets%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520Assets%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Type%253A%2520AWS%253A%253AS3%253A%253ABucket%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Properties%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520BucketName%253A%2520BUCKET_NAME%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520CorsConfiguration%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520CorsRules%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2520%2520AllowedHeaders%253A%2520%255B%2522*%2522%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520AllowedMethods%253A%2520%255BGET%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520AllowedOrigins%253A%2520%255B%2522*%2522%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520The%2520policy%2520that%2520makes%2520the%2520bucket%2520publicly%2520readable%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520AssetsBucketPolicy%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Type%253A%2520AWS%253A%253AS3%253A%253ABucketPolicy%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Properties%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Bucket%253A%2520!Ref%2520Assets%2520%2523%2520References%2520the%2520bucket%2520we%2520defined%2520above%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520PolicyDocument%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Statement%253A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520-%2520%2520%2520Effect%253A%2520Allow%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Principal%253A%2520'*'%2520%2523%2520everyone%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Action%253A%2520's3%253AGetObject'%2520%2523%2520to%2520read%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Resource%253A%2520!Join%2520%255B'%252F'%252C%2520%255B!GetAtt%2520Assets.Arn%252C%2520'*'%255D%255D%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520alternatively%2520you%2520can%2520write%2520out%2520Resource%253A%2520'arn%253Aaws%253As3%253A%253A%253A%253Cbucket-name%253E%252F*'" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 重新部署建立 Bucket - $> sls deploy ---- ### 修正 .env <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=text%2Fx-php&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=ASSET_URL%253Dhttps%253A%252F%252F%257BBUCKET_NAME%257D.s3.amazonaws.com" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 上傳 asset 資料夾 S3 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=aws%2520s3%2520sync%2520public%252F%2520s3%253A%252F%252F%2524%257BBUCKET_NAME%257D%252F%2520--delete%2520--exclude%2520index.php" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 進入 login 頁面查看 css 是否成功載入 - {{LAMBDA_URL}}/dev/login ---- - 假如上面的有聽沒有懂 - 沒有關係 <!-- .element: class="fragment" data-fragment-index="1" --> - 另一個選擇 : 課金 <!-- .element: class="fragment" data-fragment-index="2" --> - [Vapor](https://vapor.laravel.com/) <!-- .element: class="fragment" data-fragment-index="2" --> - 除了上面的，通通都幫您串好了 (CDN, DNS, Caches, SQS) <!-- .element: class="fragment" data-fragment-index="3" --> --- ### DEMO Project - GCP ---- ### 在開始之前..... ---- - 本機環境 required - gcloud - [install](https://cloud.google.com/sdk/docs/quickstart-debian-ubuntu) - `$> gcloud init` - - [Deploy App Engine Document](https://cloud.google.com/community/tutorials/run-laravel-on-appengine-standard?hl=zh-TW) ---- ### 建立 laravel 專案 - $> laravel new demo_gcp ---- ### 建立 GCP deploy 檔案 - $> touch app.yaml <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=yaml&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=runtime%253A%2520php72%250A%250Aenv_variables%253A%250A%2520%2520%2523%2523%2520Put%2520production%2520environment%2520variables%2520here.%250A%2520%2520APP_KEY%253A%2520YOUR_APP_KEY%250A%2520%2520APP_STORAGE%253A%2520%252Ftmp%250A%2520%2520VIEW_COMPILED_PATH%253A%2520%252Ftmp%250A%2520%2520SESSION_DRIVER%253A%2520cookie" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 複製 APP_KEY 到 app.yaml <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=sed%2520-i%2520%2522s%252FYOUR_APP_KEY%252F%2524(php%2520artisan%2520key%253Agenerate%2520--show%2520--no-ansi)%252Fg%2522%2520app.yaml" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 修改 bootstrap/app.php <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=text%2Fx-php&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=%2524app-%253EuseStoragePath(env('APP_STORAGE'%252C%2520base_path()%2520.%2520'%252Fstorage'))%253B" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 排除 Composer dev 套件 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=composer%2520install%2520--no-dev" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### Deploy <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=gcloud%2520app%2520deploy" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ----  ---- ### 建立 Cloud SQL - 使用 GCP Console 建立 Cloud SQL - (也可以) 使用 gcloud 建立 Cloud SQL <!-- .element: class="fragment" data-fragment-index="1" --> ---- ### 使用 GCP Console 建立 Database ---- ### 測試連線 - cloud_sql_proxy - 修正連線方式 to public - 調整 .env - $> artisan migrate:install ---- ### App engine 內部連線 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=DB_DATABASE%253A%2520YOUR_DB_DATABASE%250ADB_USERNAME%253A%2520YOUR_DB_USERNAME%250ADB_PASSWORD%253A%2520YOUR_DB_PASSWORD%250A%2523%2523%2520for%2520MYSQL%252C%2520use%2520DB_SOCKET%253A%250ADB_SOCKET%253A%2520%2522%252Fcloudsql%252FYOUR_CONNECTION_NAME%2522" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ### 加入 Laravel Auth UI ---- ### 專案內加入 Laravel UI Package <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=composer%2520require%2520laravel%252Fui" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### Install Laravel UI <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=php%2520artisan%2520ui%2520vue%2520--auth%250Anpm%2520install%250Anpm%2520run%2520dev" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### 更新 .gcloudignore - 加入 node_modules 資料夾 <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=%252Fnode_modules%252F" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### Asset Files Setting - 更新 app.yaml <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=handlers%253A%250A%2520%2520-%2520url%253A%2520%252F(.*%255C.(gif%257Cpng%257Cjpg%257Ccss%257Cjs))%2524%250A%2520%2520%2520%2520static_files%253A%2520public%252F%255C1%250A%2520%2520%2520%2520upload%253A%2520public%252F.*%255C.(gif%257Cpng%257Cjpg%257Ccss%257Cjs)%2524%250A%250A%2520%2520-%2520url%253A%2520%252F.*%250A%2520%2520%2520%2520secure%253A%2520always%250A%2520%2520%2520%2520redirect_http_response_code%253A%2520301%250A%2520%2520%2520%2520script%253A%2520auto" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---- ### Deploy <iframe src="https://carbon.now.sh/embed?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=one-dark&wt=none&l=powershell&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=6px&ph=4px&ln=true&fl=1&fm=Hack&fs=18px&lh=158%25&si=false&es=2x&wm=false&code=gcloud%2520app%2520deploy" style="transform:scale(0.7); width:1024px; height:473px; border:0; overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe> ---  --- ### 總結 ---- - Serverless 架構 <!-- .element: class="fragment" data-fragment-index="1" --> - AWS Serverless <!-- .element: class="fragment" data-fragment-index="2" --> - Laravel + Bref + Serverless + RDS <!-- .element: class="fragment" data-fragment-index="3" --> - [Vapor](https://vapor.laravel.com/) <!-- .element: class="fragment" data-fragment-index="3" --> - GCP Serverless <!-- .element: class="fragment" data-fragment-index="4" --> - Laravel + App Engine + CloudSQL <!-- .element: class="fragment" data-fragment-index="5" --> --- ### Q&A --- ## 謝謝大家