記事一覧 >
ブログ記事

npmのpatch-packageを使って、static-tweetにパッチを当てた

2021年09月01日 (更新)2021年09月01日 (公開)

はじめに

前回記事で、react-static-tweets(GitHub)を改修して、Twitter APIをGETするときにプロキシを使うようにした話を書きました。
ソースコードの変更内容のことでしたが、今回は、具体的にどうやって反映させたかを書こうと思います。

react-static-tweetsのソースコード書き換えが必要ですので、forkするのか、自分のソースコード（itc-blog(GitHub)）に取り込んでしまって良いのか？と対応に迷いが生じ、パッチを当てる方法を見つけて、実践しました。
パッチを当てる方法は、npmのpatch-packageを使います。

【作業の流れ】
※プロジェクト名をitc-blogとします。

react-static-tweets(GitHub)
のソースコードをダウンロード
↓
react-static-tweets/packages/static-tweets/src/twitter/api.ts
をProxy対応に修正
↓
react-static-tweetsをビルド
↓
itc-blog/node_modules/static-tweets/src
itc-blog/node_modules/static-tweets/build
を更新
↓
npx patch-package static-tweets
↓
itc-blog/patches/static-tweets+0.5.3.patch　作成
↓
itc-blog/package.json更新
↓
npm install
↓
毎回、
itc-blog/node_modules/static-tweets/src
itc-blog/node_modules/static-tweets/build
に修正内容が適用されて、プロキシを通して、Twitter APIをGET

ソースコード修正

react-static-tweets(GitHub)のソースコードをダウンロードします。
※0.5.4のバージョン固定にしたいので、react-static-tweets-0.5.4.zipをダウンロードします。

展開します。

$ unzip react-static-tweets-0.5.4.zip
$ mv react-static-tweets-0.5.4 react-static-tweets
$ cd react-static-tweets

ソースコードを修正します。

$ vi react-static-tweets/packages/static-tweets/src/twitter/api.ts

diff：

node_modules/static-tweets/src/twitter/api.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-import fetch from '../fetch'
+//import fetch from '../fetch'
+import fetch from 'isomorphic-fetch';
+import { HttpsProxyAgent } from 'https-proxy-agent';
 const API_URL = 'https://api.twitter.com'
 const SYNDICATION_URL = 'https://syndication.twitter.com'
