将您的 Next.js 应用部署到 Forge

Next.js 是由 Vercel 开发的 React 框架。它包含服务器端渲染和静态网站生成等功能。今天我们将解释如何使用 Laravel Forge 部署您的 Next.js 应用程序。

如果您正在使用自己的 Forge 服务器，请确保服务器是“App”或“Web”服务器，以便安装 Nginx。

在这篇文章中，我们将解释如何使用 Next.js 服务器端渲染功能部署您的网站。

创建 Nginx 模板

要使用服务器端渲染，我们首先需要在 Forge 中创建一个新的 Nginx 模板。我们在这里使用 Nginx 模板，这样我们就不需要在以后修改网站的 Nginx 配置。

我们将创建一个名为“Next.js App”的新模板，然后更新模板的内容

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{{ SITE }}/before/*;

server {
    listen {{ PORT }};
    listen {{ PORT_V6 }};
    server_name {{ DOMAINS }};
    server_tokens off;
    root {{ PATH }};

    # FORGE SSL (DO NOT REMOVE!)
    # ssl_certificate;
    # ssl_certificate_key;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm;

    charset utf-8;

    # FORGE CONFIG (DO NOT REMOVE!)
    include forge-conf/{{ SITE }}/server/*;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/{{ SITE }}-error.log error;

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{{ SITE }}/after/*;

您可能会注意到 location / 块正在使用 proxy_pass。Next 中的服务器端渲染类似于 PHP，服务器保持一个正在运行的进程，该进程生成内容并将其提供给客户端。使用 Next.js，我们使用 Node，因此我们将通过端口 3000 将我们的请求传递给 Next.js 服务器。您可以根据项目的需要更改此设置。

创建网站

创建 Nginx 模板后，我们现在可以创建我们的网站，确保我们选择“Next.js App”Nginx 模板选项

Creating a new site

Forge 创建网站后，我们可以从我们选择的 Git 提供商安装我们的存储库。

部署脚本

下一步是更新网站的部署脚本

cd /home/forge/next-app-static.curved-feather.test
git pull origin $FORGE_SITE_BRANCH

npm install

我们现在可以使用更新的脚本部署我们的网站，以便安装我们的 NPM 依赖项。

如果我们现在浏览到我们的网站，Nginx 会给我们一个 502 错误。这是因为我们还没有启动 Next.js 服务器。为此，我们将在服务器上创建一个新的守护进程。对于守护进程，我们只需要提供网站的目录和命令；npm run start。

Creating a Daemon

守护进程配置并激活后，我们可以访问我们的网站，并看到它现在正在运行。