Pro Yearly is on sale from $80 to $50! »

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

0616424ae1859a4db4152ebbc9412224?s=47 skokado
February 12, 2020

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

#GitLab #CI/CD

0616424ae1859a4db4152ebbc9412224?s=128

skokado

February 12, 2020
Tweet

Transcript

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

  2. 自己紹介 • 略歴 ◦ インフラエンジニア(オンプレ): 5年 ◦ クラウド、Python:1年 • Interest

    ◦ 開発手法全般(テストとかクラス設計とか開発プロセスとか) ◦ データ活用 / 分析関連の技術 ◦ 動物全般(特に小鳥) ◦ 飼育中: ▪ 文鳥 × 1 ▪ インコ × 3 Name : Shota Kokado @_skokado
  3. 本日は 私のポートフォリオサイト作成についてお話します

  4. GitHub Pagesで作っていたあの頃

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

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

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

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

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

  10. • 「CI/CD パイプライン」を使ってみたかった ◦ GitLab CI/CD の経験あり +α • Python製の静的サイトジェネレータを使う

    • Amazon CloudFront( + S3)を使う GitHub Pagesで作っていたあの頃
  11. Agenda 1. GitHub Pages で作っていたあの頃 2. GitLab CI/CD に乗り換えた話 3.

    まとめ
  12. • 静的サイトジェネレータ ◦ 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に乗り換えた話
  13. • 静的サイトジェネレータ: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に乗り換えた話
  14. 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タスク
  15. GitLab CI/CDに乗り換えた話 ①Local AWS Cloud STG Amazon S3 Amazon CloudFront

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

    Amazon S3 Amazon CloudFront ④masterブランチ にマージ ⑤sync
  17. GitLab CI/CDに乗り換えた話

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

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

    ◦ Circle CI / Travis CI ◦ GitHub Actions
  20. おまけ 「CI/CD」が指す対象は組織やプロダクト毎にまちまち ◦ テスト ◦ ビルド ◦ デプロイなど • 「CI/CDなにそれ?」なチームはどんなアプローチが良い

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

    か ◦ … CI/CDにおけるHello World ?