本地开发，使用生产环境中的图片

在本地开发网站意味着将使网站运行的文件存储在您的计算机上。这些文件通常保存在版本控制库中。您可以在本地进行开发，并在准备好后将更改推送到库中。其他人员也可以进行开发，并将他们的更改拉取到本地。

版本控制库中可能不会包含来自 CMS 的图片文件。WordPress 就是一个典型的例子。当您在 WordPress 中上传图片时，它会进行一系列操作。它会将图片上传到 `uploads` 文件夹，创建多个版本，甚至更新数据库，并添加附件元数据。但是，它不会进行版本控制提交，也不会包含所有这些文件。

您可以通过多种方式确保拥有这些文件。您可以编写脚本将它们拉取下来，或者定期手动 FTP。在 WordPress 领域，有一些插件可以提供帮助，例如 WP DB Migrate Pro，它不仅可以迁移数据库，还可以迁移图片。

但您可能并不想处理图片。也许

您不想将图片放在版本控制库中。也许版本控制库只是一个主题文件夹，最好保持现状。
您有大约 10 GB 的图片，移动它们既不切实际也不必要。

我认为这完全合理。一个类似出版物的网站可能不需要将他们上传过的所有图片都包含在他们的主要版本控制库中。

好了，解释就到这里。您应该理解了。

Sean Lange 在 2013 年的文章本地开发时使用远程图片文件中提到了这个问题。他的解决方案是在 Web 服务器级别重写本地 URL 以指向生产文件。

我在 Apache URL 重写规则中找到了答案。当 Apache 程序处理传入的网页请求时，重写规则允许它更改与特定模式匹配的 URL - 例如，它们可以将对您本地机器上“files”目录的请求转换为对生产服务器上远程 URL 的请求。

这是他的 Apache 重写规则

RewriteEngine on
# Force image styles that have local files that exist to be generated.
RewriteCond %{REQUEST_URI} ^/sites/([^\/]*)/files/styles/[^\/]*/public/((.*))$
RewriteCond %{DOCUMENT_ROOT}/sites/%1/files/%2 -f
RewriteRule ^(.*)$ $1 [QSA,L]
# Otherwise, send anything else that's in the files directory to the production server.
RewriteCond %{REQUEST_URI} ^/sites/[^\/]*/files/.*$
RewriteCond %{REQUEST_URI} !^/sites/[^\/]*/files/css/.*$
RewriteCond %{REQUEST_URI} !^/sites/[^\/]*/files/js/.*$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://www.example.com/$1 [QSA,L]

他正在通过 MAMP 使用 Drupal，但只要您在本地使用 Apache，这都是同一个想法的变体。匹配指向您要定位的资源的 URL，并将它们重写到实时站点。

他能够将这些规则粘贴到 MAMP 中处理它的一个小方框中。我在通过一个小型的 Docker 设置在本地运行 WordPress，因此我直接编辑了我的 `.htaccess` 文件，并为我的需求简化了一些内容。

RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/.*$
RewriteRule ^(.*)$ https://css-tricks.org.cn/$1 [QSA,L]

对我来说效果很好！这里有一个视觉解释

Henry

# 2016年12月29日

我一直想用这种方法，或者类似的方法。总是切换资源来回真的很麻烦，浪费了很多时间。我会继续关注这个。

Michael

# 2016年12月29日

这太棒了。我刚开始对 WordPress 网站进行重新设计，现在我可以跳过将 6 GB 的图片复制到本地机器的步骤。

非常感谢。

Jeff Geerling

# 2016年12月29日

对于 Drupal，还有一个模块比添加重写规则简单得多（并且它可以在更多情况下使用）：https://www.drupal.org/project/stage_file_proxy

如果您有多个环境（不仅仅是本地和生产环境），它也易于配置。

Chuck Reynolds

# 2016年12月29日

对于 NGINX，我使用的是这个

https://gist.github.com/chuckreynolds/35bcec4323d314a7fff5a1d3fcd357bd

Amrit

