如何在 cpanel 上部署 nextjs 应用程序?

IT技术 reactjs .htaccess deployment cpanel next.js
2021-04-26 08:24:48

我按照这些步骤在 cPanel 上部署了我的 nextjs。

  1. 转到 package.json 并添加以下行: "homepage": "http://afsanefadaei.ir"

  2. 运行next build以将.next文件夹作为我的构建文件夹

  3. 转到cpanel >> file manager >> public_html文件夹并将文件夹的内容上传.next到此目录

  4. 添加或编辑此文件:.htaccess到:

    在此处输入图片说明

但是当我访问该网站时,我遇到了以下情况:

在此处输入图片说明

你知道这有什么问题吗?

4个回答

我上传out(它被生成做npm run build && npm run export)文件夹public_html并创建了.htaccess文件,如

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-L
  RewriteRule . /index.html [L]

</IfModule>

它对我有用😁

问题:当我在一些不同的路线上刷新页面时,比如说/about,它带来了index.js页面内容,但 URL 不会更改为/

  1. .next没有 index.html 文件。
  2. 似乎您有服务器端(主要使用 nodejs),但不幸的是您无法从 cpanel 运行该服务器端。
  3. 据我所知,如果您倾向于只有前端next exportnext build应该使用而不是

但最重要的是数字 1,请确保您index.html.next文件夹中有。

将其部署为 NodeJS 应用程序。

我可以使用上述答案之一托管应用程序,但是当我刷新页面时,应用程序将崩溃或转到初始路由。

这就是我解决这个问题的方法(解决方案取自 next.js 官方网站)。

  1. 使用 next.js 应用程序的生产构建 npm run build
  2. app.js在根文件夹创建启动文件,复制以下代码

const {
  createServer
} = require("http");
const {
  parse
} = require("url");
const next = require("next");

const port = process.env.PORT || 3000;

// Create the Express-Next App
const app = next({
  dev:false
});
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url, true);
      const {
        pathname,
        query
      } = parsedUrl;
      handle(req, res, parsedUrl);
      console.log("pathname", pathname);
    }).listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

  1. 在 cPanel 上创建一个 Node.js 应用程序并添加应用程序启动文件名 在此处输入图片说明

  2. 并启动应用程序。你完成了!

有关更多信息,请查看 Next.js自定义服务器的官方文档