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

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