# 2016年12月29日

几年前我遇到了同样的问题，并创建了这个小巧的 Chrome 插件。它适用于所有类型的 Web 服务器！

https://github.com/amritb/LocalAssets

Geoff Denslow

# 2016年12月29日

感谢 Chris。它在我的 ServerPress 上本地使用 WordPress 时对我来说不起作用，但我从 http://rzen.net/serve-missing-media-production-apache-nginx/ 找到了以下代码，它起作用了。

RewriteCond %{REQUEST_FILENAME} !-f [NC]
RewriteRule ^(.*.(js|css|png|jpe?g|gif|ico|svg)) http://server.com/$1 [NC,P,L]

Sebastian Andil

评论永久链接# 2017年1月3日

我这里也是一样！感谢 Chris 提供的链接，Chris 的代码对我来说也不起作用，我很想知道为什么 :-/ 我搜索了整个互联网，但没有找到解决方案……
Kailey

评论永久链接# 2017年1月4日
在某些情况下，您需要添加一个解析器才能使 proxy_pass 工作，例如
```
location @image_fallback {
    resolver 8.8.8.8;
    proxy_pass http://{PROD};
}
```

Daryn St. Pierre

# 2016年12月29日

我的同事创建了一个 WordPress 插件，它可以在本地工作时自动处理图片 - https://wordpress.org/plugins/coral-remote-images/

Chris

评论永久链接# 2016年12月29日

感谢 Daryn 的推荐！

我上面的插件允许您不必更改数据库中的任何内容。我们构建的大多数网站只是通过 wp-config.php（WP_SITEURL 和 WP_HOME）覆盖 URL……插件假设这一点，并进行一些推断，并且只有在 URL 与数据库中的内容不匹配时才适用。您也可以使用常量覆盖它。

不确定它如何处理多站点。下一步！

Ben Dunkle

# 2016年12月30日

在本地环境中工作时，为什么不直接编辑您的 hosts 文件，将您的域名指向 localhost？然后路径永远不会改变。

Norbert Papp

评论永久链接# 2017年1月18日

是的，我也使用这种方法，但是如果您在 hosts 文件中的域名与生产域名相同，则无法分离 uploads 文件夹。另一个问题是，当您分离 uploads 文件夹时，将无法上传任何新文件。

Oliver

# 2017年1月2日

您在本地开发时处于离线状态怎么办？（例如，旅行时）

Chris Coyier

评论永久链接# 2017年1月2日

这是一个有趣的情况，值得寻找解决方案。也许您可以设置一些东西来阻止这些请求，这样它们就不会一直处于旋转/失败状态。也许您可以启动一个本地服务器，它可以接收任何图片请求并返回占位符图形，并将请求重新路由到该服务器。

Chris Coyier

# 2020年11月6日

Jonas Merhej 写信说

这是一种更好地使用简化的 .htaccess 解决方案的方法，适用于 WP。

# Get remote images
# If requested resource exists as a file or directory go to it
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule (.*) - [L]

# Else rewrite requests for non-existent resources to remote URL
RewriteCond %{REQUEST_URI} ^/wp-content/[^\/]*/.*$
RewriteRule ^(.*)$ https://www.example.com/$1 [QSA,L]

Markus

# 2017年1月2日

您可以简单地使用浏览器扩展，例如 https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii?hl=en 来指向您的生产图片。我经常使用它来测试生产内容。

goose

# 2017年1月3日

如果这包含 IIS 项目的 web.config 版本会很有用。

Matthew McVickar

# 2017年1月25日

有两个因素可能会阻止这生效

这个重写块需要放在 # BEGIN WordPress 块之前。
对于上传目录未按年份/月份文件夹组织的网站，正则表达式需要在第二个 / 之后添加一个 ?。

所以它应该是

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/?.*$
RewriteRule ^(.*)$ https://css-tricks.org.cn/$1 [QSA,L]
</IfModule>

此评论线程已关闭。如果您有重要信息要分享，请联系我们。