経緯

SNS認証がでログインを実施するアプリを構築していてその際にログインしたユーザーのアカウント画像を保存する必要があり
その際の設計でエンドポイントを叩いて画像をダウンロードできるようにしたかったため
画像をダウンロードできるエンドポイントを作成しました。

環境

• node 14.15.3
• express 4.17.1

ファイル操作で利用するUnixコマンドについて

基本的なディレクトリ作成やファイル操作はUnixコマンドを利用します。
Unixコマンドについて詳しくはこちらの記事を参考にしてください。

構築手順

fetchはisomorphic-fetchを利用し、エンドポイントはexpressで作成しています。

必要パッケージのダウンロード

isomorphic-fetchとexpressのインストール

isomorphic-fetchとexpressをyarnコマンドでインストールします。
npmで実施する方は必要に応じて適宜変更してください。

terminalCopy code$ yarn add isomorphic-fetch express

ダウンロードの実装

main.jsへ実装処理を記述していきます。
また記述言語についてはTypeScriptを利用します。
それぞれ必要に応じて適宜変更してください。

必要パッケージのインポート

インストールしたパッケージをインポートしていきます。

main.tsCopy codeimport express from 'express';
import fetch from 'isomorphic-fetch';

合わせてファイル保存を利用するfsモジュールもインポートします。

javascriptCopy codeimport fs from 'fs'

expressの初期化

main.tsCopy codeconst app  = express();

エンドポイントの作成

/api/downloadを叩いでダウンロードできるようにします。

main.tsCopy codeapp.get('/api/download',
  async (
    req: express.Request,
    res: express.Response
  ): Promise<void> => {
  }
)

引数の取得

リクエストするURLと保存するパスとをクエリパラメータから取得できるようにします。

request_url

取得する画像のURL

filename

保存する画像のファイル名

main.tsCopy codeconst { request_url, filename } = req.query;

画像を保存するディレクトリ

画像を保存するディレクトリを定義します。

main.tsCopy codeconst downloadDir = 'download'

画像を保存

fetchで画像を取得し画像を保存します。

main.tsCopy codetry {
  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("エラーが発生しました。")
}

コード全体

画像を保存する処理の全体コードになります。

javascriptCopy codeimport 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で起動しています。

terminalCopy code$ ts-node main.ts

URLへアクセス

起動したアプリケーションへアクセスします。 http://localhost:8000/api/download?request_url=https://placehold.jp/150x150.png&filename=sample.png

データを確認

download配下に取得したファイルが作成されていれば成功です。

Copy code└── download
    └── sample.png