https://github.com/codeandpepper/bestpicture
https://github.com/codeandpepper/bestpicture
apollo-client appsync aws aws-cli certificate-manager cloudformation cloudfront dynamodb graphql material-ui react route53 s3 typescript
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codeandpepper/bestpicture
- Owner: codeandpepper
- Created: 2020-08-10T09:05:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-13T14:59:27.000Z (about 5 years ago)
- Last Synced: 2025-01-25T07:07:40.622Z (9 months ago)
- Topics: apollo-client, appsync, aws, aws-cli, certificate-manager, cloudformation, cloudfront, dynamodb, graphql, material-ui, react, route53, s3, typescript
- Language: TypeScript
- Homepage: https://bestpicture.link/
- Size: 1.83 MB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Architecture
# Iac (Infrastructure as Code)
## Dev environment
1. Prepare `devops` S3 bucket, where we copy nested stack (it has to be in S3, not in the local file system) and backend files e.g. AWS AppSync graphQL schema etc.
```
cd .\infrastructure\
.\prepare-devops-bucket.bat 4560bce
```
2. Create CloudFormation stack
```
aws cloudformation create-stack --stack-name dev-4560bce --template-body file://stack.yaml --parameters ParameterKey=Environment,ParameterValue=dev ParameterKey=Subdomain,ParameterValue=4560bce --capabilities CAPABILITY_NAMED_IAM
```
3. Wait until infrastructure created. You can go to AWS console or use this command:
```
aws cloudformation wait stack-create-complete --stack-name dev-4560bce
```
4. Get needed stack outputs and set environment variables e.g. S3 Bucket name for static web hosting. You can go to AWS console or use this command:
```
aws cloudformation describe-stacks --stack-name dev-4560bce --query "Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue" --output text
```
5. Initialize DynamoDB database
```
cd ..\backend\DynamoDB
```
Get DynamoDB Movies table name
```
aws cloudformation describe-stacks --stack-name dev-4560bce --query "Stacks[0].Outputs[?OutputKey=='DynamoDBMoviesTableName'].OutputValue" --output text
```
Modify table name inside Movies.json
Batch write items
```
aws dynamodb batch-write-item --request-items file://Movies.json
```
6. Build and deploy frontend
Get AppSync API URI and key and set environment variables
```
aws cloudformation describe-stacks --stack-name dev-4560bce --query "Stacks[0].Outputs[?OutputKey=='AppSyncGraphQLApiUrl'].OutputValue" --output text
```
```powershell
$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL = 'TODO'
$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL
```
```
aws cloudformation describe-stacks --stack-name dev-4560bce --query "Stacks[0].Outputs[?OutputKey=='AppSyncApiKey'].OutputValue" --output text
```
```powershell
$Env:REACT_APP_AWS_APPSYNC_API_KEY = 'TODO'
$Env:REACT_APP_AWS_APPSYNC_API_KEY
```
Get S3 Bucket name for static web hosting
```
aws cloudformation describe-stacks --stack-name dev-4560bce --query "Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue" --output text
```
```
cd ..\..\frontend
yarn build
aws s3 sync build/ s3://4560bce.bestpicture.link --acl public-read
```
## Production environment
1. Prepare `devops` S3 bucket, where we copy nested stack (it has to be in S3, not in the local file system) and backend files e.g. AWS AppSync graphQL schema etc.
```
cd .\infrastructure\
.\prepare-devops-bucket.bat
```
2. Create CloudFormation stack
```
aws cloudformation create-stack --stack-name prod --template-body file://stack.yaml --parameters ParameterKey=Environment,ParameterValue=prod --capabilities CAPABILITY_NAMED_IAM
```
3. Wait until infrastructure created. You can go to AWS console or use this command:
```
aws cloudformation wait stack-create-complete --stack-name prod
```
4. Get needed stack outputs and set environment variables e.g. S3 Bucket name for static web hosting. You can go to AWS console or use this command:
```
aws cloudformation describe-stacks --stack-name prod --query "Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue" --output text
```
5. Initialize DynamoDB database
```
cd ..\backend\DynamoDB
```
Get DynamoDB Movies table name
```
aws cloudformation describe-stacks --stack-name prod --query "Stacks[0].Outputs[?OutputKey=='DynamoDBMoviesTableName'].OutputValue" --output text
```
Modify table name inside Movies.json
Batch write items
```
aws dynamodb batch-write-item --request-items file://Movies.json
```
6. Build and deploy frontend
Get AppSync API URI and key and set environment variables
```
aws cloudformation describe-stacks --stack-name prod --query "Stacks[0].Outputs[?OutputKey=='AppSyncGraphQLApiUrl'].OutputValue" --output text
```
```powershell
$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL = 'TODO'
$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL
```
```
aws cloudformation describe-stacks --stack-name prod --query "Stacks[0].Outputs[?OutputKey=='AppSyncApiKey'].OutputValue" --output text
```
```powershell
$Env:REACT_APP_AWS_APPSYNC_API_KEY = 'TODO'
$Env:REACT_APP_AWS_APPSYNC_API_KEY
```
Get S3 Bucket name for static web hosting
```
aws cloudformation describe-stacks --stack-name prod --query "Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue" --output text
```
```
cd ..\..\frontend
yarn build
aws s3 sync build/ s3://bestpicture.link --acl public-read
```