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
ポートフォリオページの公開にGitLab CI/CDを使っている話
Search
skokado
February 12, 2020
How-to & DIY
4
1.7k
ポートフォリオページの公開にGitLab CI/CDを使っている話
#GitLab #CI/CD
skokado
February 12, 2020
Tweet
Share
More Decks by skokado
See All by skokado
"String intern" を知ってますか?
skokado
0
140
Other Decks in How-to & DIY
See All in How-to & DIY
[너구리랑! 회고 밋업 2023] CTO 1년 회고와 회고를 바탕으로 만든 프로젝트에 대한 회고 - 전문가가 되는 방법 // 한날 님
develop_neoguri
0
110
BVEと連動する誤自宅運転台のススメ!
usashirou
0
490
Fraxinus1k Assembly Instructions (English, v. 0.9)
fukumay
0
1.1k
miiboとamiibo繋げてみた。 #miibo #amiibo #iotlt
n0bisuke2
0
250
田中 is a new HelloWorld
akichika
1
220
たまごっちUniFlash解析 #分解のススメ
bakueikozo
0
460
カフェでノートPCが盗難されたかどうかを検知するIoT #linedc #iotlt #obniz #protoout
n0bisuke2
1
240
ジョインして1ヶ月 緊急リリースを3度体験した話 〜そして改善へ〜
shibatadaiki
0
410
Fraxinus1k 組立説明書 (Japanese, v. 0.9)
fukumay
1
4.3k
ちょっと待てぃ!!ボタンをキーボード化 #M5Stack #M5JPTour2023 #相席食堂
n0bisuke2
0
520
【潔能講堂】 綠能科技動手做-磁生電燈 / 李薇平老師
learnenergy2
0
380
#技術を動画で伝える技術 〜 α シリーズを活用した技術紹介・プレゼン動画制作ノウハウ〜
1heisuzuki
4
640
Featured
See All Featured
How to name files
jennybc
75
98k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
What's new in Ruby 2.0
geeforr
340
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
The Invisible Customer
myddelton
119
13k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Navigating Team Friction
lara
183
13k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Transcript
ポートフォリオページの公開にGitLab CI/CDを使っている話 2020/02/12 @明日から始めるGitLab CI/CD はじめの一歩 Shota Kokado
自己紹介 • 略歴 ◦ インフラエンジニア(オンプレ): 5年 ◦ クラウド、Python:1年 • Interest
◦ 開発手法全般(テストとかクラス設計とか開発プロセスとか) ◦ データ活用 / 分析関連の技術 ◦ 動物全般(特に小鳥) ◦ 飼育中: ▪ 文鳥 × 1 ▪ インコ × 3 Name : Shota Kokado @_skokado
本日は 私のポートフォリオサイト作成についてお話します
GitHub Pagesで作っていたあの頃
1. GitHub上にリポジトリを作る([username].github.io) 2. テンプレートを適用したコンテンツ(.md など)を編集してcommit 3. https://[username].github.io 上にウェブサイトが自動デプロイされる GitHub Pagesで作っていたあの頃
GitHub Pagesで作っていたあの頃 https://skokado.github.io/
• commitしないとサイトの出来映えが確認できなかった (≒本番環境のみ)。 ※最低限の見栄えは整えたかった GitHub Pagesで作っていたあの頃
• GitHub Pagesはjekyll という静的サイトジェネレータエンジン • jekyll はRuby製 GitHub Pagesで作っていたあの頃
自前で作ってみたい GitHub Pagesで作っていたあの頃
• 「CI/CD パイプライン」を使ってみたかった ◦ GitLab CI/CD の経験あり +α • Python製の静的サイトジェネレータを使う
• Amazon CloudFront( + S3)を使う GitHub Pagesで作っていたあの頃
Agenda 1. GitHub Pages で作っていたあの頃 2. GitLab CI/CD に乗り換えた話 3.
まとめ
• 静的サイトジェネレータ ◦ Pelican • ソースリポジトリ ◦ GitLab.com • ビルド、デプロイ
◦ GitLab CI/CD • ホスティング ◦ Amazon S3 ◦ AmazonCloudFront AWS Cloud STG Amazon S3 Amazon CloudFront 本番 Amazon S3 Amazon CloudFront Local(dev) GitLab CI/CDに乗り換えた話
• 静的サイトジェネレータ:Pelican (Python製) • ソースリポジトリ: GitLab.com • ビルド、デプロイ: GitLab CI/CD
• ホスティング: Amazon S3、CloudFront AWS Cloud STG Amazon S3 Amazon CloudFront 本番 Amazon S3 Amazon CloudFront Local(dev) GitLab CI/CDに乗り換えた話
1. (dev): MarkDownファイルを編集してローカルサーバで確認 ◦ make html ◦ pelican --listen 2.
(stg): stg ブランチにcommit -> ビルド(html生成)、STG用S3にPUT 3. (prd): master ブランチにmerge -> S3 sync(STG用S3⇒本番用S3) GitLab CI/CDに乗り換えた話 凡例: GitLab CI/CDタスク
GitLab CI/CDに乗り換えた話 ①Local AWS Cloud STG Amazon S3 Amazon CloudFront
本番 Amazon S3 Amazon CloudFront ②commit(stg) ③HTML生成 &S3PUT
GitLab CI/CDに乗り換えた話 AWS Cloud STG Amazon S3 Amazon CloudFront 本番
Amazon S3 Amazon CloudFront ④masterブランチ にマージ ⑤sync
GitLab CI/CDに乗り換えた話
Agenda 1. GitHub Pages で作っていたあの頃 2. GitLab CI/CD に乗り換えた話 3.
まとめ
まとめ • クラウドサービスを使った静的サイトの構築とCI/CDパイ プラインツールの相性は◎ ◦ ビルド、デプロイ ◦ ブランチ毎にジョブ切り替え • 他のツールでも実現可能
◦ Circle CI / Travis CI ◦ GitHub Actions
おまけ 「CI/CD」が指す対象は組織やプロダクト毎にまちまち ◦ テスト ◦ ビルド ◦ デプロイなど • 「CI/CDなにそれ?」なチームはどんなアプローチが良い
か
おまけ 「CI/CD」が指す対象は組織やプロダクト毎にまちまち ◦ テスト ◦ ビルド ◦ デプロイなど • 「CI/CDなにそれ?」なチームはどんなアプローチが良い
か ◦ … CI/CDにおけるHello World ?