CI/CD CodePipeline via GitHub Repo

Dane Forslund
4 min readMay 29, 2022

--

Automating the deployment of, and modifications to, an application is key to delivering the greatest possible user experience. It is crucial to find ways to update to latest versions as quickly and efficiently as possible.

One way to do this is through a CodePipeline that uses a GitHub repository paired with an S3 bucket. GitHub is a great tool for development collaberation on version control and application coding. Anytime you update code through GitHub, you can expect a speedy result on your application.

As an example of this, we will create a CodePipeline to launch a static website through CodeBuild and with a GitHub repo. To do this, we will Fork an existing repo, connect it to an S3 Bucket, and use CodePipeline to create our staging.

Step 1: Creating our S3 Bucket…

  1. Navigate to S3 in AWS
  2. Click, "Create bucket".
  3. Name bucket - I will name mine "philled".
  4. Un-check "Block all public access", as we want that allowed. Also check the acknowledgement below it which says, "I acknowledge that the current settings might result in this bucket and the objects within becoming public".
  5. Click, “create” again.

Step 2: Configure your Bucket…

  1. Open up the bucket you just created, and navigate to “properties”. Scroll all the way to the bottom, and click “edit” on the “Static website hosting” option.
  2. Click, “Enable” and specify the names of your index.html and error.html files. (you can just write those as is unless you plan to name them something else). Then click, “Save changes”.
  3. Now, navigate to the “permissions” tab and select “edit” on your bucket policy. Click “Policy generator” (or customize mine below) and fill in the policy requirements. Under “Actions” you will select “GetObject”.

Ours will look like this:

Go ahead and click “Generate Policy” and copy the text inside. Replace the current policy with the new policy.

This one looks like this:

{
"Id": "Policy1653853839796",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1653853838629",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::philled/*",
"Principal": "*"
}
]
}

I added, “/*” after my bucket ARN in order to allow access to all resources in my bucket. Finally, select “Save Changes” at the bottom right of your screen.

Now let's make our way to CodePipeline, under our AWS Services.

  1. Go ahead and hit, “Create pipeline”, name it, and click “Next”.
  2. Under the source provider option, choose the latest version of GitHub (version 2), and below that click, “Connect to GitHub”. Type in your GitHub username, and then click the authorize option. Upon approval, you will be able to choose the repo of your choice from the repository name section and the Branch you wish to work from. Then click, “Next”.
  3. Choose AWS CodeBuild as our Build provider, and choose the region you wish to work in, then select “Create project”. Here you can name, describe, and configure your project.

We will use a Managed Image option with the Ubuntu OS, Standard runtime, 5.0 Image (you will always choose the latest version), on Linux. Then you can name your role (you can use a new or existing option), then go to the bottom and select, “Continue to pipeline”, hit “Next” to get to the…

Deploy Stage!

Choose Amazon S3 as your Deploy provider, find your Bucket, and hit “Next”!

You can confirm your details, then once again select “Create pipeline”.

This will bring you to your new pipeline, and you can watch as it checks the source, the new build, and then it will deploy if everything is in good working order.

If all looks well you will see each section in green, with with a check mark, and a “succeeded” tag.

Checking our work…

Now that we have successfully deployed our pipeline, we can check to see if our Static Website is working by navigating back to our S3 bucket, choosing the properties tab, and finding our Bucket endpoint by the Static Website Hosting option. You can click on that, and see your site up and running.

Like this…

Lastly,

Let’s modify the code in our GitHub repo and watch the pipeline integrate these changes. I did this in GitHub and changed our HTML file from this…

to this…

And TADA!!!

Thanks for walking through this with me! I hope you found this fun and helpful!

--

--

Dane Forslund
Dane Forslund

Written by Dane Forslund

DevOps | Cloud | AWS enthusiast. I believe my most successful moments have derived from patient leadership, proactive resolve, and often adversity.