Git Large File Storage (LFS)

Publish date: Nov 27, 2021
Tags: Tech

Hugo の画像をどこで管理するかの検討

候補

  1. Git Large File Storage (LFS) Git LFS で画像データなどを管理する際のイメージが湧いていないので調査して整理する
    https://git-lfs.github.com/
  2. AWS S3

きっかけ

Hugo on Vercel で blog を投稿した際に、記事内でつかっている画像 image が build 時大量に up されていて build が重いので何とかしたいと思いました。そもそも バイナリデータを大量に git で管理したくないなぁということで、いくつか候補を挙げて調査してみることにしました。

候補1: Git Large File Storage (LFS) って何だろう

Git で画像や動画のような大きなファイルを別サーバーに分けて管理する方法があるらしい?ということで、どういった構成でデータをもつことになるのかザックリ調べました。
文字で読んでもサッパリ分からんだったので図で整理しました。

Consider Git Large File Storage in Hugo

  1. ローカルで blog(Markdown) を編集して Github に push する
  2. push の直前に該当の画像ファイルなどは LFS API を通して Git Large File Storage にアップロード される (Github には画像のオブジェクトハッシュやファイルサイズなどのメタ情報のみ保存される) (text pointer から実体が紐付くイメージで構成図を書いたけど逆にややこしい図になっているな・・)
  3. Markdown で書かれた blog text と、Git Large File Storage が vercel に(たぶん)アップロードされる
  4. vercel 上で hugo の build によって html に変換される → その際に画像ファイルも都度アップロードされる〜〜〜

ここまで考えて「あれ?LFSで速度改善されないのでは??」と、気づきました。気づいてよかったし、着手前にきちんと調査詰めて要件を満たしているか確認するの大事だなと思いました。

候補2: AWS S3

S3 を使えば速度は改善されると思う。記事内には url だけ貼ることになるし、実態は AWS 上にあるし。ただ(数十円だとはおもうけど)毎月課金されてしまう。速度改善のためだけにお金払うのやだな・・

あとこれ、image の一部なんだけど

images % ls
09bb67ecfd4ee5d8c2d7c723e54a1033a4887a6d_559e41a302c3d_p.png
0ad7766b6c57a2eb.jpeg
0d7f59da28b6e289366a26310a2096e91959100997059218921.png
15576425288731008440587520211699.jpg
1566359104717137574675390621991.jpg
1577889746583.jpg
1594353932999.png
170504.jpeg
19-03-21-18-12-49-811_deco8938957390155488610.jpg
19-04-13-13-27-47-956_deco5748442658795346991.jpg
19-04-14-22-11-06-905_deco6693760064591646990.jpg
19-04-20-21-47-33-693_deco3297542402608747312.jpg
19-05-18-23-44-31-076_deco6466989210618979373.jpg
19-05-18-23-44-50-735_deco5432290385480207713
2019-03-24-21-34-041088377514786431497.jpg
2019-03-24-21-42-346820841563572467085.jpg
2019-03-24-21-43-017006200598047313928.jpg
2019-03-26-07-00-464675251721095089484.jpg
2019-07-08_221561217460522058046.png
2019-07-08_223262605474441828271.png
2019-07-08_226272183185587272406.png
2019-07-10_226936695249368486165.png
2019-09-24_17.19.09.png
2019-09-24_17.34.21.png
2019-09-26_17.37.47.png
2019-09-26_18.07.15.png
2019-10-01_21.55.42.png
2019-12-02-13-37-19-449.jpg
2019-12-08-15-53-18-662.jpg
2019-12-09-12-16-36-950.jpg
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139313639372f30666336393162652d306136362d303364372d356538612d6562393530383665663030302e6a70656.jpeg
71417297-f0d36080-26a7-11ea-8c76-c49004f1f319.gif
715UuBIY2PL._AC_SL1500_.jpg
74da6650eadb1372.jpeg
7f4aba127cfac88d155c5911b8116c4c.jpg
8fc850df285ee79e.jpeg
e382b9e382afe383aae383bce383b3e382b7e383a7e38383e38388-2019-08-26-22.14.09.png
e382b9e382afe383aae383bce383b3e382b7e383a7e38383e38388-2019-08-26-23.06.04-1.png
f6d5fad4149c03e9.png
image-1.png
image-10.png
l0001976550975951702732122.jpg
lfs.jpeg
line_flag_garland01_08.png
motor_driver_ta7291p_31742509775570314893.png
nail.jpg
note.gif
pexels-photo-30732.jpg
self_drive_image-16956967525523055430.png
ssdfg.jpg
stainedglass.jpg
ステンドグラス.png
スクリーンショット-2019-11-30-15.01.31.png
スクリーンショット-2019-11-30-15.39.36.png
スクリーンショット-2019-11-30-17.30.24.png
スクリーンショット-2019-11-30-17.31.21.png

おわかり頂けたでしょうか。

ファイル名にびっくりするほど規則性がない。規則性さえあれば正規表現で多少はラクに書き換えができたのに・・。これを全て手作業で書き換えないといけない。 お金払って手作業して改善されるのって build の数十秒か〜〜〜うーーーん、ナシ!!の結論でした🙌