This is a reference to scale DevOps Workflows to Designers and Front End Developers to prototyping, validate and deploy landing pages, React, Vue, Angular Apps.
| Issue | Technology |
|---|---|
| Git Manager | Github |
| Infrastructure Provisioning | Terraform - Hashicorp IaC Multicloud Manager |
| Pipeline / Build Platform | CodePipeline + CodeBuild from AWS |
| Hosting System | Amazon S3 - Low Cost Object Storage with Website feature on AWS |
| Caching / CDN System | Amazon Cloudfront - AWS Global Content Delivery Network |
Edit the config.tf file and input the Github, Project Name, Develop and Production branches e etc.
Example:
variable "app_name" {
description = "Website project name"
default = "raj-personal-site"
}
variable "aws_region" {
description = "AWS Region for the VPC"
default = "us-east-1"
}
variable "git_repository_owner" {
description = "Github Repository Owner"
default = "msfidelis"
}
variable "git_repository_name" {
description = "Project name on Github"
default = "msfidelis.github.io"
}
variable "git_repository_branch" {
description = "Github Project Branch"
default = "master"
}
# Optional
variable "git_repository_dev_branch" {
description = "Github Project Branch"
default = "develop"
}You can edit your build specs in modules/website/templates/buildspec.yml
version: 0.2
phases:
pre_build:
commands:
- echo Deploy website
build:
commands:
- echo "add your steps and scripts here"
- rm -rf .git
- aws s3 sync --delete . s3://${bucket_name} --cache-control max-age=3600
post_build:
commands:
- echo 'Invalidating distribuition cache'
- aws cloudfront create-invalidation --distribution-id ${distribuition_id} --paths "/*"
-
Create your Github Access Token to Command Line. This link have all information about this.
-
Export Github Token as an environment variable.
export GITHUB_TOKEN=YOUR_TOKEN- Initialize Terraform
terraform init- Plan our modifications
terraform plan- Apply the changes on AWS
terraform apply- Go to Codepipeline Dashboard on AWS Console
- Access your S3 Bucket output
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent