今まではuploadcareを使っていましたが、金払えと言われるので、せっかくなのでnetlifyのLarge Mediaに置き換える。
仕組み敵には、githubにstaticなファイルをプッシュすると、lfsにしてくれて、netlify cmsではそこに対して、ファイルのアップロードをしてくれ、実際の画像はLarge Mediaで管理するようになる。
まずはnetlify-cliのインストールから設定
npm install netlify-cli -g
- lfsの確認
git lfs version
- Git LFS version: v2.5.1以上が入っていなければ入れる
home folderで
netlify init
すると認証画面が立ち上がるので、認証する。
なんか聞かれるので、答える。
Do you want to create a Netlify site without a git repository?
No, I will connect this directory with GitHub first
そうすると手順を出してくれる。
よくみるやつ＋α
1. Initialize a new repo:
git init
2. Commit your files
git add .
3. Commit your files
git commit -m 'initial commit'
4. Create a new repo in GitHub https://github.com/new
5. Link the remote repo with this local directory
git remote add origin git@github.com:YourGithubName/your-repo-slug.git
6. Push up your files
git push -u origin master
7. Initialize your Netlify Site
netlify init
repoフォルダ内でやる必要がありそうなので7番をrepoフォルダで実施。
netlify init
? What would you like to do? ⇄ Connect this directory to an existing Netlify site
netlify link will connect this folder to a site on Netlify
? How do you want to link this folder to a site? Use current git remote origin (https://github.com/xxx/xxx)
Looking for sites connected to 'https://github.com/xxx/xxx'...
- すると.netlify/state.jsonができ、それっぽい。
largemediaのプラグインをインストール
netlify plugins:install netlify-lm-plugin
netlify lm:install
repoの設定
- repoがどのプロジェクトに紐ついているのか確認
netlify link
- 問題なければ、setup
netlify lm:setup
.lfsconfigが作成されればOK
- 今回はstatic/images/配下をトラッキングしたいので、
git lfs track "static/images/**"
を打って終わり。
.gitattributesができるので、一応確認。
cat .gitattributes
static/images/** filter=lfs diff=lfs merge=lfs -text
git push
pushします。error...なめとる。
git: 'credential-netlify' is not a git command. See 'git --help'.
- ~/.netlify/helper/bin をみるとgit-credential-netlifyしかないので、コピーしてcredential-netlifyにリネーム
- パスが通っていないのでパスを通す。
これでプッシュできましたとさ。
deployできない
- プッシュはできたもののデプロイができない。こんなエラーがでた。
7:05:28 AM: error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
7:05:28 AM: Input file contains unsupported image format
7:05:28 AM:
7:05:28 AM: Error: Input file contains unsupported image format
- どうやら、static/images/配下を全てlfsにしたので、formatが合わなくなったらしい。
- 一度、.gitattributesを削除して、imageフォルダを削除しpush。再度imageフォルダを作成してpush
- その後、lfsにするようのフォルダを切る。static/images/uploads/** をlfsにするように変更
git lfs track "static/images/uploads/**"
これで、今まで通りdeployされたとさ。
adminでエラー
画像は運用上全て管理画面からアップロードするので/adminでログインすると、こんな感じのエラーになる。
Error loading the CMS configuration
Config Errors:
config should have required property 'media_folder'
config should have required property 'media_library'
config should match some schema in anyOf
Check your config.yml file.
言われた通りconfig.ymlに下記を追加
media_folder: "static/images/uploads"
public_folder: "/images/uploads"
public_folder も必要そうなので追加しておく
これで再度pushして/adminすると画像がアップロードできるようになる。
追記
pullできないときには下記で対応
// 1. Git LFS のファイルダウンロードを pull で一括して行わないように設定する
git lfs install --skip-smudge
// 2. Git で clone もしくは pull する
git clone <URL>
git pull
// 3. Git LFS で管理されているファイルをダウンロードする
git lfs pull
// 4. 1. の設定を元に戻す
git lfs install --force
参考
URLパラメータで簡単画像リサイズ。netlify の Large Media が便利！ - Qiita