在 Hostinger 上部署您的 NextJS 项目

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

有时，您可能需要在预算有限的情况下部署前端应用程序或概念验证 (POC)，例如营销页面。在这种情况下，使用个人主机可能是一个切实可行的解决方案。本文将介绍如何自动将前端部署到 Hostinger 子域名或子页面。

操作步骤：

要求

Hostinger主机服务
Git
GitLab/GitHub 或其他能够创建流水线和添加密钥的工具

一个简单的应用程序（可选）

你可以创建一个新的前端应用程序进行测试，也可以使用现有的应用程序。本文中，我们将构建一个 NextJS 应用程序。



npx create-next-app@latest

这是我们的默认应用程序：

配置“next.config.mjs”

要将静态文件输出到文件夹，请修改“next.config.mjs”文件，添加以下内容output：basePath，，和assetPrefix：



/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  basePath: process.env.BASE_PATH ? process.env.BASE_PATH : "",
  assetPrefix: process.env.URL ? process.env.URL : undefined,
};

export default nextConfig;

配置完成后，执行该操作npx next build将正确创建包含所有链接和 CSS 文件的“out”目录。

对于由管理的图像next/image，请根据需要更新图像路径。

Hostinger步骤

在您的 Hostinger 帐户中创建子域名或特定文件夹。

考虑设置一个仅限于该目录的新 FTP 帐户，以遵守最小权限原则 (POLP)。

GitLab 步骤

虽然还有其他部署方案可用，但本教程重点介绍如何使用 GitLab。首先，请确保您的项目已部署在 GitLab 上，并在 CI/CD 设置中添加您的 Hostinger FTP 客户端密钥：

https://gitlab.com/[GROUP_OR_NAMESPACE]/[PROJECT]/-/settings/ci_cd

[project]_base_path替换链接的 base_path，但我们需要在图片中手动更新。
[project]_ftp_host例如 ftp.1234.com
[project]_ftp_password
[project]_ftp_user
[project]_url这是您的资源 URL（https://…），可以是您自己的网站地址或 CDN 地址。

将环境定义为prd，但您可以根据需要创建各种环境变量。

请将以下内容替换[project]为您的项目名称：



image: node:21.4.0-alpine

cache:
  paths:
    - node_modules/

before_script:
  - apk add lftp
  - npm install

upload:
  environment: prd
  stage: deploy
  script:
    - echo "Preparing FTP... $[project]_ftp_host $[project]_ftp_user $[project]_ftp_password"
    - URL=$[project]_url BASE_PATH=$[project]_base_path npx next build
    - lftp -c "set verify-certificate/$[project]_ftp_host no; set ftp:ssl-allow on; open -u $[project]_ftp_user,$[project]_ftp_password ftp://$[project]_ftp_host; mirror -Rev out/ ./ --ignore-time --parallel=10"

  only:
    - master
    - main