This is the start of a multi-blog series as I make my way through the Cloud Resume Challenge. As advertised, the Cloud Resume Challenge is a popular 16-step project that takes you from certified to hired in cloud.
I already have a job and have passed two AWS exams. Still, a couple of months ago, I ventured off to see what's out there, and oh boy, the number of cloud questions I could not answer at the interviews made me really think, "I don't know my stuff. I owe it to the people involved to do a really good job here". The worst part is I didn't blindly send out resumes and hope these companies would call me; I reached out to my connections and asked them to put my name out there. Some of which returned to me with opportunities that have not been made public yet. I underperformed in these interviews, but I now know what these companies are looking for.
Anyway, I don't want to ramble on about how I replayed these interviews in my head because this is about what I'm going to do moving forward to make myself a better candidate, so whenever I decide to venture off again, I'll be prepared!
Chunk 1: Building the frontend
The minimum requirement for this part of Chunk 1 is to have an HTML page with some CSS and serve the files in an Amazon S3 bucket.
It sounds simple enough, but since I love frontend development, so I decided to add the Developer Mod. I'll build my website using a JavaScript framework instead of just HTML and CSS.
Stack:
- Next.js
- Amazon S3
Getting Started with Next.js
I made a GitHub repo here if you wanna see what I have so far. For this part of Chunk 1, you really just need to have a Next.js app, then build
and export
it.
- Create a new Next.js app using
create-next-app
. We have been usingpnpm
on Telescope, and I simply cannot go back tonpm
.
pnpm create next-app
Run
pnpm run dev
to start the development server onhttp://localhost:3000
and view your initial Next.js application.Update the
build
script in thepackage.json
file.
"scripts": {
...
- "build": "next build",
+ "build": "next build && next export",
...
},
- Run
pnpm run build
will generate anout
directory with everything you need for your static website.
cloud-resume-challenge
├── .next
├── node_modules
+ ├── out
+ │ ├── _next
+ │ ├── favicon.ico
+ │ ├── index.html
+ │ └── vercel.svg
├── pages
├── public
├── styles
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── pnpm-lock.yaml
└── README.md
Host the Next.js website on Amazon S3
I mostly followed Tutorial: Configuring a static website on Amazon S3 for this part. However, to proceed with the CloudFront Distribution in a later blog post, you will need to Block all public access for the S3 bucket.
- In the Amazon S3 console, choose Create bucket and enter the following:
- Bucket name: cindy-crc
- AWS Region: US East (N. Virginia) us-east-1
- Uncheck Block all public access
- Bucket Versioning: Enable
- Click on Create
- Once the bucket as been created, upload everything from your
out
folder into the bucket - Click on your newly created bucket from the list and go to the Properties tab
- Go all the way to the bottom, under Static website hosting and Enable Static website hosting
- Specify the Index document as
index.html
- Save your changes, and you should be able to see a Bucket website endpoint like http://cindy-crc.s3-website-us-east-1.amazonaws.com/
- In the Permissions tab of your bucket, add a new Bucket policy and save the changes
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
- "arn:aws:s3:::Bucket-Name/*"
+ "arn:aws:s3:::cindy-crc/*"
]
}
]
}
Test your website endpoint by visiting http://cindy-crc.s3-website-us-east-1.amazonaws.com/
You can stop here if you're satisfied with having a static website on Amazon S3, but for the purpose of the Cloud Resume Challenge, which will move on to using CloudFront, you need to remove the Bucket policy and Block all public access again.
Top comments (0)