【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する(FirebaseでCORS対応)

1570 語
8 分
【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する(FirebaseでCORS対応)

はじまり#

135ml avatar
135ml
プロフィールページのREADME.mdをカッコよくしたいやつはいるかあー!?
リサちゃん avatar
リサちゃん
俺だ俺だ俺だ俺だあー!!

作ったもの#

今回、以下のREADME.mdで言うところの赤枠の部分を表示するために色々開発しました。

このREADM.mdを更新するアプリを作成するために行ったことは、以下になります。各記事投稿サービスは、Zenn、Qiita、ブログ(WordPress)、noteを対象としています。

  1. Node.jsにより、各記事投稿サービスのRSS Feedから必要な情報を取得する処理を作る。
  2. 先程作った処理を、GitHub Actionsとして機能するようにする。
  3. noteのRSS Feedを取得するために、CORS対応のCloud Functionを作って、noteのEndpointはそのCloud Functionにする。

今回作ったアプリの概要図はこちらになります。初めて触るものばかりでしたし、この概要図も初めてmermaid.jsを使って、初めて尽くしの開発でした。

今回作ったアプリのソースは、GitHub上で公開しています。よければ見ていってください。

landmaster135
/
feed-fetcher
Waiting for api.github.com...
00K
0K
0K
Waiting...

作成の流れ#

1. Node.jsにより、各記事投稿サービスのRSS Feedから必要な情報を取得する処理を作る。#

今回の処理は、Node.jsで作りました。メイン処理はこちらになります。 feed-fetch.js:

import path from 'path';
import url from 'url';
import { Command } from 'commander';
import * as methods from './lib/lib-methods.js';
try {
(async() => {
const commander = new Command();
commander.option('-c, --config-yaml <type>', 'file name for config with yaml').parse(process.argv);
console.log(commander);
const yamlFileName = String(commander._optionValues.configYaml);
console.log(`feed-fetch.js: yamlFileName is "${yamlFileName}"`);
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
const configByYaml = methods.loadYamlFile(path.join(__dirname, yamlFileName));
console.log(configByYaml);
const number_of_display = configByYaml.displayLimit;
const feedUrlArray = configByYaml.feedUrlArray;
const imgFileNameArray = configByYaml.imgFileNameArray;
let listOfLatestFeed = await methods.getLatestFeed(number_of_display, feedUrlArray, imgFileNameArray);
console.log(listOfLatestFeed);
const sourceMdFileName = configByYaml.sourceMarkdownFileName;
const lines = methods.getTextLines(sourceMdFileName);
console.log(lines);
const postArea = configByYaml.postArea;
methods.writeFeedToText(lines, sourceMdFileName, postArea, listOfLatestFeed, feedUrlArray, imgFileNameArray);
console.log(methods.getTextLines(sourceMdFileName));
})();
} catch (error) {
console.error(`Execute Step 1:${error}`);
}

この処理の流れは、以下になります。

  1. 引数に貰ったyamlファイルからこの処理に必要なコンフィグ情報を取得する。(console.log(configByYaml);までの部分)
  2. 最近投稿した記事の一覧をyamlファイルに書いてあった分だけ、取得する。(console.log(listOfLatestFeed);までの部分です。[title, pubDate, link, imgFileName]を1レコードとして取得。)
  3. yamlファイルで取得した更新対象のファイルの全文を取得する。(console.log(lines);までの部分)
  4. 更新対象のファイルの投稿部分の表示だけ書き換える。(最後らへん)

そして、コンフィグ情報は以下のファイルの中身です。 そこに記載する配列feedUrlArrayおよびimgFileNameArrayのインデックスの順番は対応している必要があります。この場合だと、README.mdの中に<!--[START POSTS LIST]--><!--[END POSTS LIST]-->を記載すると、その間に投稿した記事の情報が更新されます。

configOfFeedFetcher.yml:

