> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 如何托管 Gatsby 应用

> 了解如何在 Square Cloud 上部署你的 Gatsby 应用。

export const PortNote = ({lang}) => {
  if (lang == 'pt-br') {
    return <Note>
            <b>Qual porta devo usar para o meu servidor?</b><br />
            Você deve usar a porta <b>80</b> para o seu servidor. A porta 80 é a porta padrão para tráfego HTTP; a Square Cloud a encaminha para 443 (HTTPS) para estabelecer uma conexão segura.<br />
            Certifique-se de configurá-la antes de compactar e enviar seu projeto.
        </Note>;
  }
  return <Note>
            <b>What port should I use for my server?</b><br />
            You should use port <b>80</b> for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.<br />
            Make sure to configure it before compressing and uploading your project.
        </Note>;
};

export const RecommendedPlan = ({lang, plan, tier, cpu, appType}) => {
  const url = `https://squarecloud.app/${lang}/pay?plan=${plan.toLowerCase()}&tier=${tier}`;
  if (lang == 'en') {
    return <Note>
        <b>Wondering how much RAM and CPU your plan needs to host {appType}?</b><br />
        Don't worry, we're here to help.
        Our <a href={url}>{plan}</a> plan offers <b>{tier}GB</b> of RAM and <b>{cpu}vCPU</b>, which should be sufficient for most {appType}. 
        However, if you are working on a larger project and seeking extra stability, we recommend considering our <b>Pro</b> plan. With additional resources, you can maintain stability even during demand spikes. 
        To purchase, simply click <a href="https://squarecloud.app/en/pay?plan=pro">here</a>.
      </Note>;
  } else {
    return <Note>
          <b>Está se perguntando quanta RAM e CPU seu plano precisa para hospedar {appType}?</b><br />
          Não se preocupe, estamos aqui para ajudar.
          Nosso plano <a href={url}>{plan}</a> oferece <b>{tier}GB</b> de RAM e <b>{cpu}vCPU</b>, o que deve ser suficiente para a maioria dos {appType}.
          No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano <b>Pro</b>.
          Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda.
          Para comprar, basta clicar <a href={`https://squarecloud.app/${lang}/pay?plan=pro`}>aqui</a>.
        </Note>;
  }
};

export const appType_0 = "a Gatsby application"

## 简介

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

### 前置条件

