Node.jsのfetchで画像をダウンロードしてローカルディレクトリへ保存するエンドポイントの作成

経緯
SNS認証がでログインを実施するアプリを構築していてその際にログインしたユーザーのアカウント画像を保存する必要があり
その際の設計でエンドポイントを叩いて画像をダウンロードできるようにしたかったため
画像をダウンロードできるエンドポイントを作成しました。
環境
- node 14.15.3
- express 4.17.1
ファイル操作で利用するUnixコマンドについて
基本的なディレクトリ作成やファイル操作はUnixコマンドを利用します。
Unixコマンドについて詳しくはこちらの記事を参考にしてください。
構築手順
fetchはisomorphic-fetch
を利用し、エンドポイントはexpressで作成しています。
必要パッケージのダウンロード
isomorphic-fetchとexpressのインストール
isomorphic-fetch
とexpress
をyarnコマンドでインストールします。
npmで実施する方は必要に応じて適宜変更してください。
terminal$ yarn add isomorphic-fetch express
ダウンロードの実装
main.js
へ実装処理を記述していきます。
また記述言語についてはTypeScriptを利用します。
それぞれ必要に応じて適宜変更してください。
必要パッケージのインポート
インストールしたパッケージをインポートしていきます。
main.tsimport express from 'express';
import fetch from 'isomorphic-fetch';
合わせてファイル保存を利用するfsモジュールもインポートします。
javascriptimport fs from 'fs'
expressの初期化
main.tsconst app = express();
エンドポイントの作成
/api/download
を叩いでダウンロードできるようにします。
main.tsapp.get('/api/download',
async (
req: express.Request,
res: express.Response
): Promise<void> => {
}
)
引数の取得
リクエストするURLと保存するパスとをクエリパラメータから取得できるようにします。
request_url
取得する画像のURL
filename
保存する画像のファイル名
main.tsconst { request_url, filename } = req.query;
画像を保存するディレクトリ
画像を保存するディレクトリを定義します。
main.tsconst downloadDir = 'download'
画像を保存
fetchで画像を取得し画像を保存します。
main.tstry {
const response = await fetch(request_url);
const savePath = `${downloadDir}/${filename}`;
response.body.pipe(fs.createWriteStream(savePath));
res.send("画像を保存しました。")
} catch (error) {
console.error(error);
res.send("エラーが発生しました。")
}
コード全体
画像を保存する処理の全体コードになります。
javascriptimport express from 'express';
import fetch from 'isomorphic-fetch';
import fs from 'fs'
app.get('/api/download',
async (
req: express.Request,
res: express.Response
): Promise<void> => {
const { request_url, filename } = req.query;
const downloadDir = 'download'
try {
const response = await fetch(request_url);
const savePath = `${downloadDir}/${filename}`;
response.body.pipe(fs.createWriteStream(savePath));
res.send("画像を保存しました。")
} catch (error) {
console.error(error);
res.send("エラーが発生しました。")
}
}
)
app.listen(8000, () => {
console.log(`listening on *:${8000}`);
});
リクエストして確認
アプリケーション起動
作成したmain.tsからアプリケーションを立ち上げます。
TypeScriptで記述しているためts-node
で起動しています。
terminal$ ts-node main.ts
URLへアクセス
起動したアプリケーションへアクセスします。
http://localhost:8000/api/download?request_url=https://placehold.jp/150x150.png&filename=sample.png
データを確認
download
配下に取得したファイルが作成されていれば成功です。
└── download
└── sample.png
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実