Slide 1

Slide 1 text

Amplify Console Amplify Meetup #2

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

IR

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Next.js React Server-side Rendering Webpack etc.

Slide 9

Slide 9 text

Next.js Server-side Rendering Incremental Static Regeneration Static Generation

Slide 10

Slide 10 text

Server-side Rendering Incremental Static Regeneration Static Generation Build Request Request Request = Rendering

Slide 11

Slide 11 text

/pages/index.tsx / /pages/information.tsx /information /pages/information/outline.tsx /information/outline /public/ir/news.html /ir/news

Slide 12

Slide 12 text

$ next export

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

CI/CD

Slide 15

Slide 15 text

AWS Amplify Console

Slide 16

Slide 16 text

Pull Request BASIC

Slide 17

Slide 17 text

CI/CD

Slide 18

Slide 18 text

CI/CD amplify.yml YAML Amplify Console Amplify version: 1.0 backend: phases: preBuild: commands: - yarn build: commands: - amplifyPush - - simple frontend: phases: preBuild: commands: - yarn build: commands: - yarn workspace hatenacorp build - yarn workspace hatenacorp export artifacts: baseDirectory: ./packages/hatenacorp/out files: - '** / * ' cache: paths: - 'node_modules / * * / * '

Slide 19

Slide 19 text

[ { "source": "/images", "target": "https: / / images.otherdomain.com", "status": "200", "condition": null }, { "source": "/ < * > ", "target": "/404.html", "status": "404-200", "condition": null } ]

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

AWS CDK Infrastructure as Code AWS CloudFormation TypeScript

Slide 22

Slide 22 text

import * as cdk from '@aws-cdk/core' import * as amplify from '@aws-cdk/aws-amplify' export class AmplifyStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props ? : cdk.StackProps) { super(scope, id, props) const amplifyApp = new amplify.App(this, 'hatenacorp', { sourceCodeProvider: new amplify.GitHubSourceCodeProvider({ owner: 'hatena', repository: 'hatenacorp', oauthToken: cdk.SecretValue.secretsManager('hatenacorp-github-oauth-token'), }), autoBranchCreation: { patterns: ['staging'], }, }) } }

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Amplify AWS AWS

Slide 25

Slide 25 text

Amplify GraphQL AWS AppSync DynamoDB Lambda S3

Slide 26

Slide 26 text

Next.js Amplify Console CDK