GitHub Pages + ActionsWebAppの自動デプロイ (.binさん)

545 Views

May 05, 22

#にこのこlt会 #lt #github #CI/CD #GitHub Pages #actions-gh-pages #自動デプロイ #ビルド自動化

スライド概要

GitHub Actionsを使ってwebpackのバンドルが必要なアプリのGitHub Pagesへのデプロイを自動化するやつです。

.binさんのスライドです。
https://twitter.com/SpreadSyntax

profile-image
スライド一覧

名工大(NITech) CS niC参加 https://scrapbox.io/nitechCreate/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 303.78kB)

関連スライド

slide-thumbnail

Markdownを始めよう！ビジュアル編集ソフトMarkTextとTyporaを紹介！
markdown marktext にこのこlt会 にこのこlt wysiwyg oss
user-img KoCSience 8.4K
slide-thumbnail

自己紹介とLTをしよう！
lt lightning talk nitechcreate c0de 学生lt バーチャル学生lt にこのこlt会
user-img KoCSience 5.8K
slide-thumbnail

LTをしよう！(第5回バーチャル学生LT＆にこのこLT会_4 in バーチャル名工大 版)
lt lightning talk 学生lt バーチャル学生lt にこのこlt会
user-img KoCSience 868
slide-thumbnail

プログラミング入門～JavaScriptとProcessing～C0deでの話も？
にこのこlt会 lt プログラミング入門 javascript processing vscode
user-img KoCSience 828
slide-thumbnail

MediaPipeの紹介
mediapipe
user-img KoCSience 593
slide-thumbnail

WSLでイキろう
lt wsl windows
user-img KoCSience 573
各ページのテキスト
1.

ビルド成果物を含めずにpush 1

2.

• 自動テスト・ビルド・デプロイなど (CI/CD) 発火 参照 Push Issue Release etc. テスト ビルド デプロイ 2

3.

• テンプレートが豊富 3

4.

• テンプレートが豊富 4

5.

• Bundler • 複数のファイルを統合 • バンドル以外もできる • Typescriptコンパイラの呼び出し • Sassコンパイラの呼び出し • Asset Module 5

6.

Other apps 6

7.

• ホスティングサービス • レポジトリから直接ホストできる 7

8.

• ビルド成果をコミットに含める • ファイルの更新が増える • ビルド成果専用のブランチを切る 8

9.

発火 参照 Push 変更 ビルド 自動 Pagesにデプロイ 9

10.

• actions-gh-pagesで特定ブランチに自動push • そのブランチをそのままpagesで公開 • ここまで1ファイル 10

11.

• 便利なので使おう 11