Game Tech Tutorial
Published in

Game Tech Tutorial

How to Setup AWS CloudFront and S3 to Serve Private Content for Html5/Mobile Games?

When it comes to developing an Html5 or a Mobile game, you may want to test it in a private network without making it to the public during the development stage.

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 to serve your private content for games or files 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, 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

Log in to AWS Console to create an 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
fi
if [ -z "$2" ]
then
echo "Input env parameter is empty(sandbox/qa/production)"
exit 1
fi
FOLDER_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 wasting time to make it work.

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.

Thanks for reading.

You might be interested in

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eric Wei

Eric Wei

Senior Full Stack Engineer & Solution architecture | AWS, GCP, Azure | Cloud, Unity Game Development, SDK, DevOps, and more.