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.8k
ポートフォリオページの公開に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
「おうちクラウド」が今も熱い!
hirosat
2
1k
[너구리랑! 회고 밋업 2023] CTO 1년 회고와 회고를 바탕으로 만든 프로젝트에 대한 회고 - 전문가가 되는 방법 // 한날 님
develop_neoguri
0
140
[너구리랑! 회고 밋업 2023] GTD & PARA -머릿속이 복잡하던 일상에 적용한 정리법 // 토르 님
develop_neoguri
1
310
Snowflake WEST ユーザー会第2回「ハンズオンセッション」
mabokaneko0802
0
200
drumstick_jacket.pdf
lyh125
1
520
PlatformIO IDE用M5Stack定型コード環境の紹介
3110
1
330
LT(Lightning Talk)のドキドキ感を共有する IoT ぼっとキーホルダ!
scbc1167
0
250
【1周年】Blueskyちゃん総集編を通じて青空を遊びつくそう
kawaiirailroads
0
270
データエンジニアのためのテクニカルサポートとLLM
yutomatsunoo
0
1k
わたしと技術コミュニティとキャリア
kotomin_m
2
180
DroidKaigi 2024 - 海外就職というキャリアの選択肢
iyotetsuya
1
460
#スタックチャン「魔改造の夜」に行く
syumme01
1
160
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
GitHub's CSS Performance
jonrohan
1030
460k
Automating Front-end Workflow
addyosmani
1366
200k
Bash Introduction
62gerente
608
210k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Optimizing for Happiness
mojombo
376
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Practical Orchestrator
shlominoach
186
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
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 ?