displayLimit: 15
feedUrlArray:
- https://zenn.dev/kinkinbeer135ml/feed
- https://qiita.com/Landmaster135/feed.atom
- https://www.endorphinbath.com/feed
- https://us-central1-projectbeer15-37257.cloudfunctions.net/api/all
imgFileNameArray:
- img/zenn.png
- img/qiita.png
- img/endorphinbath.png
- img/note.png
sourceMarkdownFileName: README.md
postArea:
start: <!--[START POSTS LIST]-->
end: <!--[END POSTS LIST]-->

noteのエンドポイントに関しては、3.で説明します。

2. 先程作った処理を、GitHub Actionsとして機能するようにする。#

1.で作った処理を、GitHub Actionsとして動かすことにしました。

./node_modules/feed-fetcher/bin/runFeedFetch --config-yaml=../../configOfFeedFetcher.ymlの部分で投稿した記事の部分を更新しています。

name: Update README for RSS feed
on:
workflow_dispatch:
schedule:
- cron: '0 0 * * *'
jobs:
updateFeed:
runs-on: ubuntu-latest
steps:
- name: apt update
run: sudo apt update
- name: Checkout
uses: actions/checkout@v2
- name: node set up
uses: actions/setup-node@v2
with:
node-version: '16.13.1'
- name: Confirm version of node and npm
run: |
node -v
npm -v
- name: Install feedFetcher
run: npm install https://github.com/Landmaster135/feed-fetcher
- name: run feedFetcher
run: |
chmod 777 ./node_modules/feed-fetcher/bin/*
./node_modules/feed-fetcher/bin/runFeedFetch --config-yaml=../../configOfFeedFetcher.yml
./node_modules/feed-fetcher/bin/runImageScale --config-yaml=../../configOfImageScaler.yml
- name: git setting
run: |
git config --local user.email "52403447+Landmaster135@users.noreply.github.com"
git config --local user.name "Landmaster135"
- name: git commit
run: |
git log -1
git add README.md
git diff --cached --quiet || (git commit -m "Update feed snippet" && git push origin main)

./node_modules/feed-fetcher/bin/runImageScale --config-yaml=../../configOfImageScaler.ymlの部分は別の記事で紹介しています。

3. noteのRSS Feedを取得するために、CORS対応のCloud Functionを作って、noteのEndpointはそのCloud Functionにする。#

1.で作成したyamlファイルはこの通りになっていますが、noteのURLの部分だけはCloud Functionのエンドポイントになっています。

configOfFeedFetcher.yml:

displayLimit: 15
feedUrlArray:
- https://zenn.dev/kinkinbeer135ml/feed
- https://qiita.com/Landmaster135/feed.atom
- https://www.endorphinbath.com/feed
- https://us-central1-projectbeer15-37257.cloudfunctions.net/api/all
imgFileNameArray:
- img/zenn.png
- img/qiita.png
- img/endorphinbath.png
- img/note.png
sourceMarkdownFileName: README.md
postArea:
start: <!--[START POSTS LIST]-->
end: <!--[END POSTS LIST]-->

なぜCloud Functionを噛ませているかというと、noteのRSSのURL(僕の場合だと、https://note.com/kinkinbeer135ml/rss)からRSS Feedを取得しようとすると、弾かれてしまうためです。根本原因はnoteのRSSがCORS対応していないことです。

そのため、noteのRSSとfeed-fetcherアプリの間に、CORS対応の中間アプリを設置する必要がありました。 その中間アプリを作る際に、この記事がすごい参考になったので、貼っておきます。

4. Firebaseセットアップ時の備忘録#

しかし、環境整備の際にディレクトリを意識してnpm installしないとデプロイできない事態になります・・・僕は最後のデプロイにモジュールの参照関係が原因でつまづき、けっこう長い時間ハマりました・・・

firebase-debug.logをちゃんと見ずに対処していたので、3時間くらいかかりました・・・見ていないで同様に困っている方はちゃんと見ましょう。)

そのため、以下に行った作業を書いておきます。自分の備忘録でもあります。僕はMacで環境を作ったので、再整備の手順も記載しています。(コマンド実行してPermission Deniedだったら、sudo付けてもう一度。)

if you have installed tools to macos.#

There is a reference site.

Uninstall Node.js with this command.

Terminal window
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*

Uninstall npm with this command.

Terminal window
sudo rm -rf ~/.npm

Exit and Quit Terminal.

Delete these following files in “/usr/local/bin” directory.

Terminal window
node
npm
npx
yarn
yarnpkg

Install tools for develop functions.#

Install Node.js Package here.

Open terminal.

Terminal window
mkdir cloudfunctions
Terminal window
cd cloudfunctions

Check firebase exists or not.

Terminal window
firebase --version
Terminal window
npm install -g npm@8.4.0
Terminal window
npm install -g firebase-tools

Login Firebase account#

Terminal window
firebase login

Initialize Firebase#

Reference here

Terminal window
firebase init
  • Functions: Configure a Cloud Functions directory and its files
  • Use an existing project
  • (project)
  • Javascript or Typescript
  • y
  • Y
  • Firebase initialization complete!

If you clone repository, you must fix following files.#

  • index.js
  • .eslintrc.js

Setup modules for web-app.#

Terminal window
sudo npm install -g yarn
Terminal window
yarn -v
Terminal window
cd functions
Terminal window
yarn add express request-promise-native cors
Terminal window
npm install request

Execute following command after you have edited code.#

⚠️ Raise your project plan to “Blaze” before you deploy app.

Terminal window
cd ..
Terminal window
firebase deploy

もしかしたら、Firebase権限で弾かれている可能性もあるため、その場合はこの記事をご参照ください。

おしまい#

135ml avatar
135ml
とまあ、こんな感じだな。
リサちゃん avatar
リサちゃん
CORS非対応に対応するのが手間なんだなぁ

以上になります!

記事を共有

この記事が役に立ったなら、ぜひ他の人と共有してください!

【Node.js】GitHub ActionsでREADME.mdに投稿した記事のリンクを表示する(FirebaseでCORS対応)
https://endorphinbath.com/posts/nodejs-readme-display-feed/
著者
kinkinbeer135ml
公開日
2022-01-02
ライセンス
CC BY-NC-SA 4.0
関連記事 スマート
1
【GitHub】「github-readme-stats」と「github-profile-trophy」でGitHubをゴージャスに見せる
Code GitHubのプロフィール画面を豪華にするために、README.mdをいじりました。けっこう簡単にゴージャスになります。手が空いた時に設定してみて下さい。
2
【JavaScript】実行中の関数自身の関数名を取得する
Code 実行している関数やメソッド自身の名前を取得する方法を紹介します。この方法は、その関数名を取得する関数を別の関数から呼び出してもらわなければなりません。thisに関数をバインドする必要があるためです。その呼び出し方の種類を掲載しています。
3
【JavaScript】Errorタイプのオブジェクトかどうかを判定する
Code JavaScriptで渡した値がErrorオブジェクトかどうかを判定する関数が見つからなかったので、僕が書いたものを紹介します。
4
【Node.js】Markdown内のimgタグの画像の大きさを変える
Code README.md内のimgタグで記載された画像のサイズを変更する処理を作成しました。沢山画像を貼っていると、いちいちサイズを変更するのが面倒ですが、この処理で一気に直してしまいましょう!
5
【GitHub】PythonとGitHub ActionsでProjectsにIssuesを作る作業を自動化する(前編:Pythonのソース)
Code 日々のタスクをGitHub IssuesおよびGitHub Projectsで管理する時に登録する作業が面倒くさいと思います。いちいちオプションを選択して入力する手間が面倒くさいと思います。本記事では、その作業を省略したツールを紹介します。
ランダム記事 ランダム
Profile Image of the Author
kinkinbeer135ml
SIerをやめて、プログラミングを勉強しています。※Amazonアソシエイトに参加しています。
お知らせ
私のブログへようこそ!これはサンプルのお知らせです。
音楽
カバー

音楽

再生中なし

0:00 0:00
歌詞なし
カテゴリ
タグ
サイト統計
記事
287
カテゴリー
8
タグ
93
総文字数
486,174
運用日数
0
最終活動
0 日前

目次