如何将Gatsby应用程序部署到DigitalOcean应用程序平台

来自菜鸟教程
跳转至：导航、​搜索

作为 Write for DOnations 计划的一部分，作者选择了 /dev/color 来接受捐赠。

介绍

在本教程中，您将部署一个 Gatsby 应用程序到 DigitalOcean 的 App Platform。 App Platform 是一个 平台即服务 ，它可以自动构建、部署和管理应用程序。 当与像 Gatsby 这样的 静态站点生成器 的速度相结合时，这提供了一个不需要服务器端编程的可扩展 JAMStack 解决方案。

在本教程中，您将在本地机器上创建一个示例 Gatsby 应用程序，将您的代码推送到 GitHub，然后部署到 App Platform。

先决条件

第 1 步——创建 Gatsby 项目

在本节中，您将创建一个示例 Gatsby 应用程序，稍后将其部署到 App Platform。

首先，从 GitHub 克隆默认的 Gatsby 启动器。 您可以在终端中使用以下命令执行此操作： 

git clone https://github.com/gatsbyjs/gatsby-starter-default

Gatsby 入门站点为您提供了开始编写应用程序所需的样板代码。 有关创建 Gatsby 应用程序的更多信息，请查看 如何设置您的第一个 Gatsby 网站 。

完成克隆 repo 后，将 cd 放入 gatsby-starter-default 目录： 

cd gatsby-starter-default

然后安装 Node 依赖项： 

npm install

下载应用程序并安装依赖项后，在文本编辑器中打开以下文件： 

nano gatsby-config.js

您刚刚打开了 Gatsby 的配置文件 。 您可以在此处更改有关您网站的元数据。

转到 title 键并将 Gatsby Default Starter 更改为 Save the Whales，如以下突出显示的行所示：

gatsby-starter-default/gatsby-config.js 

