ポートフォリオページの公開にGitLab CI/CDを使っている話

by skokado

Slide 1

Slide 1 text

ポートフォリオページの公開にGitLab CI/CDを使っている話 2020/02/12 @明日から始めるGitLab CI/CD はじめの一歩 Shota Kokado

Slide 2

Slide 2 text

自己紹介 ● 略歴 ○ インフラエンジニア（オンプレ）： 5年 ○ クラウド、Python：1年 ● Interest ○ 開発手法全般（テストとかクラス設計とか開発プロセスとか） ○ データ活用 / 分析関連の技術 ○ 動物全般（特に小鳥） ○ 飼育中: ■ 文鳥 × 1 ■ インコ × 3 Name : Shota Kokado @_skokado

Slide 3

Slide 3 text

本日は私のポートフォリオサイト作成についてお話します

Slide 4

Slide 4 text

GitHub Pagesで作っていたあの頃

Slide 5

Slide 5 text

1. GitHub上にリポジトリを作る（[username].github.io） 2. テンプレートを適用したコンテンツ（.md など）を編集してcommit 3. https://[username].github.io 上にウェブサイトが自動デプロイされる GitHub Pagesで作っていたあの頃

Slide 6

Slide 6 text

GitHub Pagesで作っていたあの頃 https://skokado.github.io/

Slide 7

Slide 7 text

● commitしないとサイトの出来映えが確認できなかった（≒本番環境のみ）。 ※最低限の見栄えは整えたかった GitHub Pagesで作っていたあの頃

Slide 8

Slide 8 text

● GitHub Pagesはjekyll という静的サイトジェネレータエンジン ● jekyll はRuby製 GitHub Pagesで作っていたあの頃

Slide 9

Slide 9 text

自前で作ってみたい GitHub Pagesで作っていたあの頃

Slide 10

Slide 10 text

● 「CI/CD パイプライン」を使ってみたかった ○ GitLab CI/CD の経験あり＋α ● Python製の静的サイトジェネレータを使う ● Amazon CloudFront（ + S3）を使う GitHub Pagesで作っていたあの頃

Slide 11

Slide 11 text

Agenda 1. GitHub Pages で作っていたあの頃 2. GitLab CI/CD に乗り換えた話 3. まとめ

Slide 12

Slide 12 text

● 静的サイトジェネレータ ○ 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に乗り換えた話

Slide 13

Slide 13 text

● 静的サイトジェネレータ: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に乗り換えた話

Slide 14

Slide 14 text

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タスク

Slide 15

Slide 15 text

GitLab CI/CDに乗り換えた話 ①Local AWS Cloud STG Amazon S3 Amazon CloudFront 本番 Amazon S3 Amazon CloudFront ②commit(stg) ③HTML生成　&S3PUT

Slide 16

Slide 16 text

GitLab CI/CDに乗り換えた話 AWS Cloud STG Amazon S3 Amazon CloudFront 本番 Amazon S3 Amazon CloudFront ④masterブランチにマージ ⑤sync

Slide 17

Slide 17 text

GitLab CI/CDに乗り換えた話

Slide 18

Slide 18 text

Agenda 1. GitHub Pages で作っていたあの頃 2. GitLab CI/CD に乗り換えた話 3. まとめ

Slide 19

Slide 19 text

まとめ ● クラウドサービスを使った静的サイトの構築とCI/CDパイプラインツールの相性は◎ ○ ビルド、デプロイ ○ ブランチ毎にジョブ切り替え ● 他のツールでも実現可能 ○ Circle CI / Travis CI ○ GitHub Actions

Slide 20

Slide 20 text

おまけ「CI/CD」が指す対象は組織やプロダクト毎にまちまち ○ テスト ○ ビルド ○ デプロイなど ● 「CI/CDなにそれ？」なチームはどんなアプローチが良いか

Slide 21

Slide 21 text

おまけ「CI/CD」が指す対象は組織やプロダクト毎にまちまち ○ テスト ○ ビルド ○ デプロイなど ● 「CI/CDなにそれ？」なチームはどんなアプローチが良いか ○ … CI/CDにおけるHello World ？