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

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

58b40ae3b0db6cf0202a3802e9dd70fe?s=47 cockscomb
November 27, 2020

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

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

58b40ae3b0db6cf0202a3802e9dd70fe?s=128

cockscomb

November 27, 2020
Tweet

Transcript

  1. Amplify Console Amplify Meetup #2

  2. None
  3. None
  4. IR

  5. None
  6. None
  7. None
  8. Next.js React Server-side Rendering Webpack etc.

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

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

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

  12. $ next export

  13. None
  14. CI/CD

  15. AWS Amplify Console

  16. Pull Request BASIC

  17. CI/CD

  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 / * * / * '
  19. [ { "source": "/images", "target": "https: / / images.otherdomain.com", "status":

    "200", "condition": null }, { "source": "/ < * > ", "target": "/404.html", "status": "404-200", "condition": null } ]
  20. None
  21. AWS CDK Infrastructure as Code AWS CloudFormation TypeScript

  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'], }, }) } }
  23. None
  24. Amplify AWS AWS

  25. Amplify GraphQL AWS AppSync DynamoDB Lambda S3

  26. Next.js Amplify Console CDK