netlify cms でlarge mediaを使用する。



今までは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](https://qiita.com/yahsan2/items/9ca83e086b4330119fa4)

[Large Media setup \| Netlify Docs](https://docs.netlify.com/large-media/setup/)

[Git LFS でうまく clone や pull ができないときにバイナリファイルのダウンロードをスキップする](https://mseeeen.msen.jp/skip-download-binary-files-with-git-lfs/)