@@ -13,7 +15,8 @@ function twitterLabsEnabled(expansions) {
 }
 export async function fetchTweetsHtml(ids) {
-  const res = await fetch(`${SYNDICATION_URL}/tweets.json?ids=${ids}`)
+  const proxy = process.env.https_proxy;
+  const res = await fetch(`${SYNDICATION_URL}/tweets.json?ids=${ids}`, proxy ? { agent: new HttpsProxyAgent(proxy) } : {})
   if (res.ok) return res.json()
   if (res.status === 404) return {}
@@ -32,14 +35,17 @@ export async function fetchUserStatus(tweetId) {
   // If there isn't an API token don't do anything, this is only required for videos.
   if (!process.env.TWITTER_ACCESS_TOKEN) return
-  const res = await fetch(
-    `${API_URL}/1.1/statuses/show/${tweetId}.json?include_entities=true&tweet_mode=extended`,
-    {
-      headers: {
-        authorization: `Bearer ${process.env.TWITTER_ACCESS_TOKEN}`
-      }
+  const proxy = process.env.https_proxy;
+  const res = await fetch(`${API_URL}/1.1/statuses/show/${tweetId}.json?include_entities=true&tweet_mode=extended`, proxy ? {
+    headers: {
+      authorization: `Bearer ${process.env.TWITTER_ACCESS_TOKEN}`
+    },
+    agent: new HttpsProxyAgent(proxy)
+  } : {
+    headers: {
+      authorization: `Bearer ${process.env.TWITTER_ACCESS_TOKEN}`
     }
-  )
+  })
   console.log(
     'Twitter x-rate-limit-limit:',
@@ -68,14 +74,18 @@ export async function fetchTweetWithPoll(tweetId) {
   if (!process.env.TWITTER_ACCESS_TOKEN || !twitterLabsEnabled(expansions))
     return
-  const res = await fetch(
-    `${API_URL}/labs/1/tweets?format=compact&expansions=${expansions}&ids=${tweetId}`,
-    {
-      headers: {
-        authorization: `Bearer ${process.env.TWITTER_ACCESS_TOKEN}`
-      }
+  const proxy = process.env.https_proxy;
+  const res = await fetch(`${API_URL}/labs/1/tweets?format=compact&expansions=${expansions}&ids=${tweetId}`, proxy ? {
+    headers: {
+      authorization: `Bearer ${process.env.TWITTER_ACCESS_TOKEN}`
+    },
+    agent: new HttpsProxyAgent(proxy)
+  } : {
+    headers: {
+      authorization: `Bearer ${process.env.TWITTER_ACCESS_TOKEN}`
     }
-  )
+  })
   console.log(
     'Twitter Labs x-rate-limit-limit:',
@@ -99,7 +109,8 @@ export async function fetchTweetWithPoll(tweetId) {
 }
 export async function getEmbeddedTweetHtml(url) {
-  const res = await fetch(`https://publish.twitter.com/oembed?url=${url}`)
+  const proxy = process.env.https_proxy;
+  const res = await fetch(`https://publish.twitter.com/oembed?url=${url}`, proxy ? { agent: new HttpsProxyAgent(proxy) } : {})
   if (res.ok) return res.json()
   if (res.status === 404) return

ビルド

react-static-tweets をビルドします。

$ cd react-static-tweets/
$ npm install
$ npm run build

ビルドした結果、
react-static-tweets/packages/static-tweets/build
ができます。

node_modules更新

react-static-tweetsのビルド結果をitc-blog/node_modules/static-tweetsの方に適用します。

$ cd ../
$ rm -r itc-blog/node_modules/static-tweets/src
$ rm -r itc-blog/node_modules/static-tweets/build
$ cp -rp react-static-tweets/packages/static-tweets/src itc-blog/node_modules/static-tweets/
$ cp -rp react-static-tweets/packages/static-tweets/build itc-blog/node_modules/static-tweets/

パッチ作成

npmのpatch-packageコマンドを使って、差分パッチファイルを作成します。

$ cd itc-blog
$ npx patch-package static-tweets

【 npx 】

npmで管理されたプログラムの一つです。npxを使うと、オンメモリで依存関係を解決した状態で、引数に指定したプログラムを実行できます。ディスクを汚さず、一度きりしか実行しないプログラムを実行するのに向いています。

結果、itc-blog/patches/static-tweets+0.5.3.patchが作成されます。
このパッチファイルは、普通にnpm installしたときのnode_modules/static-tweetsと上記のように修正してビルドしなおしたnode_modules/static-tweetsとの差分です。

package.json更新

package.jsonを更新して、npm install後にパッチが適用されるようにします。
"postinstall": "patch-package"
を追加します。

postinstallは、patch-packageに限らず、npm install後に実行するコマンドを指定できます。

例：

{
  "name": "itc-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next build && next export",
    "postexport": "next-sitemap --config sitemap.config.js",
    "serve": "PORT=3000 serve ./out",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@mapbox/rehype-prism": "^0.6.0",
（略）

パッチ適用

patch-packageをインストールして、npm installでパッチを適用します。
※patch-packageは、devDependenciesに追加されます。

$ npm install patch-package --save-dev
$ npm install
> patch-package

patch-package 6.4.7
Applying patches...
static-tweets@0.5.3
（略）

$ view node_modules/static-tweets/src/twitter/api.ts

//import fetch from '../fetch'
import fetch from 'isomorphic-fetch';
import { HttpsProxyAgent } from 'https-proxy-agent';

書き換えたところが変わっていれば、ＯＫです。

node_modules/static-tweets/srcの方は、実際には使われないため、node_modules/static-tweets/buildの方が重要です。

できました！

コメント投稿機能です。以下のように投稿されます。 comments example

個人情報に関わることは自己紹介であっても絶対に書き込まないでください。
その他、宣伝、誹謗中傷等、当方が不適切と判断した書き込みは、理由の如何を問わず、投稿者に断りなく削除します。
書き込み内容について、一切の責任を負いません。
このコメント機能は、予告無く廃止する可能性があります。ご了承ください。
コメントの削除をご依頼の場合はTwitterのDM等でご連絡ください。

個人情報に繋がる名前は入力しないでください。

よく読まれている記事