- 投稿日:
この記事ではGitHub ActionsのCustom actionをJavaScriptで実装するJavaScript actionをTypeScriptとSWCを使って実装した方法を書いてます。
モチベーション
- GitHub ActionsのWorkflowsを共通化したい
- TypeScriptでロジックを書きたい
- SWCを使いたい(nccはtscを使うので避けたい
- github-scriptは一定以上のボリュームがあるものには向かない
- これを使いつつUTを書いたりするとなると結構面倒になると思う
今回作るもの
Custom actionのうちJavaScript actionを作成します。
実装コードはTypeScript、トランスパイラはSWC、バンドラはwebpackを利用します。
バンドラを利用するのは、node_modules/
をGitで管理したくないためです。
ビルド成果物であるdist/
は実行時に必要なため、Gitで管理します。
(CI上でビルドしてキャッシュさせておくことも出来ると思いますが、今回は扱いません)
確認環境
Env | Ver |
---|---|
@actions/core | 1.10.0 |
@actions/github | 5.1.1 |
@swc/cli | 0.1.57 |
@swc/core | 1.3.26 |
swc-loader | 0.2.3 |
typescript | 4.9.5 |
webpack | 5.75.0 |
webpack-cli | 5.0.1 |
サンプルコード
Custom Actions本体
Custom action本体のサンプルコードです。以下に一式があります。
https://github.com/Lycolia/typescript-code-examples/tree/main/swc-ts-custom-actions
ディレクトリ構成
dist/
配下を叩くため、ここはGit管理に含めます。バンドルするのでnode_modules/
はGit管理から外して問題ありません。
├─dist/
│ └─index.js # Custom Actionsとして実行するファイル本体
├─node_modules/
├─src/
│ └─index.ts # TypeScript実装
├─action.yaml # Custom Actionsの定義
├─package-lock.json
├─package.json
├─swcrc-base.js # SWCの設定
├─tsconfig.json # tscの設定
└─webpack.config.js # webpackの設定
swcrc-base.js
SWCの設定例。特にJavaScript actionのための設定はなく、CLI向けのトランスパイルが出来る設定ならおk。
ファイル名は何でも大丈夫ですが、この場では.swcrc
にしないことで、直接SWCで利用しないことを判りやすくするために違う名前にしています。
module.exports = {
module: {
type: 'commonjs',
},
jsc: {
target: 'es2020',
parser: {
syntax: 'typescript',
tsx: false,
decorators: false,
dynamicImport: false,
},
baseUrl: '.',
paths: {
'src/*': ['src/*'],
},
},
};
webpack.config.js
SWCを使って.ts
ファイルをバンドルするための設定。これがないとimport
の解決ができずにコケます。
node_modules/
配下をGit管理に含める場合は不要かもしれませんが、それをするのは微妙だと思います。
const path = require('path');
const swcrcBase = require(path.resolve(__dirname, 'swcrc-base'));
module.exports = {
// エントリポイント
entry: path.resolve(__dirname, 'src/index.ts'),
// 出力設定
output: {
// クリーンアップ後に出力
clean: true,
// 出力ファイル名
filename: 'index.js',
// 出力パス
path: path.resolve(__dirname, 'dist'),
},
// 設定必須なので何か指定しておく
mode: 'production',
// 指定してないとNode.jsのネイティブAPIが呼べない
target: ['node'],
module: {
// swc-loaderの設定
rules: [
{
test: /\.ts$/,
exclude: /(node_modules)/,
use: {
loader: 'swc-loader',
// swcrcの設定
options: {
...swcrcBase,
},
},
},
],
},
resolve: {
// import時のファイル拡張子を省略してる場合にパスを解決するための設定
extensions: ['', '.ts', '.js'],
},
};
src/index.ts
最低限これだけ確認できれば応用して実装できるだろうという程度のサンプルコード。
@actions/*
系の使い方は以下のリンクから確認できます。
actions/toolkit: The GitHub ToolKit for developing GitHub Actions.
import * as core from '@actions/core';
import * as github from '@actions/github';
const githubToken = core.getInput('GITHUB_TOKEN', { required: true });
const octokit = github.getOctokit(githubToken);
console.log('octokit', octokit);
console.log('context', github.context);
core.setOutput('RESULT_MESSAGE', 'test result message');
action.yaml
実装の参考例として引数と出力を定義してます。特に不要な場合は書かなくてもいいです。
Node.jsのバージョンを詳細に指定したい場合は、composite action にすれば可能だとは思いますが、試してない。
composite actionにしてnvmか何かでインストールしてやれば恐らく可能。
構文は以下のページで確認できます。
GitHub Actions のメタデータ構文 - GitHub Docs
name: example
description: custom actions example
inputs:
GITHUB_TOKEN:
description: 'Repogitory GITHUB_TOKEN'
required: true
outputs:
RESULT_MESSAGE:
description: 'Result message'
on:
workflow_call:
runs:
using: node16
main: dist/index.js
Custom actionを使う側
Custom actionを使うWorkflowのサンプルコードです。以下にソースがあります。
https://github.com/Lycolia/custom-actions-usage-example
.github/workflows/example.yaml
uses
のところにはリポジトリの組織名と、リポジトリ名、action.yaml
が配置されているディレクトリまでのパスを書きます。ルートディレクトリにある場合はパスを書かなくてOK
最後に@sha-hash
でコミットハッシュかタグを付けてやれば呼べるようになります。
動作確認中はハッシュが頻繁に変わるので、最新のハッシュを取得してきて設定されるようにしておくと便利かもしれません。
name: run example
on:
workflow_dispatch:
jobs:
example:
runs-on: ubuntu-latest
steps:
- name: run custom actions
id: test
uses: org-name/repo-name/path/to/file@sha-hash
with:
# Custom action側で定義されている引数(input)の設定
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: show custom actions output
# Custom action側で定義されている出力(output)の取得
run: echo ${{ steps.test.outputs.RESULT_MESSAGE }}
参考資料
- Getting Started – SWC
- swcrcの書き方やswc-loaderの使い方
- Concepts | webpack
- webpackの設定
- カスタム アクションについて - GitHub Docs
- GitHub Actions のメタデータ構文 - GitHub Docs
- プライベート リポジトリからのアクションとワークフローの共有 - GitHub Docs
- actions/toolkit: The GitHub ToolKit for developing GitHub Actions.
@actions/*
系のドキュメントなど
- 投稿日:
公式のリファレンスが情報少なすぎるのでメモ
特にこれというフォーマットはなく、ある程度幅広い書式があるようで、公式のドキュメントを見る限り、多少のブレはよしなに解釈してくれるっぽい?
この記事ではoperatorなどの用語が登場しますが、これは私が勝手に名付けたものなので、特に公式の用語ではありません
手組するの面倒なので雑にコマンド生成ツールを作りました。
https://tool.lycolia.info/slack-remider-creator
登録
基本
- フォーマット
/remind [宛先] [メッセージ] [実行日時]
- 例
/remind #random "hoge piyo fuga" at 10:00 every monday, sunday
書式
宛先
宛先 | 意味 |
---|---|
me | 自分 |
@someone | メンション |
#channel | チャンネル |
メッセージ
"hoge piyo fuga"
のように書けるが、hoge piyo fuga
でも一応通じる
ダブルクォートで囲む場合、改行も利用可能
実行日時
<oparator> <repeat-operator>
<oparator>
で実行日時を設定<repeat-operator>
で繰り返しを設定
- 例
at 10:00 every monday, sunday
oparator
オペレーター | 例 | 意味 |
---|---|---|
in <value> (seconds \ | minutes \ | hours) |
at <HH:mm> | at 1700 | 指定時刻に実行 |
on <yyyy-MM-dd HH:mm> | on 2023-10-10 09:15 | 指定日時に実行 |
repeat-operator
every <operator>
- 例
every monday, sunday
operator |
---|
day |
weekday |
sunday, monday, tuesday, wednesday, thursday, friday, saturday |
削除
/remind list
でリスト表示して消す
一覧
/remind list
- 投稿日:
確定申告後に国税納付する方法の備忘録
前提条件
- やよいの○色申告でe-Taxへの送信まで行っている
- 白でも青でもどっちでもOK
- e-Taxの利用者登録をしている
手順
- e-Tax のログインページを開く
- e-Taxソフト(WEB版)へログインする
- 「送信結果・お知らせ」から「納付情報登録依頼」を開く
- 納付方法が列挙されたページが開くので好きな納付方法を選ぶ
- コンビニ納付が一番楽
- この場合QRコードはPDFに出してスマホで出せるようにすると良い(スクショは読み取れないことがある
- 投稿日:
Twilogには特定ツイートを一括で削除する機能がなかったので適当に作りました。
ページネーション機能はないので暇な人作ってください。
事前にページネーションリンクを取得して各ページのHTMLを取得してID引っこ抜けばできると思います。多分
/**
* これは何?
* Twilogで現在表示中のページのツイートをすべて削除します
* 事前に削除対象のツイートを日付選択や検索などで表示した上で実行します
* ページネーション機能はありません
*
* 使い方
* このスクリプトをChromeのDevtoolsのConsoleにコピペして実行します
* 複数ページある場合はページをリロードして同様に操作します
*/
const getSession = () => {
const scr = [...document.getElementsByTagName('script')].find(v => v.text.match(/j-delete-tweet.rb/) !== null)
const mat = scr.text.match(/j-delete-tweet.rb\?c=(.+?)&.+&token=(.+)"/)
return {
c: mat[1],
token: mat[2]
}
}
const getDeleteIdList = () => {
return [...document.getElementsByClassName('tl-del')]
.map((el) => {
const mat = el.children[0].onclick.toString().match(/delete_tweet\('(.+?)','(.+?)',/)
return {
date: mat[1],
status_id: mat[2]
}
}
)
}
const createDeleteRequest = (c, token) => {
return async (date, statusId) => {
return fetch(`https://twilog.org/j-delete-tweet.rb?c=${c}&date=${date}&status_id=${statusId}&token=${token}`)
}
}
const session = getSession()
const requestDelete = createDeleteRequest(session.c, session.token)
const deleteIdList = getDeleteIdList()
let index = 0;
setInterval(async () => {
if (index < deleteIdList.length) {
const del = deleteIdList[index]
const result = await requestDelete(del.date, del.status_id)
console.log(`${index} / ${deleteIdList.length}`, result)
++index
}
}, 1000)
- 投稿日:
IPv6のOCNバーチャルコネクト環境ではwell-known portsが利用出来ずWebサーバーを公開するのに支障がありますが、今回はそれを乗り越えるための手法を紹介します。
自宅サーバーにhttps://service.example.com/
のようにポート指定なしのサブドメインでアクセスできるようにするのがゴールです。
構成
自宅サーバーの手前にCDNを挟み、CDNを経由して接続させるようにします。要するに手前にリバプロを生やしておくわけです。
前提
- Google Domainsを利用している
- ルートドメインを保有している
- AWSのアカウントがある
前準備
DNS レコードに次のドメインを作っておく
用途 | ドメイン | レコード | データ |
---|---|---|---|
CDN 用のドメイン | cdn.example.com | A | サーバーの IP |
公開用のドメイン | service.example.com | A | サーバーの IP |
自宅サーバーを公開可能な状態にする
叩き台程度ならserveを使うのが手っ取り早いですが、Node.jsでサーバー立てるのもありだと思います。今回は叩きなのでHTTPにしていますが本番運用するときはHTTPSにしましょう。
以下サンプル
const http = require('http');
const port = 12345;
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello world!');
console.log(req.headers.host, req.socket.remoteAddress);
});
server.listen(port, () => {
console.log(`Running at http://localhost:${port}`);
});
手順
- CloudFrontを開く
- 「ディストリビューションを作成」
- 「オリジンドメイン」に
cdn.example.com
を設定 - 「プロトコル」を選ぶ
cdn.example.com
の「ポート」を設定する- 設定までスクロール
- 「代替ドメイン名 (CNAME) - オプション」で「項目を追加」し
service.example.com
を入力 - 「カスタムSSL証明書 - オプション」で「証明書をリクエスト」
- 「パブリック証明書をリクエスト」
- 「完全修飾ドメイン名」に
service.example.com
を入力し「リクエスト」 - 「証明書を表示」
- DNSレコードに「CNAME名」で「CNAME値」を追加
- 「保留中の検証」が終わるのを待つ
- 「カスタムSSL証明書 - オプション」で作成した「ACM証明書」を選択
- 「ディストリビューションを作成」
service.example.com
のDNSレコードをCNAMEにし、データを「ディストリビューションドメイン名」に変更https://service.example.com/
にアクセスできればOK
参考資料
トラブルシュート
ディストリビューションを削除したい
- ディストリビューションの一覧で消したいのにチェック入れて無効化
- しばらく待つ
- 消したいのにチェック入れて削除
後書き
副次的効果ですがCDN挟んでキャッシュされてるお陰で連続アクセスしてもサーバーまでリクエスト来ないので感動しました。
CloudFrontには他にも様々な機能があるみたいなので活用できれば便利そうです。