如何在Azure上部署NextJs SSR React应用程序

dfty9e19  于 2022-12-03  发布在  React
关注(0)|答案(2)|浏览(151)

我一直在尝试部署我在Azure上使用NextJS构建的服务器端呈现React应用。我成功设置了Azure管道并发布,但在运行该应用后,当我转到Azure网站URL时,该应用似乎无法加载。构建文件内容与客户端呈现的应用不同。请分享有关部署SSR React应用(在Azure上)的资源或说明。
我使用this resource设置管道,没有遇到错误,但URL仍然没有加载应用程序。

hjqgdpho

hjqgdpho1#

正如@James在Doris回答的评论中提到的,在Next.js应用中使用自定义server.js会使其在生产中变慢,因为路由不是预先构建的.Using next build followed by next start would solve this issue。但要做到这一点,你不应该有server.js
根据在Azure Linux Web应用上部署Node JS / Next JS应用的Microsoft文档,建议使用PM2而不是npm start (or) node server.js
因此,您可以使用don't need server.js or web.config。您所需要做的就是创建一个名为ecosystem.config.js的文件,其中包含以下内容

module.exports = {
  apps: [
    {
      name: "my-nextJs-site",
      script: "./node_modules/next/dist/bin/next",
      args: "start -p " + (process.env.PORT || 3000),
      watch: false,
      autorestart: true,
    },
  ],
};

并将Azure应用程序的启动命令设置为

pm2 --no-daemon start /home/site/wwwroot/ecosystem.config.js

package.json脚本中没有任何更改

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",

Azure Windows应用程序服务
pm2在Azure Windows服务中不可用-it uses IIS Server。请查看following answer及其链接的问题。
其他有用资源:

2q5ifsrm

2q5ifsrm2#

你需要两个文件:* * server.jsweb.config**,并修改package.json如下。我已经回答了一个关于部署nextjs应用程序的问题,你可以看看这个。

    • 包. json已修改。**
"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js"
    • server. js**(使用下面的代码创建此文件:)
const { createServer } = require('http')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = new URL(req.url, 'http://w.w')
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).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="public{REQUEST_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>

相关问题