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

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

Transcript

1. Amplify Console Amplify Meetup #2
4. IR
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
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 } ]
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'], }, }) } }
24. Amplify AWS AWS
25. Amplify GraphQL AWS AppSync DynamoDB Lambda S3
26. Next.js Amplify Console CDK