module.exports = {
  siteMetadata: {
    title: `Save the Whales`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

关闭并保存文件。 现在在您喜欢的文本编辑器中打开索引文件： 

nano src/pages/index.js

要继续“拯救鲸鱼”主题，请将 Hi people 替换为 Adopt a whale today，将 Welcome to your new Gatsby site. 更改为 Whales are our friends.，并删除最后的 [X135X ] 标签：

gatsby-starter-default/src/pages/index.js 

import React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Adopt a whale today</h1>
    <p>Whales are our friends.</p>
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["AUTO", "WEBP", "AVIF"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

保存并关闭文件。 您将用鲸鱼的 GIF 替换 Gatsby 宇航员图像。 在添加 GIF 之前，您首先需要创建一个 GIF 目录并下载它。

进入src目录，创建gifs文件： 

cd src/
mkdir gifs

现在导航到您新创建的 gifs 文件夹： 

cd gifs

从 Giphy 下载 a 鲸鱼 GIF： 

wget https://media.giphy.com/media/lqdJsUDvJnHBgM82HB/giphy.gif

Wget 是一个允许您从 Internet 下载文件的实用程序。 Giphy 是一个托管 GIF 的网站。

接下来，将名称从 giphy.gif 更改为 whales.gif： 

mv giphy.gif whales.gif

更改 GIF 的名称后，回到项目的根文件夹并再次打开索引文件： 

cd ../..
nano src/pages/index.js

现在您将把 GIF 添加到您网站的主页。 删除 StaticImage 导入和元素，然后替换为以下突出显示的行：

gatsby-starter-default/src/pages/index.js 

import React from "react"
import { Link } from "gatsby"

import whaleGIF from "../gifs/whales.gif"
import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Adopt a whale today</h1>
    <p>Whales are our friends.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <img src={whaleGIF} alt="Picture of Whale from BBC America" />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>

在这里，您导入了鲸鱼 GIF 并将其包含在 <div> 元素之间的图像标签中。 alt 标签告知读者 GIF 的来源。

关闭并保存索引文件。

现在，您将在本地运行您的网站以确保其正常工作。 从项目的根目录运行开发服务器： 

gatsby develop

在您的站点完成构建后，将 localhost:8000 放入浏览器的搜索栏中。 您将在浏览器中找到以下呈现的内容：

在本节中，您创建了一个示例 Gatsby 应用程序。 在下一节中，您将把代码推送到 GitHub，以便 App Platform 可以访问它。

第 2 步 — 将代码推送到 GitHub

在本教程的这一部分中，您将提交代码到 git 并将其推送到 GitHub。 从那里，DigitalOcean 的应用平台将能够访问您网站的代码。

转到项目的根目录并创建一个新的 git 存储库： 

git init

接下来，将任何修改过的文件添加到 git： 

git add .

最后，使用以下命令将所有更改提交到 git： 

git commit -m "Initial Commit"

这会将您的应用程序的这个版本提交给 git 版本控制。 -m 接受一个字符串参数并将其用作有关提交的消息。

注意：如果你之前没有在这台机器上设置过git，你可能会收到如下输出： 

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

在继续之前运行两个 git config 命令以提供此信息。 如果您想了解有关 git 的更多信息，请查看我们的 如何为开源做出贡献：Git 入门 教程。


您将收到如下输出： 

Output[master 1e3317b] Initial Commit
 3 files changed, 7 insertions(+), 13 deletions(-)
 create mode 100644 src/gifs/whales.gif

提交文件后，转到 GitHub 并登录。 登录后，创建一个名为gatsby-digital-ocean-app-platform的新存储库。 您可以将存储库设为私有或公开：

创建新仓库后，返回命令行并添加远程仓库地址： 

git remote set-url origin https://github.com/your_name/gatsby-digital-ocean-app-platform

确保将 your_name 更改为您在 GitHub 上的用户名。

接下来，声明您要使用以下内容推送到 main 分支： 

git branch -M main

最后，将您的代码推送到新创建的存储库： 

git push -u origin main

输入凭据后，您将收到类似于以下内容的输出： 

OutputCounting objects: 3466, done.
Compressing objects: 100% (1501/1501), done.
Writing objects: 100% (3466/3466), 28.22 MiB | 32.25 MiB/s, done.
Total 3466 (delta 1939), reused 3445 (delta 1926)
remote: Resolving deltas: 100% (1939/1939), done.
To https://github.com/your_name/gatsby-digital-ocean-app-platform
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

您现在可以在您的 GitHub 帐户中访问您的代码。

在本节中，您将代码推送到远程 GitHub 存储库。 在下一部分中，您将把 Gatsby 应用从 GitHub 部署到应用平台。

第 3 步 — 在 DigitalOcean 应用平台上部署您的 Gatsby 应用

在这一步中，您将把您的应用程序部署到 DigitalOcean 应用程序平台上。 如果您还没有这样做，请创建一个 DigitalOcean 帐户。

打开您的 DigitalOcean 控制面板，选择屏幕顶部的 Create 按钮，然后从下拉菜单中选择 Apps：

选择 Apps 后，您将从 GitHub 检索您的存储库。 单击 GitHub 图标并授予 DigitalOcean 访问您的存储库的权限。 最好只选择要部署的存储库。

您将被重定向回 DigitalOcean。 进入Repository字段，选择你要部署的项目和分支，然后点击Next：

注意： 在 Branch 下面有一个预先选中的框，上面写着 Autodeploy code changes。 这意味着如果您将任何更改推送到 GitHub 存储库，DigitalOcean 将自动部署这些更改。


在下一页上，您将被要求配置您的应用程序。 在你的情况下，所有的预设都是正确的，所以你可以点击Next：

完成应用程序的配置后，给它起一个类似 save-the-whales 的名称：

选择您的姓名并单击下一步后，您将进入付款计划页面。 由于您的应用是静态站点，您可以选择 Starter 计划，该计划是免费的：

现在单击 Launch Starter App 按钮。 等待几分钟后，您的应用程序将被部署。

导航到应用标题下方列出的 URL。 您会发现您的 Gatsby 应用程序已成功部署。

结论

在本教程中，您使用 GIF 创建了一个 Gatsby 站点并将该站点部署到 DigitalOcean 应用平台 。 DigitalOcean App Platform 是部署和共享 Gatsby 项目的便捷方式。 如果您想了解更多关于该产品的信息，请查看应用平台的官方文档。

取自“https://cainiaojiaocheng.com/index.php?title=如何将Gatsby应用程序部署到DigitalOcean应用程序平台&oldid=32977”
Powered by MediaWiki