Getting wrong Google Cloud Storage path in Strapi v4

Question

currently I'm uploading something file. Succeed when uploading the file to Google Cloud Storage, but when get the file, I have getting error something like this

If I check and see detail, the source is wrong, for example, the correct link should be like this https://storage.cloud.google.com/cms-strapi-storage/thumbnail_cloudsql_ae61374abd/thumbnail_cloudsql_ae61374abd.png

Anyone can help me? Thank you

My reference and package got from this source : https://www.npmjs.com/package/strapi-provider-upload-google-cloud-storage#setup-auth

Answer 1

The issue already solved!

The way to solve that issue is

1. Cause the env is production mode, in Strapi v4, you should create everything files into config/env/production
2. Create file plugins.js, fill it like this.

const fs = require('fs');
require('dotenv').config();

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: 'strapi-provider-upload-google-cloud-storage',
      providerOptions: {
        serviceAccount: JSON.parse(fs.readFileSync(process.env.GCS_SERVICE_ACCOUNT)),
        bucketName: env('GCS_BUCKET_NAME'),
        basePath: env('GCS_BASE_PATH'),
        baseUrl: env('GCS_BASE_URL'),
        publicFiles: true,
        uniform: false,
        gzip: true,
      },
    },
  },
});

The key is publicFiles, because if value is false it doesn't create public url in Google Cloud Storage and we cannot get and see the image

3. Addition notes, don't forget to add security in order to get permission from GCS (Google Cloud Storage)

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::favicon',
  'strapi::public',
];