Strapi Provider Firebase Storage

⚠️ 커스텀 버전

이 레포지토리는 strapi-provider-firebase-storage 를 기반으로 이미지 압축·리사이징·WebP 변환 기능을 추가한 커스텀 구현입니다. npm 에는 strapi-provider-firebase-storage--custom 라는 이름으로 배포됩니다. 사용하기 위해서는 src/index.ts 를 알맞게 수정한 뒤, 일반적인 Strapi Provider 사용법을 따르시면 됩니다.

Installation

npm install @dev.w-strapi/strapi-provider-firebase-storage--custom

Note on CORS options

You may run into an issue displaying the image where CORS is blocking it. If that happens open ./config/middwares.js and replace strapi::security with this:

{
  name: "strapi::security",
  config: {
    contentSecurityPolicy: {
      useDefaults: true,
      directives: {
        "connect-src": ["'self'", "https:"],
        "img-src": [
          "'self'",
          "data:",
          "blob:",
          "storage.googleapis.com",
          "dl.airtable.com",
        ],
        "media-src": [
          "'self'",
          "data:",
          "blob:",
          "storage.googleapis.com",
          "dl.airtable.com",
        ],
        upgradeInsecureRequests: null,
      },
    },
  },
},

It will whitelabel images coming from Google Cloud Storage in the CORS settings.

Usage

Here is a sample usage:

• plugins.ts 의 위치:
  • strapi-cloud 배포했을시: config/env/production/plugins.ts
  • 그 외: config/plugins.ts
• env 값 로드:
  • strapi-cloud 배포했을시: strapi-cloud 대시보드에서 설정한 env variables 값은 config 파일에서 못 불러옴. src 에선 불러옴.

export default ({ env }) => ({
    upload: {
      config: {
        breakpoints: {},
        provider: "@dev.w-strapi/strapi-provider-firebase-storage--custom",
        providerOptions: {
          serviceAccount: require("path/to/my/serviceAccount.json"),
          // Custom bucket name
          bucket: env(
            "STORAGE_BUCKET_URL",
            "my-bucket-name.appspot.com"
          ),
          sortInStorage: true, // true | false
          debug: false, // true | false
          defaultDirPath: "my-default-folder", // optional
          defaultQuality: 90, // 이미지 압축을 시작할 품질 (default: 90)
          qualityDecrement: 10, // 품질을 낮출 때 한 번에 감소시키는 단위 (default: 10)
          minQuality: 50, // 압축 품질 하한선 (default: 50)
          maxFileSize: 700, // 최대 파일 크기 (kb 단위, default: 1024)
          resizeOptions: {}, // Sharp 에 넘겨줄 리사이징 옵션 ex) {width: 1921, withoutEnlargement:true}
        },
      },
    },
});

Config Options

| Option | Is Required | Default | Notes | |:-------------------|:------------|:--------|:---------------------------------------------------------------------------------------------------------------------------| | breakpoints | false | none | 오리지널 이미지와 썸네일 이미지 외의 반응형 이미지를 생성하지 않고 싶을 때 위와 같이 빈 오브젝트로 설정하면 됩니다. | | serviceAccount | true | none | This is just the path to your service account file | | bucket | false | none | If you leave this blank it should go to your default bucket, but I'd recommend putting your default bucket name anyway | | sortInStorage | false | true | This will sort files in your firebase storage bucket into folders | | debug | false | false | This will just log all the steps to the console | | defaultDirPath | false | none | | | defaultQuality | false | 90 | 이미지 압축을 시작할 품질 | | qualityDecrement | false | 10 | 품질을 낮출 때 한 번에 감소시키는 단위 | | minQuality | false | 50 | 압축 품질 하한선 | | maxFileSize | false | 1024 | 1024 kb | | resizeOptions | false | {} | Sharp 에 넘겨줄 리사이징 옵션 ex) {width: 1921, withoutEnlargement:true} |

Notes on the sortInStorage option

By default Strapi will just output all the files in the default bucket with no folder structure (even if you make folders in the Strapi admin UI). Strapi also creates variants of files (like iamges ex. thumbnails) so if you upload an image to Strapi you'll actually have like a few variants of it actually uploaded to Firebase.

If you were to look at that in Firebase it would look like total chaos. So what I did was create a couple of functions that will upload your files based on mime type as well as sort all variants of an image under a single folder. If you wanted to do something else with those images (for example create triggers for uploads for specific folders) they will be sorted nicely for you.

Also be really careful toggling the sortInStorage option. If you have it on, upload some files, then turn it off the delete function could break for the files that were uploaded when it was turned on.