How to Setup CloudFront and S3 to Serve Contents for Games on AWS??

Eric Wei
4 Min To Read
03 Aug, 2021
- Aws

When you develop an HTML5 or Mobile game, you may simply want to test it in a private network and don’t want to release it to the public during the development.

Usually, you can upload the HTML5/Mobile game contents to S3 Bucket. However, S3 is more expensive than you thought if you are not aware of its costs.

You will be charged by the amount of traffic you directly upload or download from S3 Bucket. The more times you download your games, the more money you need to spend.

In this post, we will provide a cost-effective solution and make your HTML5/Mobile games private to share with people during the development phase.

CloudFront & S3

CloudFront is a fast content delivery network(CDN) service that securely delivers data, videos, applications, and APIs on a global scale with low latency, and high transfer speeds. Also, it can cache contents downloaded from S3 Bucket.

If you set up S3’s origin domain in CloudFront with origin access identity (OAI), you can ensure S3 Bucket only accept traffic from CloudFront to improve the security.

CloudFront can cache your content at edge CDN, this will greatly reduce the outbound traffic from the S3 bucket to save your costs.

Below will show how to set up the CloudFront, S3, and WAF to protect your private contents on AWS.

Create S3 Bucket

Check Block all public access

Setup CloudFront with S3 Bucket

Then Create CloudFront and fill in the following.

Origin domain:

choose your S3 bucket domain

S3 Bucket access:

Select Yes use OAI
Origin access identity –> Click create new OAI

Bucket policy:

Select Yes update the bucket policy

Create IAM

Create an IAM user

After creating this user, goto Permissions –> click Add Inline policy

Paste the following Inline policy

{
    "Version": "2012-10-17",
    "Statement": [
         {
            "Effect": "Allow",
            "Action": ["s3:ListAllMyBuckets"],
            "Resource": "arn:aws:s3:::*"
         },
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::<Your S3 Bucket Name>",
                "arn:aws:s3:::<<Your S3 Bucket Name>/*"
            ]
        }
    ]
}

Create scripts to upload files to S3 Bucket

Setup IAM on your server or PC for uploading files to S3.

aws configure --profile=<Your Profile Nem>
AWS Access Key ID : <Your Key ID>
AWS Secret Access Key : <Secret Access Key>
Default region name : <Your region>
Default output format: json

Create the following script to upload a folder to the S3 bucket. You can place all the files you need in the same folder to upload.

vim upload.sh#!/bin/bashif [ -z "$1" ]
then
      echo "Input file path"
      exit 1
fiif [ -z "$2" ]
then
      echo "Input env parameter is empty(sandbox/qa/production)"
      exit 1
fiFOLDER_PATH="$1"
ENV_NAME="$2"
AWS_DEFAULT_PROFILE="<Your IAM Profile Name>"
AWS_DEFAULT_REGION="<Your region>"
S3_BUCKET="s3://<Your S3 Bucket>"aws s3 sync ${FOLDER_PATH}  --profile ${AWS_DEFAULT_PROFILE} --region ${AWS_DEFAULT_REGION} ${S3_BUCKET}/${ENV_NAME}/blog

Run

# Format ./upload.sh <upload folder path> <environment>  
# Example
./upload.sh /home/ubuntu/images sandbox

Setup Web Application Firewall on CloudFront

At this point, your game content can be accessed from anywhere via CloudFront.

Since we only allow the private networks to access our game content, we need to set up allowed IPs in a while list while other IPs should be blocked in WAF.

Firstly, go to AWS Console → WAF and set up IP Sets as shown below.

You can define a list of IPs in IP addresses to access your games.

Then Setup Rule Group

Create a rule

Create a Web ACL

Add rule and rule group to Web ACL. Remember your rule needs to be allowed to access while others should be blocked.

You need to check Block in Default action.

Finally, set up your WebACL on CloudFront.

Remember to check Off on IPv6.

To access your file, open the link — *https://your_cloudfront_domain/file_name*

Conclusion

In this tutorial, you learned how to set up CloudFront and S3 with WAF. You not only can protect your private content but also save your costs.

Moreover, we provide an IAM policy and a workable script for uploading the game’s private contents to the S3 bucket without trying and encountering errors.

You can easily integrate this script into your CI/CD pipeline like Jenkins to improve your work productivity.

Hope this tutorial will be helpful for you.