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
2k
ポートフォリオページの公開にGitLab CI/CDを使っている話
#GitLab #CI/CD
skokado
February 12, 2020
Tweet
Share
More Decks by skokado
See All by skokado
"String intern" を知ってますか?
skokado
0
180
Other Decks in How-to & DIY
See All in How-to & DIY
#スタックチャン「魔改造の夜」に行く
syumme01
1
270
グローバルAWSユーザー コミュニティとJAWS-UG - JAWS FESTA 2024 in Hiroshima
awsjcpm
0
4.8k
「AITRIOS」でトカゲの活動量を可視化
hoshinoresearch
0
380
JAWS-UG 福岡 in 北九州 | JAWS-UG/AWSコミュニティ プログラムのご紹介
awsjcpm
1
130
あなたは何故コミュニティに参加するのか?
awsjcpm
1
130
JAWS-UG/AWSコミュニティ JAWS-UG おおいた
awsjcpm
2
2.8k
中指立てたか判定IoT #iotlt #p5js
n0bisuke2
0
300
骨折と入院とIoT #iotlt
n0bisuke2
1
330
さらなるアウトプットに、Let's ライトニングトーク! ― LTのやり方
ma2shita
2
1.3k
AIお菓子ロッカー
keicafeblack
0
150
「無理」を「コントロール」するスキル / Skills to Control "Muri"
hageyahhoo
6
2.2k
How to get hundreds of organic backlinks through statistics link building
ronishehu
1
270
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Making Projects Easy
brettharned
116
6.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Six Lessons from altMBA
skipperchong
28
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for Performance
lara
610
69k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Designing Experiences People Love
moore
142
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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 ?