关于我 归档
RSS

如何在 Plesk 上部署 Next.js 项目

后端

Plesk 支持 node.js 项目，但它需要 entry.js 文件才能启动。这不是我们启动 next.js 项目的方式，因此这里有一些细微的调整，以便在 plesk 上运行 next.js 项目。

项目初始化

通常我们使用 Git 来提取我们的项目，我假设您已经知道如何将项目文件下载到您的 plesk vhost。

如果尚未安装 Node.js，请单击安装应用程序进行安装。

Project Initialization

Node.js 设置

Node.js Configuration

  1. Node.js 版本，我选择的是 16.20
  2. 包管理器，npm 或 yarn 都可以
  3. 文档根目录，这是 node.js 读取编译后的静态文件的地方，如果你的构建目标方向没有配置，那么它将是 /DOMAIN_NAME/.next/static，选择它进行设置。
  4. 应用模式，默认为 production
  5. 应用 URL，无法修改，但我们不需要修改它
  6. 应用根目录，选择你的 next.js 项目所在的目录
  7. 应用启动文件，默认是 app.js，但我们目前还没有，我们稍后会创建一个。
  8. 自定义环境变量，如果需要，请指定它们

添加我们的 app.js 文件用于启动

我们可以在将提交推送到远程之前执行此操作。

  1. 安装express

    1
    npm install express -D

  2. 在项目根目录中添加一个app.js文件。

    app.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    const express = require("express");
    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(() => {
      const server = express();

      server.all("*", (req, res) => {
        return handle(req, res);
      });

      server.listen(port, (err) => {
        if (err) throw err;
        console.log(`> Ready on http://localhost:${port}`);
      });
    });

  3. 然后我们将更改推送到远程并在我们的 plesk vhost 上同步它们。

  4. 单击 npm install 使用 Plesk Node.js 控制面板安装依赖项。

  5. 单击 运行脚本 运行 build 命令来编译 dist 文件。

  6. 单击 重新启动应用程序 按钮并刷新页面，我们将看到它现在正在运行。

Next.js is Already Running

是什么发挥了作用以及我们为什么需要它？

当我们运行 Next.js 启动命令 npm run start 时，我们的 Next.js 服务在端口 3000 上运行，但对于 plesk，我们不能不配置代理来让我们的域访问传递到端口 3000。因此，这个 express 完成了这项工作，接管了此域上的所有请求并将它们交给 Next.js 处理程序。检查我们的 app.js 中的登录名，它非常简单易懂。

通常对于自营主机，我们通过 NGINX 创建 反向代理，将网站请求传递到我们的 Next.js 服务（在端口 3000 上监听）。代理配置可能如下所示：

反向代理 proxy_pass
1
2
3
4
5
6
location / {
  proxy_pass http://localhost:3000;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Forward Proxy vs Reverse Proxy

图片来源: https://www.youtube.com/watch?app=desktop&v=4NB0NDtOwIQ

一切就绪，希望对您有所帮助:)

#JavaScript #Virtual Hosting #Plesk