3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【GitHub + DEV 2023 Hackathon】ハッカソンで賞金獲と…ゴホンゴホン、自作GitHubActions作成!

Posted at

まえおき

何気なくAWSでアプリケーションを稼働させてました。その月は仕事が忙しく使用料金を監視していなくて、月末にふと明細を見たんですよ。
1654750206246912001.gif

これは不味い・・・。
ちょうどその頃、以下の記事を見つけました。

そして私は思ったわけですよ。
「「これしかない・・・。」」

概要

dev.toで開催されるハッカソンに作品を投稿して賞金を獲得する自身の技術力を向上するのが目的です!٩( ᐛ )و
また、このハッカソンはGitHub Actions もしくは GitHub Codespacesを使用したオープンソースのアプリケーションを競うものだそうです。

作品のカテゴリは以下の5つ

  1. Maintainer Must-Haves: Make the lives of Open Source maintainers easier.
    Codespacesを用いた環境の構築や、ドキュメンテーションのサポートツールの開発。
  2. DIY Deployments: Improve the deployment process for open source projects.
    デプロイの自動化やその周辺ツール。CI/CDパイプラインの構築
  3. Interesting IoT: Cool projects that integrate with IoT.
    IoT関連
  4. Phone Friendly: Projects built for Mobile (PWA readiness, iOS/Android)
    PWAアプリケーションやスマートフォン向けアプリのビルドプロセスの構築
  5. Wacky Wildcards: Build a random app that doesn’t fit into one of the categories above.
    なんでも🙆‍♂️

そして、それぞれのカテゴリで優勝者が1人ずつ選ばれ、優勝者以外の10人に賞が贈られるようです!

とりあえず、敵を知り己を知ればなんやらで、過去の優勝者を見てみました。

・・・

面白い!面白すぎます!
Wacky Wildcardsの優勝者作品凄すぎます。

PRをマージしたらGitHub Pagesにゲームをデプロイするそう💡
なんて素敵な発想なんでしょうか✨

いろいろありますが、自分が特に気に入ったのはこれ。

GitHub actionがfailしたら物理的なランプが点灯するそうです、斬新😂
image.png
【引用:https://dev.to/darthbenro008/action-paniker-stimulate-your-sense-physically-when-your-build-fails-3ah9】

作品

さて、私もいくつか作品を作ったので、紹介していきます。

1. yaml-replacement-action

yamlファイルの任意のvalueYYYYMMDDhhmmのフォーマットで置換するActionです。
オプションで置換後の変更をcommit&pushすることも可能です。

モチベーション

ブラウザキャッシュを更新するために、静的ファイルのURL末尾にユニークな値をセットすることあるじゃないですか?

例えば

<script src="production.min.js?ver=1"></script>

のようなjsファイルのブラウザキャッシュを更新したい場合、以下のようにverを変更したりすると思います。

<script src="production.min.js?ver=2"></script>

このパラメータはyamlか何かで値を保存すると思うのですが、いちいちデプロイの度に更新するのは面倒ですよね。それを解消するためにこのアクションを作成しました🎉

振り返り

yqでよくね?」「既にある気が・・・。」「車輪の再発明じゃね?」
はい、そうなんです。yqコマンドで直接変更できる上に、上位互換のActionがありますね。こちらは、jsonもxmlも置換可能な優れものです。。。完全敗北しました。

2. star_tweet

自分のリポジトリにスターをつけてくれた人にメンション付きツイートするActionです。

モチベーション

GitHubのAPIをちょこちょこ触ってて気づいたんです。
TwitterのアカウントをGitHubと連携していたら、アカウント情報を取得できる」という事実に!

% curl -s https://api.github.com/users/<userId> | jq '.twitter_username'

(なんでTwitterだけ取得できるのでしょうか?インスタとかは無理でした。。。)

同時に何かの記事でリポジトリにスターした際にワークフローを実行できることも知りました。
これを組み合わせたら・・・

1654710256742846464.gif

こんな感じでスターをしてくれた人にメンション付きツイートが送信されます✨

振り返り

本当は1つTwitterのアカウントを作成してツイートさせようと考えていました。
しかし、実行元のリポジトリで認証キーを取り扱う方法がわからず断念しました・・・。いい方法があるのでしょうか?

3. ssm-to-heroku-env-action

最後はこちら!AWS SSM Parameter Storeの環境変数をHerokuに持ってくるActionです。

モチベーション

AWSの費用がちょっと高いなと思った私は、Herokuへのアプリケーションの移行を行いました。
環境変数は元々Parameter Storeで保管していたのですが

  1. Herokuにポチポチ移動するのが面倒
  2. もしAWSに戻すとき、今度はHeroku→Parameter Storeへ移動する必要がある

のような点から、Parameter Storeを正とし、Herokuはあくまでそれを参照するようなインフラを考えました。これを自動化するようなActionになります🚀

振り返り

これは機能もそうですが、何よりソースコードをキレイに書けたことが嬉しいです😉
フレームワークなしでTypeScriptを書くことがほぼないので、いい経験になりました!

まとめ

GitHub Actionsの作成は思っていた以上に奥が深く楽しいです!みなさんもぜひハッカソンに挑戦してみてください!(Actionの作成方法は公式ドキュメントに詳しく載っています!)

JavaScript・TypeScriptのテンプレートもあるので、ぜひ使ってみて下さい٩( ᐛ )و

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?