Intro
Hello!
I'm a full-stack IT engineer.
Interested in AWS, AI, and React.
Planning to create websites and try new technologies.
Attached image and video are created by AI.
AI is now my best friend and I can't live without it.😍
I also started X.
https://x.com/WebDevHyper
Now, I'm trying to make a Tech Blog for study.
Thinking of using AWS and React.
First, I wrote a post showing the outline of the Tech Blog.
https://dev.to/webdeveloperhyper/making-tech-blog-with-ai-character-react-aws-2986
Next, I worte a post about making frontend using MUI (Material UI).
https://dev.to/webdeveloperhyper/making-tech-blog-2mui-material-ui-14g3
This time, I will write about making the infrastructure using AWS.
①Build
Let's deploy Nextjs (React) to AWS.
First, Nextjs SPA deployment settings.
Added output: 'export’, to next.config.js.
Also, added 'use client' at the top of .tsx file.
https://nextjs.org/docs/app/building-your-application/deploying/static-exports
When runnig npm run build on Nexjs, got the following error:
Property 'vars' does not exist on type 'Theme'
Added the following to resolve the error
import type {} from '@mui/material/themeCssVarsAugmentation';
https://stackoverflow.com/questions/79242634/how-to-resolve-the-error-property-vars-does-not-exist-on-type-theme-in-mater
I want to live in an utopia without bugs.🫠
②Amazon S3
If the website is a SPA, Amazon S3 static website hosting is cheap.
So, hosted Nextjs on S3 static website.
S3 is a like a little universe where you can store anything cheaply.👍
https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html
Set permissions and bucket policies to Use S3.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html
③Amazon CloudFront
To improve security, deliver the website from Amazon CloudFront instead of S3.
Also, CloudFront can improve performance.
Created CloudFront distribution to Use CloudFront.
https://aws.amazon.com/cloudfront/getting-started/S3/
You can never be too careful when it comes to security.😱
④AWS Shield Standard
To prevent layer 3 and 4 DDoS attacks, use AWS Shield Standard.
Shield Standard is applied automatically.
https://docs.aws.amazon.com/waf/latest/developerguide/ddos-overview.html
DDoS attacks are super scary, so let’s be super careful.😱
⑤AWS WAF (Web Application Firewall)
To prevent layer 7 DDoS attacks, use AWS WAF (Web Application Firewall).
Created a WAF web ACL and specify the CloudFront distribution created last time.
https://docs.aws.amazon.com/waf/latest/developerguide/getting-started.html
DDoS attacks are super scary, so let’s be super careful.😱
Add the rules and rule groups that you want to use to filter web requests.
https://docs.aws.amazon.com/waf/latest/developerguide/getting-started.html
AWS Managed Rules make to filter easy.
AWS WAF Managed Rules that you should use 1/3
Core rule set
This provides protection against exploitation of a wide range of vulnerabilities such as OWASP Top 10.
https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-baseline.html#aws-managed-rule-groups-baseline-crs
AWS WAF Managed Rules that you should use 2/3
Known bad inputs
Contains rules to block request patterns that are known to be invalid and are associated with exploitation or discovery of vulnerabilities.
https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-baseline.html#aws-managed-rule-groups-baseline-known-bad-inputs
AWS WAF Managed Rules that you should use 3/3
Amazon IP reputation list
Useful if you would like to block IP addresses typically associated with bots or other threats.
https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-ip-rep.html#aws-managed-rule-groups-ip-rep-amazon
Outro
The above contents can be summarised in the figure below:
Using AWS makes it easy to create a safe infrastructure.
Thank you for reading.
See you!
