Project 4 — CI/CD

• Managing source code using Git & GitHub
• Create a build process using CodeBuild
• Create a deployment process

• buildspec.yml

You have decided to move forward with a web development project. You have chosen AWS as your platform, and your application will be written in ReactJS and hosted with AWS S3. You are required to use Git & GitHub for your source code repository. One of the main requirements is to rapidly iterate site changes as your requirements change. To fulfill this, you will use an AWS CodePipeline to deploy your application every time there is an update on your repository's master branch.

S3

• Create an S3 bucket to host a static website. The S3 bucket and all items within it should be made publicly available. This is the bucket you will use to deploy your ReactJS application.

GitHub

• Create a GitHub repository. This repository will store the source code from your ReactJS application.

NodeJS & NPM

• Install NodeJS 14.x on your development machine. When you install NodeJS you also install NPM. Verify both are working by running node -v and npm -v. Take a screenshot of the window indicating the versions you are running.
• Use the command npx create-react-app [app-name-goes-here] to create your P3 ReactJS application.
• Add your project to Git and push your application to GitHub.

CodePipeline

• Create a CodePipeline named cloud-for-developers-project3 and use the default “new service role” for the pipeline.
• Choose GitHub as your source provider and choose the repository you created (where your ReactJS code is located). Choose master as the branch. The detection option should be GitHub webhooks.
• Choose AWS CodeBuild as your build provider and create a new project.
• Within the build project settings, choose the following options:
  • Operating System: Ubuntu
  • Runtime: Standard
  • Image: Standard:5.0
  • Leave the remaining settings as the default options.
  • Add a buildspec.yml file to your ReactJS project directory. The buildspec file from the screencast (with updates for version 0.2 of buildspec) is included above. Commit and push the buildspec.yml file to GitHub.
• Within the deploy stage, choose Amazon S3 as your deploy provider. Select the bucket created earlier and make sure to select “Extract file before deploy”.
• Make a change to your src/App.js file so that it renders your name. Take a screenshot of your CodePipeline successfully processing the GitHub repository change.

Tests / Verification / Project Completion

• When I change my source code and push it to GitHub, does the change get automatically reflected on the S3 site?
• Is my site publicly accessible? Can I see my site running properly?
• Turn in the following items:
  • Your website URL
  • Your GitHub repository URL
  • Your screenshots from the NodeJS and NPM version commands
  • A screenshot of your CodePipeline successfully processing a change reflected in your GitHub repository

S3 Setup (12 points)

• Bucket creation & public hosting: 7 points — correct bucket, public access, website hosting enabled
• Site deployed & URL available: 5 points — site loads at provided URL

GitHub Repository (8 points)

• Repository created & pushed: 4 points — code present and history shows commits
• Repository structure & branch: 2 points — master branch used and correct structure
• Repository URL provided: 2 points

NodeJS, NPM & Build (8 points)

• Node & NPM versions screenshot: 3 points
• Create React app & initial run: 3 points
• buildspec.yml committed: 2 points

CodePipeline & CodeBuild (14 points)

• Pipeline & service role created: 3 points
• GitHub source & webhook configured: 3 points
• CodeBuild project settings: 4 points — OS/runtime/image set as required
• Deploy stage to S3 & extract: 4 points — deploys to correct bucket and extracts files

Tests & Submission (8 points)

• Changes reflected after push: 3 points — push triggers pipeline and site updates
• Site publicly accessible: 2 points
• Screenshots & documentation: 3 points — Node versions, pipeline success, deploy screenshots, and URLs included

• Creating and managing a GitHub repository
• Using GitHub to trigger a CodePipeline deployment
• Setting up S3 to host a ReactJS application