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
190
Other Decks in How-to & DIY
See All in How-to & DIY
AIお菓子ロッカー
keicafeblack
0
190
ORBBEC会社概要 製品カタログ 2024 11 10
takasumasakazu
0
170
ラズパイカメラ向け ケーブル延長基板・ハウジングの開発
koheimasaki
PRO
2
360
カンファレンスでリフレッシュ!無理なく楽しむカンファレンス参加術 / How to enjoy conferences without stress
kattsuuya
1
9k
HCIのデモに役立つ映像活用アイデア集 #WISS2024 ナイトセッション #HCIVideoCulture
bonsaistudiojp
2
1k
自分がご機嫌になれる 素敵な場所を守るために
kenichirokimura
3
440
バーチャルバナナとリアルバナナ #iotlt #TouchDesigner
n0bisuke2
0
180
評価のギャップから紐解く、「評価軸」と「ソフトスキル」の重要性
blajir
2
110
雑にコミュニティを続けてもいいと思っている/Feel free to continue the community
camel_404
0
250
LT(Lightning Talk)のドキドキ感を共有する IoT ぼっとを作った話
scbc1167
1
250
Within the team, I grow as a tester and continuously pursue product quality
camel_404
6
2.7k
JAWS-UGとAWS - JAWS-UG彩の国埼玉設立のお祝い
awsjcpm
2
550
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Bash Introduction
62gerente
615
210k
Side Projects
sachag
455
43k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Faster Mobile Websites
deanohume
310
31k
Rails Girls Zürich Keynote
gr2m
95
14k
The Language of Interfaces
destraynor
162
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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 ?