跳转到主要内容

​
简介

要在 Square Cloud 上开发和托管 ，遵循一套结构化的配置和前置条件流程至关重要。本技术指南将涵盖整个过程，从初始设置到生产环境部署。

​
前置条件

  • Square Cloud 账户：通过注册页面使用你的邮箱进行注册。
  • 有效的付费套餐：为你的应用提供专属资源和优化的性能。查看我们可用的套餐，选择最适合你需求的方案。

​
创建项目

开始之前，请确保你的系统上已安装 Node.js 和 npm。如果尚未安装，你可以从 Node.js 官方网站下载。 要创建一个新的 Next.js 项目，请运行以下命令： 
npx create-next-app@latest my-app
在此命令中，my-app 是你新项目的名称。你可以将 my-app 替换为你想要的任何项目名称。npx 命令是随 npm（Node.js 包管理器）一起提供的工具。它用于运行安装在项目本地或在 npm 注册表上远程可用的 Node.js 包。 create-next-app 是 npm 注册表上提供的一个包，它会自动搭建一个新的 Next.js 项目。它负责所有初始设置，例如创建项目目录、安装必要的依赖以及配置基础文件。 @latest 是一个标签，用于指定你想使用最新版本的 create-next-app 包。这可确保你始终使用最新版本，从而能够访问最新的功能。

​
配置 80 端口

80 端口是 HTTP 流量的默认端口。要在 Square Cloud 上托管 Next.js 网站，配置使用 80 端口至关重要。在 Next.js 中，你可以在启动脚本里设置 -p 80 参数，以确保你的网站在该端口上正确运行。
package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}

​
构建项目

在上传之前构建生产环境输出： 
npm run build
这会为生产环境生成 next 包，即生成 .next 文件夹。

​
部署

准备好项目文件后，你现在可以将它们上传到 Square Cloud 来托管你的项目。 为此，请创建一个包含所有项目文件的 ZIP 文件。
请确保不要包含 .next 中的 cache 文件夹。

​
通过控制面板

1

访问上传页面

访问上传页面并上传你的项目 zip 文件。
2

配置你的环境

上传 zip 后，你需要为项目配置名称、主文件或运行时环境以及其他设置。
如果你上传的是 Web 项目，请务必选择 “Web Publication” 并为项目设置子域名。
3

部署你的项目

最后，点击 “Deploy” 按钮，即可将项目托管到 Square Cloud。
部署完成后，你可以在控制面板中监控项目的状态和日志。
正在上传应用到 Square Cloud

​
通过 CLI

要使用此方法，你需要在项目根目录中创建一个名为 squarecloud.app 的配置文件。该文件将包含项目所需的配置。

了解更多：如何为 Square Cloud 创建配置文件。

squarecloud.app 文件是一个配置文件，用于配置你的应用；它将用于定义你的环境。
1

安装 CLI

首先，你的环境中需要已安装 CLI。如果尚未安装，请在终端中运行以下命令：
npm install -g @squarecloud/cli
如果你已经安装，我们建议对其进行更新。为此，请在终端中运行以下命令：
squarecloud update
2

进行身份验证

现在，要进行身份验证并使用其他 CLI 命令，你可以在此处点击 “Request API Key” 找到你的授权密钥。获取授权密钥后，运行以下命令：
squarecloud auth login
3

上传你的项目

最后，要使用 CLI 将应用部署到 Square Cloud，你需要运行以下命令：
squarecloud upload
或者，如果你手动创建了 zip 文件，可以使用：
squarecloud upload --file <path/to/zip>

​
更多资源

有关 Next.js 及其工具的更多信息，请访问 Next.js 官方文档。 在那里，你将找到详细的指南、教程和 API 文档，帮助你充分利用 Next.js。

​
CI/CD

我们提供了一个 GitHub Action，可以让更新你的项目更加轻松。你可以在这里了解更多
你可以创建一个像这样的工作流： 
name: "Deploy Nextjs app"
on:
  push:
    tags:
      - "v*"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm install

      - name: Build website
        run: npm run build && chmod -R 777 .next next.config.ts package.json

      - name: Add website to zip
        run: zip -r project.zip package.json .next next.config.ts public -x ".next/cache/*"

      - name: Deploy on Square Cloud
        uses: squarecloudofc/github-action@v2
        with:
          command: commit --file project.zip ${{ secrets.SQUARECLOUD_APP_ID }} 
          token: '${{ secrets.SQUARE_CLOUD_TOKEN }}'

​
故障排除

​
自定义域名

若要使用自定义域名（例如 mysite.com）来代替默认 URL mysite.squareweb.app，你需要 Standard 计划或更高等级。子域名由配置文件中的 SUBDOMAIN 字段定义。

​
最低内存要求

简单网站/API 的最低要求为 512MB RAM。对于使用框架的站点（Next.JS、React、Vue、Angular 等），我们始终建议至少 1GB RAM。对于更大型的应用，请分配更多 RAM，以防止应用内存耗尽而崩溃。

​
找不到此站点。

请检查子域名/域名是否与 SUBDOMAIN 字段或自定义域名设置中配置的内容一致。如果你刚上传站点，请等待最多 60 秒，让 Square 启用首次访问。

​
站点响应超时……

请检查你是否在应用中正确配置了端口 80 和主机 0.0.0.0。我们建议使用 Square 强制注入的环境变量：来自 .env 文件的 PORT 和 HOST。

​
联系我们

如果你仍然遇到技术问题，我们的专业支持团队可以为你提供帮助。联系我们，我们很乐意协助你解决任何问题。