NextJs App 在 Azure Web App 中部署时未在 nextjs 公用文件夹中加载图像

Posted 2023-03-30

【中文标题】NextJs App 在 Azure Web App 中部署时未在 nextjs 公用文件夹中加载图像

【英文标题】：NextJs App is not loading image in nextjs public folder when deployed in Azure Web App

【发布时间】：2021-10-29 17:17:51

【问题描述】：

如果在本地运行 next build + next start，像 png 这样的图像会成功显示在应用程序上，但在通过 server.js 和 web.config 将其部署到 Azure Web App 后，图像不再加载。

我的图片在public/imgs/logo.png 下 我这样引用它： <Image src='/imgs/logo.png' height='20px' width='180px' />

我什至尝试在构建完所有内容并且仍然加载图像后直接运行server.js(node server.js)。但是，一旦我在 Azure Web App 中上传了构建文件（.next 文件夹）、web.config 和 server.js，图像就不再加载了。

请帮忙。以下是我用来设置的一些文件。

server.js

const  createServer  = require("http");
// const express = require('express') (Only if you app uses express)
const next = require("next");

const port = process.env.PORT || 8888;
const isDev = process.env.ENV !== "production";
const app = next( isDev );
const handle = app.getRequestHandler();

app.prepare().then(() => 
  createServer((req, res) => 
    handle(req, res);
  ).listen(port, (err) => 
    if (err) throw err;
    console.log(`Ready on http://localhost:$port`);
  );
);

web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     <https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config>
-->

<configuration>
  <system.webServer>
    <!-- Visit <http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx> for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\\/debug[\\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="publicREQUEST_URI"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="REQUEST_FILENAME" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See <https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config> for a full list of options
    -->
    <iisnode watchedFiles="web.config;*.js"/>
  </system.webServer>
</configuration>

next.config.js

const path = require("path");
require("dotenv").config();
const withImages = require("next-images");

module.exports = withImages(
  reactStrictMode: true,
  eslint: 
    dirs: ["apiclients", "common", "components", "config", "pages", "stores"],
  ,
  sassOptions: 
    includePaths: [
      path.join(__dirname, "styles"),
      path.join(__dirname, "components"),
    ],
    prependData: `@import "styles/_variables";`, // prepend _css variables in all css documents
  ,
  webpack: (config,  buildId, dev, isServer, defaultLoaders, webpack ) => 
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    return config;
  ,
  experiments: 
    asset: true,
  ,
);

【问题讨论】：

您还应该将“公共”目录复制到 Azure。你抄了吗？

这解决了我的问题！ :D 所以基本上我正在做的是，我不想在 Azure Web App Service 中部署我的整个源代码。我只是选择要部署的文件夹。即：node_modules、.next 文件夹、server.js 和 web.config。唯一缺少的是公用文件夹。非常感谢@MoorthyG！ :)

【参考方案1】：

(next/image) 组件依赖于运行的 Next Server。如果您将它导出为由其他服务托管的任何类型的静态配置，它会严重失败（除非您执行一些自定义编码来处理图像）。在我的情况下，我创建了一个从 /_next/assets/ 文件夹重定向图像的 php 程序，但您还应该测试的是，将其中一个 然后替换所有标签，但您会失去一些优势，例如延迟加载等。