* **Square Cloud 账户**：通过[注册页面](https://squarecloud.app/zh/signup)使用你的邮箱进行注册。
* **有效的付费套餐**：为你的应用提供专属资源和优化的性能。查看我们[可用的套餐](https://squarecloud.app/zh/pricing)，选择最适合你需求的方案。

<RecommendedPlan appType="Gatsby applications" plan="Standard" tier="4" cpu="4" lang="en" />

## 创建项目

开始之前，请确保你的系统上已安装 **Node.js (>=20)** 和 **npm**。
如果尚未安装，请从官方 [Node.js](https://nodejs.org/) 网站下载。\
使用官方初始化工具创建一个新的 Gatsby 项目：

```bash theme={null}
npm create gatsby@latest
```

按照提示选择起始模板和选项（TypeScript、Tailwind 等）。

### 安装依赖

创建完成后，进入项目目录并安装依赖：

```bash theme={null}
cd my-gatsby-site
npm install
```

### 开发项目

启动开发服务器：

```bash theme={null}
npm run develop
```

Gatsby 的开发服务器通常运行在 `http://localhost:8000`。

要生成一个简单的页面，添加 `src/pages/index.js`，内容如下：

```jsx theme={null}
import * as React from 'react'

export default function Index() {
  return <h1>Hello from Gatsby!</h1>
}
```

## 构建项目

在上传之前构建生产环境输出：

```bash theme={null}
npm run build
```

Gatsby 默认会在 `public/` 文件夹中生成静态输出。

## 选择生产服务器

要在生产环境中提供你的 Gatsby 应用，你需要使用一个服务器。你可以自己创建，也可以使用现有的服务器。

### SSR

对于发出服务端包的 SSR 构建，只需将主文件配置为 `server.js`

### Express 库

要在 Square Cloud 上部署你的静态项目，请确保服务器正确地提供静态文件。使用 Node.js 搭配 Express 时，一个常见的配置是：

```javascript server.js theme={null}
import express from 'express';
import path from 'path';

const app = express();
const distPath = path.join(import.meta.dirname, 'dist');

app.use(express.static(distPath));

// SPA fallback: serve index.html for any route not matched above
app.use((req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => console.log('Server running on port 80'));
```

<Note>请根据你的项目构建文件夹调整 `dist` 路径参数。如果它位于 `build` 或 `dist` 内的某个文件夹中，请改用相应的路径。</Note>

### Serve 库

#### 安装 Serve 库

要安装 `serve` 库，请在终端中进入你的项目目录并运行以下命令：

```bash theme={null}
npm install serve@14.2.3
```

此命令会安装 `14.2.3` 版本的 `serve` 库。如果你想安装最新版本，可以省略 `@14.2.3`。

#### 配置启动脚本

安装 `serve` 库之后，你需要配置项目的启动脚本以使用 `serve`。为此，打开项目的 `package.json` 文件并添加一个名为 `start:prod` 的新脚本：

```json theme={null}
"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}
```

在 `start:prod` 脚本中，`serve -s build -l 80` 的作用如下：

* `serve`：这是启动 `serve` 服务器的命令。
* `-s dist`：`-s` 选项以单页应用模式提供 `dist` 目录。这意味着所有未找到的请求都会被重定向到 `index.html`。`dist` 目录通常在你运行 `npm run build` 时创建。
* `-l 80`：`-l` 选项后跟 `80`，告诉 `serve` 监听 80 端口。80 端口是 HTTP 流量的默认端口。

<Note>请将 `dist` 参数调整为你的项目构建文件夹。如果它位于 `build` 或 `dist` 内的某个文件夹中，请改用该路径。</Note>

## 部署

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

<PortNote lang="en" />

### 通过控制面板

<Steps>
  <Step title="访问上传页面">
    访问[上传页面](https://squarecloud.app/zh/dashboard/new)并上传你的项目 zip 文件。
  </Step>

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

  <Step title="部署你的项目">
    最后，点击 "Deploy" 按钮，即可将项目托管到 Square Cloud。\
    部署完成后，你可以在控制面板中监控项目的状态和日志。

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="正在上传应用到 Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### 通过 CLI

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

<Card title="了解更多：如何为 Square Cloud 创建配置文件。" icon="link" href="/zh/getting-started/config-file">
  squarecloud.app 文件是一个配置文件，用于配置你的应用；它将用于定义你的环境。
</Card>

<Steps>
  <Step title="安装 CLI">
    首先，你的环境中需要已安装 CLI。如果尚未安装，请在终端中运行以下命令：

    ```
    npm install -g @squarecloud/cli
    ```

    如果你已经安装，我们建议对其进行更新。为此，请在终端中运行以下命令：

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux、macOS 和 WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="进行身份验证">
    现在，要进行身份验证并使用其他 CLI 命令，你可以在[此处](https://squarecloud.app/zh/account/security)点击 "Request API Key" 找到你的授权密钥。获取授权密钥后，运行以下命令：

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="上传你的项目">
    最后，要使用 CLI 将应用部署到 Square Cloud，你需要运行以下命令：

    ```bash theme={null}
    squarecloud upload 
    ```

    或者，如果你手动创建了 zip 文件，可以使用：

    ```bash theme={null}
    squarecloud upload --file <path/to/zip> 
    ```
  </Step>
</Steps>

## 更多资源

有关 Gatsby 的更多信息，请访问官方文档[这里](https://www.gatsbyjs.com/docs/)。

## 故障排除

<CardGroup cols={1}>
  ### 自定义域名

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

  ### 最低内存要求

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

  ### 找不到此站点。

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

  ### 站点响应超时……

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

## 联系我们

如果你仍然遇到**技术问题**，我们的**专业支持团队**可以为你提供帮助。[**联系我们**](https://squarecloud.app/zh/support)，我们很乐意协助你解决任何问题。