如何将WebPack DevServer配置为代理 /图像到外部图像提供商（存储）

发布于 2025-01-21 16:55:02 字数 431 浏览 2 评论 0原文

我需要我的webpack-dev-server能够代理我的外部提供商（云存储）的/images/*。jpg路径。

此：

<image src="/images/file.jpg" />

应该从：

<image src="https://firebasestorage.googleapis.com/v0/b/PROJECT_NAME.appspot.com/o/images%2Ffile.jpg?alt=media" />

obs：我也有/images文件夹内部的云储物库中的文件夹。

原文

I need my webpack-dev-server to be able to proxy the /images/*.jpg path to my external provider (Cloud Storage).

This:

<image src="/images/file.jpg" />

Should be served from:

<image src="https://firebasestorage.googleapis.com/v0/b/PROJECT_NAME.appspot.com/o/images%2Ffile.jpg?alt=media" />

Obs: I also have the /images folder inside of my Cloud Storage Bucket.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最近可好 2025-01-28 16:55:02

这是webpack配置，使我能够完成此操作：

devServer: {
    compress: true,
    hot: true,
    port: 80,
    historyApiFallback: true,
    allowedHosts: ['dev.mydomain.com'],

    // THIS IS THE IMPORTANT PART
    proxy: {
      '/images': {
        target: `https://firebasestorage.googleapis.com`,
        secure: true,
        changeOrigin: true,
        pathRewrite: (path,req) => {
          // path: '/images/fileName.jpg'
          const IMAGE_FILE = path.split('/').pop();
          const BUCKET_ROOT = `/v0/b/PROJECT_NAME.appspot.com/o`;
          return `${BUCKET_ROOT}/images%2F${IMAGE_FILE}?alt=media`
        },
      }
    },
  },

This is the webpack configuration that allowed me to accomplish this:

devServer: {
    compress: true,
    hot: true,
    port: 80,
    historyApiFallback: true,
    allowedHosts: ['dev.mydomain.com'],

    // THIS IS THE IMPORTANT PART
    proxy: {
      '/images': {
        target: `https://firebasestorage.googleapis.com`,
        secure: true,
        changeOrigin: true,
        pathRewrite: (path,req) => {
          // path: '/images/fileName.jpg'
          const IMAGE_FILE = path.split('/').pop();
          const BUCKET_ROOT = `/v0/b/PROJECT_NAME.appspot.com/o`;
          return `${BUCKET_ROOT}/images%2F${IMAGE_FILE}?alt=media`
        },
      }
    },
  },

回复收藏 0 原文

~没有更多了~