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

标签 reactjs azure-web-app-service next.js azure-pipelines server-side-rendering

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

我使用了 this resource设置管道,我没有遇到错误,但 URL 仍然没有加载应用程序。

最佳答案

正如@James 在 Doris's answer 中的评论中提到的那样,在 Next.js 应用程序中使用自定义 server.js 会使其在生产中变慢,因为路由不是预先构建的。 Using next build followed by next start would solve this issue .但是为了让你能够做到这一点,你不应该有一个 server.js

根据 Microsoft documentation对于在 Azure Linux Web 应用程序上部署 Node JS/Next JS 应用程序,推荐的方法是使用 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及其相关问题。

其他有用的资源:

关于reactjs - 如何在 Azure 上部署 NextJs SSR React 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65974105/

相关文章:

javascript - React-Native:访问父组件内的子组件功能

reactjs - 如何根据特定需求重写 webpack 加载器?

适用于 Azure 网站的 Azure CDN

azure - 如何查看Azure Web App的Http请求队列

express - 使用 Vercel 作为前端,使用 Heroku 作为 api

reactjs - React Typescript onSubmit 类型

javascript - React-native如何在文本输入上向上移动屏幕

azure - 将 Azure WebApp 从 S3 扩展到 Premium V2

reactjs - Material-UI:如何解决 "Warning: Prop ` id` 不匹配”

javascript - 在应用程序完全加载后,如何将 Google 跟踪代码管理器加载到 next.js 应用程序?