Recommended
More Related Content
What's hot
What's hot (20)
Similar to 静的サイトどこにする？
Similar to 静的サイトどこにする？ (20)
Recently uploaded
Recently uploaded (7)
静的サイトどこにする？
- 3. リモートワークに際して買ったものたち せっかくtottorubyもリモート開催なので mono ¥ Apple Magic Trackpad2 14,800 Vinpok Taptek (Keyboard) 14,500 HP 27f 4K Display 35,000 Okamura Shift (Chair) 77,330 Dyson pure hot+coollink HP03 '17 42,900 3
- 5. 静的サイト Nuxt.js で nuxt generate した静的サイト dist ディレクトリをデプロイ 今回はサンプルとして画像ファイル1枚貼ってあるだけ Nuxt.js使った意味は特にないです、たまたま⼿元にあっただけ 5
- 6. 6
- 8. ⽐較対象 1. Netlify 2. Google Firebase 3. AWS S3 4. AWS Amplify 8
- 9. Netlify 9
- 10. 10
- 12. Netlify Setting (New site from Git) 12
- 13. Netlify Setting (Create a new site) 13
- 16. Netlify Setting (Site Name) 16
- 18. Netlify Settings (Deploy previews) 18
- 19. Netlify Deploy (Github Pull Request) 19
- 23. 23
- 24. Firebase Setting (Create Project) 24
- 25. Firebase Setting (Create Project) 25
- 26. Firebase Setting (Create Project) 26
- 28. Firebase tools install & setting $ npm install firebase-tools $ firebase login $ firebase init Hosting を選択 Use an existing project でWebで作成したプロジェクトを選択 公開するディレクトリを dist に変更 SPAは No を選択 dist/index.html の上書きは No を選択 28
- 29. Firebase deploy $ firebase deploy === Deploying to 'sample-image-8901e'... i deploying hosting i hosting[sample-image-8901e]: beginning deploy... i hosting[sample-image-8901e]: found 201 files in dist ✔ hosting[sample-image-8901e]: file upload complete i hosting[sample-image-8901e]: finalizing version... ✔ hosting[sample-image-8901e]: version finalized i hosting[sample-image-8901e]: releasing new version... ✔ hosting[sample-image-8901e]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/sample-image-8901e/overview Hosting URL: https://sample-image-8901e.web.app 29
- 32. AWS S3 32
- 33. 33
- 34. AWS S3 Setting $ aws s3api create-bucket --acl public-read --bucket watti-nuxt-sample --region ap-northeast-1 --create-bucket-configuration LocationConstraint=ap-northeast-1 $ aws s3api put-bucket-policy --bucket watti-nuxt-sample --policy file://bucket-policy.json $ aws s3 sync ./dist s3://watti-nuxt-sample $ aws s3 website s3://watti-nuxt-sample --index-document index.html http://watti-nuxt-sample.s3-website-ap-northeast- 1.amazonaws.com/ 34
- 36. AWS Amplify 36
- 37. 37
- 38. AWS Amplify deploy setting 38
- 39. AWS Amplify deploy setting 39
- 40. AWS Amplify deploy setting version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run generate artifacts: baseDirectory: /dist/ files: - '**/*' cache: paths: - node_modules/**/* 40
- 41. AWS Amplify deploy setting 41
- 42. Amplify app 42
- 45. サービス⽐較 45
- 46. サービス⽐較- 機能 Service Github 連携 CDN その他 Netlify ◯ △ Functions, Identity, Form, etc Google Firebase × ◯ Authentication, DB, Storage, Functions, Machine Learning AWS S3 × × AWS各サービス連携 AWS Amplify ◯ ◯ Backendサービス構築 46
- 47. サービス⽐較- 速度 Service CDN Edge IMG DL Netlify ⾃動 Singapore 10~15s Google Firebase ⾃動(Google CDN?) Tokyo? 1.0~2.0s AWS S3 ⼿動(CloudFront) Tokyo 1.0~1.5s AWS Amplify ⾃動(CloudFront?) (〃) 0.8~1.2s ※ watti⾃宅環境: 29Mbps ※ Is there a list of where Netlify's CDN pops are located? 47
- 48. サービス⽐較- 料⾦ Service 料⾦ Netlify 無料(通信量・ビルド制限あり) Google Firebase 無料(通信量・ストレージ制限あり) AWS S3 有料(通信量・ストレージ) AWS Amplify 有料(通信量・ビルド・ストレージ・デプロイ) AWSは無料利⽤枠あり(1年) 48
- 50. 参考 Netlify へデプロイするには？ File-based configuration(Netlify) Nuxt.jsで作成したWebサイトをFirebaseでホスティングする AWS CLIを使って、Amazon S3で静的ウェブサイトをホスティング したい AWS CLI Command Reference Firebase Hosting Cloud CDN ロケーション 50
- 51. おまけ 51
- 52. Functions 52
- 54. Netlify Functions AWS Lambdaを簡単に構築して叩けるよ 125,000 リクエストor 実⾏時間100h まで無料 Deploy AWS Lambda functions without configuring API gateways, coordinating deployments, or setting up an AWS account. “ “ 54
- 55. Netlify Functions Init $ npm i netlify-lambda $ code netlify.toml ### netlify.toml (追記) [build] functions = "dist/api" $ mkdir api $ code api/hello.js 55
- 56. api/hello.js exports.handler = function(event, context, callback) { callback(null, { statusCode: 200, body: JSON.stringify({ message: 'Hello, world!' }) }); }; リクエスト情報はevent, ユーザー情報とかはcontext イベントをトリガーとすることもできそう(deploy, test, identity) https://docs.netlify.com/functions/build-with-javascript/#format 56
- 57. package.json すでに dev , build はあるので別名で追加。 { ... "scripts": { ... "serve": "netlify-lambda serve api", "build-api": "netlify-lambda build api" }, ... } 57
- 58. Netlify Functions Local Serve $ npm run serve netlify-lambda: Starting server ... Built at: 2020/09/23 22:27:33 Asset Size Chunks Chunk Names hello.js 1.06 KiB 0 [emitted] hello Entrypoint hello = hello.js [0] ./hello.js 169 bytes {0} [built] Lambda server is listening on 9000 $ curl -s http://localhost:9000/.netlify/functions/hello | jq '.' { "message": "Hello, world!" } 58
- 59. Netlify Functions Setting & Deploy Netlify > watti-nuxt-sample > settings > Build & deploy > build を npm run generate && npm run build-api に変更。 masterへpushしてdeploy。 11:43:44 PM: ┌────────────────────────────────────────────────────────────┐ 11:43:44 PM: │ 2. onPostBuild command from @netlify/plugin-functions-core │ 11:43:44 PM: └────────────────────────────────────────────────────────────┘ 11:43:44 PM: 11:43:44 PM: Packaging Functions from dist/api directory: 11:43:44 PM: - hello.js 11:43:44 PM: 11:43:44 PM: (@netlify/plugin-functions-core onPostBuild completed in 79ms) 11:43:44 PM: 59
- 60. 60
- 61. Netlify Function Endpoint ホストは静的サイトと、パスはローカルと同じ。 $ curl -s https://watti-nuxt-sample.netlify.app/.netlify/functions/hello | jq '.' { "message": "Hello, world!" } 61
- 63. Firebase Functions Cloud Functions for Firebase Serverless Fremwork JavaScript / TypeScrit Admin SDKを利⽤してFirebaseの機能を利⽤できる 63
- 64. Firebase Functions Init firebase-tools はインストール済みなので以下のみ実施。 $ npm install firebase-functions $ firebase init functions 今回は javascript を選択, ESLint は No を選択 今依存パッケージをインストールするかを聞かれるので Yes $ ls functions/ index.js node_modules package-lock.json package.json 64
- 65. functions/index.js 下4⾏だけアンコメント。 const functions = require('firebase-functions'); // Create and Deploy Your First Cloud Functions // https://firebase.google.com/docs/functions/write-firebase-functions exports.helloWorld = functions.https.onRequest((request, response) => { functions.logger.info("Hello logs!", {structuredData: true}); response.send("Hello from Firebase!"); }); 65
- 66. Firebase Functions Local Serve $ firebase emulators:start $ curl -s http://localhost:5001/sample-image-4c899/us-central1/helloWorld Hello from Firebase! 66
- 67. 67
- 68. Firebase Function Deploy $ firebase deploy --only functions === Deploying to 'sample-image-4c899'... i deploying functions i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i functions: ensuring required API cloudbuild.googleapis.com is enabled... ⚠ functions: missing required API cloudbuild.googleapis.com. Enabling now... ✔ functions: required API cloudfunctions.googleapis.com is enabled Error: HTTP Error: 400, Billing account for project '224982070776' is not found. Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed. 従量課⾦プランにしろと⾔われたのでここまで...。 本来ならURLが発⾏されるらしいです。 Function URL (helloWorld): https://us-central1-foobar-d0c13.cloudfunctions.net/helloWorld 68
- 69. AWS Lambda 69
- 70. AWS Lambda (紹介不要？) Serverless Framework $ sls invoke local -f hello $ sls deploy --stage prod --profile prod AWS SAM $ sam local invoke $ sam deploy ruby使える！ 70
- 71. 参考 Netlify Functins File-based configuration Configure and deploy Functions Firebase Functions はじめに: 最初の関数の記述、テスト、デプロイ 71
- 72. おわり