Deploy a SPA JS app to AWS automatically with stack: GitHub, CodePipeline,
CodeBuild, CloudFront, S3 and Route53

1. Create S3 bucket

  • Create new bucket with name as same as domain: Eg: kuadx.lookatmedam.jp
  • Update Bucket Policy
1
2
3
4
5
6
7
8
9
10
11
12
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::kuadx.lookatmedam.jp/*"
        }
    ]
}
  • Properties —> Static website hosting —> Use this bucket to host a website
1
2
Index document: index.html
Error document: index.html

2. CodeBuild

  • Add buildspec.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
version :  0.2

phases :
  install :
    runtime-versions:
        nodejs: 10
  pre_build :
    commands :
      - echo 'start pre_build phase'
      - npm install 2>&1
  build :
    commands :
      - echo 'start build phase'
      - npm run build 2>&1
      - npm run generate 2>&1
  post_build :
    commands :
      - echo 'start deploy to S3'
      - aws s3 sync dist/. s3://s3_bucket.name/
  • Create CodeBuild project

  • Vào IAM —> Create Policy - name: s3_kuadx.lookatmedam.jp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:ListBucketByTags",
                "s3:GetLifecycleConfiguration",
                "s3:GetBucketTagging",
                "s3:GetInventoryConfiguration",
                "s3:GetObjectVersionTagging",
                "s3:ListBucketVersions",
                "s3:GetBucketLogging",
                "s3:ListBucket",
                "s3:GetAccelerateConfiguration",
                "s3:GetBucketPolicy",
                "s3:GetObjectVersionTorrent",
                "s3:GetObjectAcl",
                "s3:GetEncryptionConfiguration",
                "s3:GetBucketRequestPayment",
                "s3:GetObjectVersionAcl",
                "s3:GetObjectTagging",
                "s3:GetMetricsConfiguration",
                "s3:GetBucketPublicAccessBlock",
                "s3:GetBucketPolicyStatus",
                "s3:ListBucketMultipartUploads",
                "s3:GetBucketWebsite",
                "s3:GetBucketVersioning",
                "s3:GetBucketAcl",
                "s3:GetBucketNotification",
                "s3:GetReplicationConfiguration",
                "s3:ListMultipartUploadParts",
                "s3:GetObject",
                "s3:GetObjectTorrent",
                "s3:DescribeJob",
                "s3:GetBucketCORS",
                "s3:GetAnalyticsConfiguration",
                "s3:GetObjectVersionForReplication",
                "s3:GetBucketLocation",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::*"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::kuadx.lookatmedam.jp/*"
        }
    ]
}
  • Attach Policy này vào Role codebuild-lookatme-kuadx
  • Try build —> Succeed rồi thì tiếp.

3. Code Pipeline

Skip deploy stage as it’ve been done in CodeBuild

—> Succeed rồi thì thử cái domain static website hosting ở trong S3 xem lên chưa.

4. CloudFront

Create Distribution —> Web

1
2
3
4
5
6
Origin Domain Name	             : Domain S3 Static Web Hosting
Viewer Protocol Policy	         : Redirect HTTP to HTTPS
Allowed HTTP Methods	           : GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
SSL Certificate	                 : Custom SSL Certificate
Default Root Object	             : index.html
Alternate Domain Names (CNAMEs)	 : kuadx.lookatmedam.jp

Chờ một lúc cho Distribution nó chuyển thành Deployed

5. Route 53

Vào Route53 —> Hosted Zones —> Chọn domain —> Create new record set