Run your blog all on AWS

1. Pipeline first - all on AWS ☁
Deploy your hugo blog with ease

2. About me
● Senior Cloud Architect 󰠵
● Golden Jacket guy 🧥
● Traveller 🗺
● Yogi 󰩌
● Nerd 🤓
● loves emojis…

3. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
MV Consulting 2023
Agenda
3
● What was the purpose? 💭
● The challenge 😃
● Obstacles / complications 🚧
● The solution 💎
● Conclusion 😌

4. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The purpose 💭
5

5. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Purpose 💭
6
● the pain I had 😓
○ host my SPA blog on aws - fully
○ automatic deployment
○ push and go
○ …

6. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023 7

7. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
What’s in for you 💭
8
● the solution I built 💊
○ a cdk construct (multiple)
○ quickly to setup (10 minutes)
○ use it for your own blog
■ choose a hugo theme
■ use the pipeline construct and go
○ for me it does the job, however updates
are planned for customization
○ contribute & let me know you feedback

8. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The purpose 💭
9
● self-contained: all resources on AWS ☁
● learning cdk
● using CI/CD with cdk.pipelines
○ self-mutating
○ creating the infrastructure
● a development environment
○ with a subdomain (dev.acme.com)
○ which is secured (https + X) 🔐

9. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
10

10. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃 - looks easy…
11

11. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
12
● learning cdk (on the way)
○ got started with cdk workshop
○ then superluminar workshop
■ great quickstarts - can definitely recommend
■ they did what I needed (kind of…)
● fast forward… 󰝄

12. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
13

13. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
14
● best way to host a static blog with cdk?
● where would you go searching for constructs?
○ https://construct.dev/
● did research what’s out there
○ cdk-hugo-deploy
○ cdk-spa-deploy

14. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
15

15. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
16
● cdk-hugo-deploy
● cdk-spa-deploy
○ build hugo blog locally
○ pipeline usage not possible
○ no securing of development env
● so let’s do it myself 󰞐
● but questions first…

16. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
17
How does Hugo work?
1. hugo new site quickstart
2. cd quickstart
3. git init
4. git submodule add
5. https://github.com/theNewDynamic/gohugo-theme-ananke.git
6. themes/ananke
7. echo "theme = 'ananke'" >> hugo.toml
8. hugo server

17. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
18
How many ways do you know to secure Cloudfront?

18. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
19
Why add a development environment at all?
● testing integration with analytics
● caching & cookie banner
● love to have it all the time

19. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃
20
The development environment in my case:

20. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The challenge 😃 - recap
21

21. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Obstacles on the way 🚧
22

22. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Obstacle 1 🚧
23
How to build with a custom docker
image and git submodules?

23. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Obstacle 2 🚧
24
How to handle this DefaultRootObject?

24. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Obstacle 3 🚧
25
Multi or single pipeline? Which strategy?

25. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Obstacle 4 🚧
27
How to secure the dev environment?

26. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎
29

27. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎
30
● Pipeline structure
● Deployment to the S3 Bucket
● Cloudfront struggles
● securing the dev environment
● nugget 🌟

28. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎 - a single pipeline with promotion step
31

29. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
S3 bucket deployment
32
1. new s3deploy.BucketDeployment(this, 'frontend-deployment', {
2. sources: [
3. s3deploy.Source.asset(path.join(__dirname, hugoProjectPath), {
4. bundling: {
5. image: DockerImage.fromRegistry(dockerImage),
6. command: [
7. 'sh', '-c',
8. `
9. apk update && apk add hugo${alpineHugoVersion} && hugo version &&
10. ${hugoBuildCommand} --environment ${this.buildStage} &&
11. mkdir -p /asset-output && cp -r public-${this.buildStage}/* /asset-output
12. `,
13. ],
14. user: 'root',
15.
16.

30. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
cdk pipelines synth
33
1. const pipepline = new pipelines.CodePipeline(this, 'hugo-blog-pipeline', {
2. synth: new pipelines.ShellStep('Synth', {
3. input: pipelines.CodePipelineSource.codeCommit(repository, 'master', {
4. codeBuildCloneOutput: true, // we need this to preserve the git history
5. }),
6. // https://github.com/aws/aws-cdk/issues/11399 so we clone submodules manually
7. commands: [
8. 'npm ci || yarn install --check-files --frozen-lockfile',
9. 'git submodule update --init',
10. 'npm run build',
11. 'npm run synth',
12. ],
13. }),
14. // NOTE: as we build the hugo blog in a docker container
15. dockerEnabledForSynth: true,
16. });

31. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎 - WAF struggles…
34
How to deploy WAF for CF from
codepipeline?

32. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎 - WAF costs
36
How expensive is WAF? 💰

33. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎 - WAF or not?
37

34. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
The solution 💎 - Basic authentication
38
Basis auth 🔐

35. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Cloudfront function association
39
1. new cloudfront.Distribution(
2. this,
3. 'frontend-distribution',
4. {
5. // other properties...
6. defaultBehavior: {
7. // this worked 󰗈 🚀
8. functionAssociations: [
9. {
10. eventType: cloudfront.FunctionEventType.VIEWER_REQUEST,
11. function: cfFunction,
12. },
13. ],
14. // other properties

36. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Basic auth
40
DefaultRootObject
Secure by basic auth

37. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Conclusion 😌
41

38. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Ok, are we really done? 🧐
42

39. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
How were the steps to set all this up?
43

40. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
How would you automate those steps?
44

41. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
🌟 Run and deploy it with projen
󰝄
45
1. # 1. create a new project directory
2. mkdir my-website && cd my-website
3.
4. # 2. set up the project using the projen new command
5. npx projen new
6. --from @mavogel/projen-cdk-hugo-pipeline@~0
7. --projenrc-ts --domain mycompany.com
8.
9. # 3. install dependencies for the theme (blist by default)
10. npm --prefix blog install
11.
12. # 4. deploy it to your AWS account
13. npm run deploy
14.
15. # 5. add git repo, rename branch and push
16. git remote add origin codecommit::<aws-region>://hugo-blog
17. git branch -m master main && git push origin master

42. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Conclusion 😌
46

43. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Conclusion 😌
47
● Best way to learn for me is via a project
○ cdk
○ pipelines
○ a couple of AWS service internals
● getting over the obstacles is fun
● … ask others

44. | AWS UG Frankfurt - Sep 2023
MV Consulting 2023
Conclusion 😌
48
Thanks to the AWS User group Bergstraße

45. K-1 BusinessClub Main Tower,
Neue Mainzer Str. 52, 60311
Frankfurt, Germany
manuel-vogel.de
Tel: +49151 413 43 721
Book an appointment
Thank you