More Related Content Similar to 静的サイトどこにする？ (20) 5. 静的サイト
Nuxt.js で nuxt generate した静的サイト
dist ディレクトリをデプロイ
今回はサンプルとして画像ファイル1枚貼ってあるだけ
Nuxt.js使った意味は特にないです、たまたま⼿元にあっただけ
5
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
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
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
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
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
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
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
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
