コーポレートサイトを静的化してAmplify Consoleにデプロイする

AWS Amplify Meet-up #2で発表しました。

Transcript

1. Amplify Console
   Amplify Meetup #2
   

   View Slide

2. View Slide

3. View Slide

4. IR
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. Next.js
   React
   Server-side Rendering
   Webpack
   etc.
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. $ next export
    

    View Slide

13. View Slide

14. CI/CD
    

    View Slide

15. AWS Amplify Console
    

    View Slide

16. Pull Request
    BASIC
    

    View Slide

17. CI/CD
    

    View Slide

18. 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
    /
    *
    *
    /
    *
    '
    

    View Slide

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

    View Slide

20. View Slide

21. AWS CDK
    Infrastructure as Code
    AWS CloudFormation
    TypeScript
    

    View Slide

22. 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'],
    
    },
    
    })
    
    }
    
    }
    

    View Slide

23. View Slide

24. Amplify
    AWS
    AWS
    

    View Slide

25. Amplify
    GraphQL
    AWS
    AppSync DynamoDB Lambda S3
    

    View Slide

26. Next.js
    Amplify Console
    CDK
    

    View Slide