前端專案 CI/CD 策略 (Terraform): 使用 AWS CodeCommit CodeBuild, WebPipeline CI/CD.

 使用 AWS Code Pipeline 進行前端專案的 CI/CD。

純前端專案，如果只是要 Build 成靜態檔案，其實可以直接把專案放在 Code Commit 上當 Git Repo，然後建置 Code Build, Code Deploy 來把專案自動 Build 到 S3，再啟動 CloudFront 來當前端 CDN，如此一來很快就可以讓前端專案串完自動化。

具體流程

1. 手動建立一個 S3，手動把網站 Policy 調整成靜態網站的樣子
2. 使用 Terraform 建立 Code Deploy, Code Build, Code Pipeline, CloudFront
3. 使用 Code Commit 作為 git repo，並開出兩個分支 production, staging， Code Pipeline 觸發條件則是這兩個 branch 發生變化，就會自動進行 CI/CD。

Terraform 模組是使用本篇文章自己手做的模組包，歡迎參考:

https://github.com/hpcslag/infrastructure_boilerplate/tree/main/terraform

我的模組中已經有自動處理 CloudFront 的部分，因此不需要手動進行調整。

main.tf:

locals {
  env          = var.env
  project_name = var.project_name
}

resource "aws_codedeploy_app" "app" {
  compute_platform = "Server"
  name             = var.project_name
}

module "deployment_group" {
    source = "./modules/deployment_group"
    count = length(var.environments)
    deployment_group_name = var.environments[count.index]
    app_name = aws_codedeploy_app.app.name
}

##########################################
# S3 網站 Staging, Production 及 Pipeline  
#########################################

module "web" {
  source = "./modules/web"

  count = length(var.environments)

  env          = var.environments[count.index] # local.env
  project_name = local.project_name

  domain_name = var.environments[count.index] == "production" ? var.production_domain_name : "${var.environments[count.index]}.${var.production_domain_name}"
}

module "web_pipeline" {
  source = "./modules/pipeline"

  count = length(var.environments)

  name         = "web"
  env          = var.environments[count.index] # local.env
  project_name = "${local.project_name}-web-${var.environments[count.index]}"
  aws_region   = var.aws_region

  repository_name = var.codecommit_website # Use custom name
  git_branch      = var.environments[count.index]

  #                      staging_web is "staging_web" module pointer
  cloudfront_distribution = module.web[count.index].cloudfront_distribution
  s3_bucket               = module.web[count.index].s3_bucket

  # each enviroment has their own build command, setup for frontend build task.
  deploy_script_env = "deploy:${var.environments[count.index]}"
}

這裡使用的 S3 Bucket 名稱就直接使用 domain name，也就是 bbb.AAA.com 網域，就有 bbb.AAA.com 的 S3 Bucket，這是設定在 s3_bucket 上的參數。

而這裡也會自動 count 所有環境，一般只有 production, staging。

vars.tf:

variable "project_name" {
  type = string
}

variable "env" {
  type = string
}

variable "aws_region" {
  type = string
}

variable "environments" {
  type = list(string)
}

variable production_domain_name {
  type = string
}

variable "cloudflare_email" {
  type = string
}

variable "cloudflare_api_key" {
  type = string
}

variable "cloudflare_zone_id" {
  type = string
}

vars/common.yaml:

project_name: # project_name
aws_region: # us-east-2
aws_profile: default # profile is in ~/.aws/config: [profile] xxxx


env: staging

# for s3 websites
environments: ["production", "staging"]

production_domain_name: "bbb.AAA.com"

其中 project_name 是 Code Commit 的 Project Name。

要套用設定，要用以下指令:

terraform init

terraform plan -var-file=vars/common.yaml

terraform apply