Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

cockscomb
November 27, 2020

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

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

cockscomb

November 27, 2020
Tweet

More Decks by cockscomb

Other Decks in Programming

Transcript

  1. Amplify Console
    Amplify Meetup #2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. $ next export

    View full-size slide

  7. AWS Amplify Console

    View full-size slide

  8. Pull Request
    BASIC

    View full-size slide

  9. 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 full-size slide

  10. [

    {

    "source": "/images",

    "target": "https:
    /
    /
    images.otherdomain.com",

    "status": "200",

    "condition": null

    },

    {

    "source": "/
    <
    *
    >
    ",

    "target": "/404.html",

    "status": "404-200",

    "condition": null

    }

    ]

    View full-size slide

  11. AWS CDK
    Infrastructure as Code
    AWS CloudFormation
    TypeScript

    View full-size slide

  12. 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 full-size slide

  13. Amplify
    AWS
    AWS

    View full-size slide

  14. Amplify
    GraphQL
    AWS
    AppSync DynamoDB Lambda S3

    View full-size slide

  15. Next.js
    Amplify Console
    CDK

    View full-size slide