Deploy React project to S3 by using CI/CD pipelines(Part 2)

In this part we will automate work with S3. If you don’t know how configure S3 check our first part.

1. Create buildspec.yml

Copy the file below with replacing “pipeline-app-test” with your S3 bucket name and set to the root of the project

version: 0.2
 
phases:
 install:
   commands:
     - echo "Installing dependencies"
     - npm install
 build:
   commands:
     - echo "Building"
     - npm run build
 post_build:
   commands:
     - echo "Synchronizing"
     - aws s3 sync build/ s3://pipeline-app-test --delete

2. CodeBuild

Find CodeBuild in AWS search string and click Create build project

Choose name for the project and scroll down to the Source section

In accordance with the screenshot below, select:

• Github at Source provider (or other if you have other)
• Repository in GitHub account
• Select a repository from the list
• The branch which you want to use for create a pipeline

Below in the Primary source webhook events section, enable the event-based rebuild option (1). Select PUSH (2) as an event.

In the Environment section, select everything in accordance with the screenshot:

• Ubuntu
• Standard
• aws/codebuild/standard:5.0 (just select last version)

In the Logs section, enable CloudWatch:

In the Group name write codebuild, and in the Stream name — the name of the project in CodeBuild, which we are creating now (if you forgot the name, just scroll to the top of the creation screen and copy the project name).

3. Bucket permissions

Click Build details

Scroll down to the Environment section and click on the Service role link:

In the window that opens, select the first policy:

And click edit policy

Copy this code and, of course, replace pipeline-app-test with the name of your bucket:

{
     "Effect": "Allow",
     "Action": [
         "s3:PutObject",
         "s3:GetObjectAcl",
         "s3:GetObject",
         "s3:DeleteObjectVersion",
         "s3:GetObjectVersionAcl",
         "s3:ListBucket",
         "s3:DeleteObject",
         "s3:PutObjectAcl",
         "s3:GetObjectVersion"
     ],
     "Resource": [
         "arn:aws:s3:::pipeline-app-test/*",
         "arn:aws:s3:::pipeline-app-test"
     ]
},

Insert this code as a new object into the Statement array.

Ready. Click Review policy and Save changes.

The final

Now when you will push code to the selected branch of the selected repository, CodeBuild will build application and upload build to bucket in S3. After you will try to do this, you will see something similar:

To check, click on the Properties tab:

Scroll down to the bottom and follow link

This instruction have been inspired by @lyuda.dzyubinska and created with @illia.filatov.hn support