Tech Mesha

Game Deployment: CI/CD Pipeline from GitHub to AWS S3

· TechMesha

CI/CD stands for Continuous Integration and Continuous Deployment is a simplified process that automates the different stages, such as building, testing and deploying, of developing software. As software is developed using CI/CD, developers guarantee that it is continuously left in a deployable condition. Changes in the code are integrated safely and as soon as feasible in this case in a practical setting. This development methodology shortens the development cycle while increasing the quality of the program in question by allowing for quick and often deployment.

React-App-with-Amplify-Cognito-and-CI-CD-with-Git-Hub

Technologies Used

  1. GitHub: A versatile platform for version control and collaboration, facilitating code management and team cooperation.
  2. Amazon S3: A scalable cloud storage service by AWS, enabling secure data storage, website hosting, and file management.
  3. AWS CodePipeline: An automated CI/CD service orchestrating software delivery stages for streamlined development processes.

01: Create an S3 Bucket

To begin hosting your static website, follow these steps:

  1. Navigate to the Amazon S3 section of the AWS Management Console https://console.aws.amazon.com/s3/
  2. Click “Create bucket”.
  3. You should choose a unique name for your bucket.
  4. Select the desired region for your bucket.
  5. In the section concerning public access settings, ensure the box labeled “Block all public access” is unchecked.
  6. Maintain default settings and create the bucket by clicking “Create”.

Screenshot-from-2024-04-03-17-58-45

. . .

02: Host Using S3 Bucket

  1. Access your created bucket and navigate to “Properties”.
  2. Under “Static website hosting”, click “edit”.
  3. Choose “Enable” for Static website hosting.
  4. Specify the names of your index.html and error.html files.
  5. Maintain existing settings and click “Save changes” to finalize.

Screenshot-from-2024-04-03-17-58-45

Screenshot-from-2024-04-03-18-00-55

. . .

03: Grant Public Access

  1. Open bucket settings and locate “Permissions”.
  2. Click on “Bucket Policy”.
  3. Use this code for your bucket policy. This allows everyone to read/view everything in the bucket. Be sure to update the Bucket-Name in the policy.

Screenshot-from-2024-04-03-18-02-28

Here is the code if you want to copy past

{
    "Version": "2012-10-17",
    "Statement": [
    	{
        	"Sid": "PublicReadGetObject",
        	"Effect": "Allow",
        	"Principal": "*",
        	"Action": [
            	"s3:GetObject"
        	],
        	"Resource": [
                "arn:aws:s3:::Bucket-Name/*"
        	]
    	}
    ]
}

. . .

Step 4: Integrating AWS CodePipeline with GitHub

  1. Navigate to the AWS console and search for CodePipeline.

  2. Click “Create Pipeline” and assign a name. Then, proceed to the next step.

Screenshot-from-2024-04-03-18-14-43

To link CodePipeline with GitHub:

  1. After connecting GitHub, return to CodePipeline and:
  • Select “GitHub (Version 2)” under “Source provider”.
  • Choose the GitHub connection created earlier from the dropdown menu.
  • Specify the repository containing your project’s source code.
  • Select the desired branch for the pipeline.
  • Proceed to the next step.

Screenshot-from-2024-04-03-18-16-00

Screenshot-from-2024-04-03-18-19-10

  1. For building, opt hit “skip build stage”

Screenshot-from-2024-04-03-18-19-58

  1. In the Deploy section, select the deployment target, such as an Amazon EC2 instance, Amazon ECS service, or Amazon S3 bucket.

Screenshot-from-2024-04-03-18-20-36

and now click “Create” to establish the CI/CD pipeline.

Now the CI/CD pipeline will promptly initiate builds upon any alterations to the source code within your GitHub repository. Subsequently, the resulting build artifacts will be seamlessly deployed to the designated deployment target, which in this case is the specified S3 Bucket.

Screenshot-from-2024-04-03-18-35-35

. . .

Lastly, to view our deployed game, open a new browser tab and navigate to the AWS S3 section.

Find your designated S3 bucket and click on its name to access its settings. Within the bucket, locate and click on “Properties”. Scroll down to the “Static website hosting” section.

Here, you’ll find a link labeled as the Bucket website endpoint. Click on this link to seamlessly explore our hosted game and access it publicly.

Screenshot-from-2024-04-03-18-37-07

. . .

Also, you can test your CI/CD pipeline by modifying your code files and committing them to your GitHub repository.

Screenshot-from-2024-04-03-19-51-22

. . .

Final Thoughts

In summary, we’ve built a robust CI/CD pipeline utilizing AWS tools. By integrating GitHub, AWS CodePipeline, and Amazon S3, we’ve automated and optimized every stage of our game development process.