Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GitHub Universe After Party Thailand 2023 - Fas...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Karn Wong
November 01, 2023
Technology
120
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
GitHub Universe After Party Thailand 2023 - Faster deployments with multi-stage build caching
Karn Wong
November 01, 2023
More Decks by Karn Wong
See All by Karn Wong
Global Azure 2026 - Securing VM Access On Azure
kahnwong
0
54
AgentCon Bangkok 2026 - How to Stay Sane in the Age of Agents
kahnwong
0
86
National Coding Day 2026 - Software Evolution: The Complete Lifecycle
kahnwong
0
86
Microsoft Ignite After Party 2025 - Azure Infrastructure for Cloud Native Solutions
kahnwong
0
59
AI Community Day Bangkok 2025 - In-Browser ML/LLM Inference Ecosystem
kahnwong
0
76
Data & AI Day 2025 - You Created a Pipeline, Now What?
kahnwong
0
130
Pycon Thailand 2025 - ML Model Serving Optimization with ONNX
kahnwong
0
75
MFEC x Google Cloud Thailand: Betagro Bootcamp - IaC Adoption
kahnwong
0
85
{{Ops}Ver.se - Infrastructure as Code and Business Value
kahnwong
0
130
Other Decks in Technology
See All in Technology
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
laysakura
2
9.3k
【CEDEC2026】Creative Approaches to Localizing the Dialects and Unique Speech of Umamusume: Pretty Derby Characters in English
cygames
PRO
4
26k
Model Studio CLI × Token Plan
maigo999
0
200
Flutter × BLE Centralを自前Pluginで実装する設計パターン - MethodChannel / EventChannelで作る双方向ブリッジの実践 / Building Custom Flutter BLE Central Plugins: Bidirectional Bridging with Method & Event Channels
bitkey
PRO
0
210
Software Supply Chain Attackからクラウド環境を守るためにできること
lhazy
2
290
Sets in Go
ramalho
1
1.2k
AI-DLC実践録_フルサイクル開発への挑戦
miyuc
0
340
私がブラウザを自作したくなった理由
supurazako
1
280
Go 1.27 の標準パッケージに uuid が入った!のでいろいろ喋る / go_127_std_go_uuid
convto
3
570
形式手法特論:Hyperproperty とモデル検査 #kernelvm / Kernel VM Study Tokyo 19th
ytaka23
0
520
Android skills に学ぶ
kokiko
0
140
Adding Right-to-Left support to your web application with CSS logical properties — Lessons from Redmine
vividtone
0
160
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
Embracing the Ebb and Flow
colly
88
5.1k
Accessibility Awareness
sabderemane
1
180
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
380
SEO for Brand Visibility & Recognition
aleyda
0
4.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolving SEO for Evolving Search Engines
ryanjones
0
260
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.1k
A Tale of Four Properties
chriscoyier
163
24k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
210
Transcript
Faster deployments with multi- stage build caching Here’s to incremental
deployments.
About me kahnwong Karnsiree Wong karnwong.me Head of Platform Engineering
@Baania Often known as DevSecMLFinDataOps Faster deployments -> Faster iterations I love automation
CI/CD workflow
Dockerfile FROM node:18 WORKDIR /opt/build COPY package.json . COPY yarn.lock
. RUN yarn install COPY . . RUN yarn build EXPOSE 3000 CMD [ "yarn", "start", "-H", "0.0.0.0" ]
GitHub Actions Buildx - name: Build and tag image uses:
docker/build-push-action@v5 with: context: . builder: ${{ steps.buildx.outputs.name }} file: Dockerfile push: true tags: ${{ steps.meta.outputs.tags }} provenance: false
But we can cache docker layers
GitHub Actions Buildx with cache - name: Build and tag
image uses: docker/build-push-action@v5 with: context: . builder: ${{ steps.buildx.outputs.name }} file: Dockerfile push: true cache-from: type=gha # add this cache-to: type=gha,mode=max # add this tags: ${{ steps.meta.outputs.tags }} provenance: false
Buildx Buildx with cache
How do we know that we’re using cache?
Check GitHub Actions caches from all workflows
What about image size?
Dockerfile with multi-stage build # --------------- builder --------------- # FROM
node:18 AS builder WORKDIR /opt/build COPY package.json . COPY yarn.lock . RUN yarn install COPY . . RUN yarn build # --------------- package --------------- # FROM node:18-alpine AS deploy WORKDIR /app COPY --from=builder /opt/build/.next ./.next COPY --from=builder /opt/build/node_modules ./node_modules COPY --from=builder /opt/build/public ./public COPY --from=builder /opt/build/next.config.js ./ COPY --from=builder /opt/build/package.json ./ EXPOSE 3000 CMD [ "yarn", "start", "-H", "0.0.0.0" ]
Why multi-stage build? yarn build creates a lot of temporary
files We don’t need those "temporary files" for yarn start ` ` ` `
Let’s guess the image size!
Normal build Multi-stage build
How much can we save? Build time 30s per build
(from 3m24s to 2m57s) Image storage (compressed) 300MB per image (from 450MB to 150MB)
Any questions?
Ready for cost reduction? If we deploy 150 times /
month
Cost breakdown Service No Cache With Cache GitHub Actions (Runtime)
3m24s * 150 = 510m 2m57s * 150 = 442.5m Service Normal Build Multi-Stage Build ECR (Storage) 450MB * 150 = 66GB 150MB * 150 = 22GB ECR (Cost) 150MB * 150 = 22GB 22GB * 0.10 USD = 2.2 USD In total, we can save 67.5 minutes and 4.4 USD per month.
I know you love pretty charts
GitHub Actions Cache can also be used with runtimes steps:
- uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 18 cache: 'yarn' - run: yarn install - run: yarn build
Let’s revisit CI/CD workflow again
Any questions?
Summary GitHub Actions cache can be used with docker image
build and setup actions Multi-stage build can drastically reduce image size (in turn, reducing image storage cost) These lead to faster CI/CD run time and faster deployments During PR review, automated checks can be done faster as well
Check out the slides and repo!