序章

このチュートリアルでは、GatsbyアプリケーションをDigitalOceanのAppPlatformにデプロイします。 App Platformは、アプリを自動的に構築、デプロイ、管理する Platform as aServiceです。 Gatsbyのような静的サイトジェネレーターの速度と組み合わせると、サーバー側のプログラミングを必要としないスケーラブルなJAMStackソリューションを提供します。

このチュートリアルでは、ローカルマシンでサンプルのGatsbyアプリを作成し、コードを GitHub にプッシュしてから、AppPlatformにデプロイします。

前提条件

ステップ1—ギャツビープロジェクトの作成

このセクションでは、サンプルのGatsbyアプリケーションを作成します。これは、後でAppPlatformにデプロイします。

まず、GitHubからデフォルトのGatsbyスターターのクローンを作成します。 ターミナルで次のコマンドを使用してこれを行うことができます。

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

Gatsbyスターターサイトは、アプリケーションのコーディングを開始するために必要なボイラープレートコードを提供します。 Gatsbyアプリの作成の詳細については、最初のGatsbyWebサイトのセットアップ方法を参照してください。

リポジトリのクローン作成が終了したら、 cdgatsby-starter-default ディレクトリ:

  1. cd gatsby-starter-default

次に、ノードの依存関係をインストールします。

  1. npm install

アプリをダウンロードして依存関係をインストールしたら、テキストエディターで次のファイルを開きます。

  1. nano gatsby-config.js

Gatsbyの設定ファイルを開いたところです。 ここで、サイトに関するメタデータを変更できます。

に移動します title キーと変更 Gatsby Default StarterSave 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`,
  ],
}

ファイルを閉じて保存します。 次に、お気に入りのテキストエディタでインデックスファイルを開きます。

  1. nano src/pages/index.js

「クジラを救え」のテーマを続けるには、 Hi peopleAdopt a whale today、 変化する Welcome to your new Gatsby site.Whales are our friends.、最後のを削除します <p> 鬼ごっこ:

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と交換します。 GIFを追加する前に、まずGIFディレクトリを作成してダウンロードする必要があります。

に移動します src ディレクトリを作成し、 gifs ファイル:

  1. cd src/
  2. mkdir gifs

次に、新しく作成したものに移動します gifs フォルダ:

  1. cd gifs

awhalesGIFをGiphyからダウンロードします。

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

Wget は、インターネットからファイルをダウンロードできるユーティリティです。 Giphy は、GIFをホストするWebサイトです。

次に、名前をから変更します giphy.gifwhales.gif:

  1. mv giphy.gif whales.gif

GIFの名前を変更したら、プロジェクトのルートフォルダーに戻り、インデックスファイルを再度開きます。

  1. cd ../..
  2. 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> エレメント。 The alt タグは、GIFが発生した場所を読者に通知します。

インデックスファイルを閉じて保存します。

次に、サイトをローカルで実行して、サイトが機能することを確認します。 プロジェクトのルートから、開発サーバーを実行します。

  1. gatsby develop

サイトの構築が完了したら、 localhost:8000 ブラウザの検索バーに移動します。 ブラウザに次のように表示されます。

このセクションでは、サンプルのGatsbyアプリを作成しました。 次のセクションでは、コードをGitHubにプッシュして、AppPlatformからアクセスできるようにします。

ステップ2—コードをGitHubにプッシュする

チュートリアルのこのセクションでは、コードをにコミットします git GitHubまでプッシュします。 そこから、DigitalOceanのAppPlatformはあなたのウェブサイトのコードにアクセスできるようになります。

プロジェクトのルートに移動し、新しいgitリポジトリを作成します。

git init

次に、変更したファイルをgitに追加します。

  1. git add .

最後に、次のコマンドを使用して、すべての変更をgitにコミットします。

  1. git commit -m "Initial Commit"

これにより、このバージョンのアプリがgitバージョン管理にコミットされます。 The -m 文字列引数を取り、コミットに関するメッセージとして使用します。

注:このマシンで以前にgitを設定したことがない場合は、次の出力が表示される場合があります。

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

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

2つ実行します 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という名前の新しいリポジトリを作成します。 リポジトリをプライベートまたはパブリックにすることができます。

新しいリポジトリを作成したら、コマンドラインに戻り、リモートリポジトリアドレスを追加します。

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

必ず変更してください your_name GitHubのユーザー名に。

次に、にプッシュすることを宣言します main 次のブランチ:

  1. git branch -M main

最後に、新しく作成したリポジトリにコードをプッシュします。

  1. git push -u origin main

クレデンシャルを入力すると、次のような出力が表示されます。

Output
Counting 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からAppPlatformにデプロイします。

ステップ3—GatsbyアプリをDigitalOceanアプリプラットフォームにデプロイする

このステップでは、アプリをDigitalOceanAppPlatformにデプロイします。 まだ作成していない場合は、DigitalOceanアカウントを作成してください。

DigitalOceanコントロールパネルを開き、画面上部の Create ボタンを選択して、ドロップダウンメニューからAppsを選択します。

Apps を選択したら、GitHubからリポジトリを取得します。 GitHubアイコンをクリックし、DigitalOceanにリポジトリへのアクセスを許可します。 デプロイするリポジトリのみを選択することをお勧めします。

DigitalOceanにリダイレクトされます。 リポジトリフィールドに移動し、デプロイするプロジェクトとブランチを選択して、次へをクリックします。

注: ブランチの下に、コード変更の自動デプロイというチェックボックスがあります。 つまり、GitHubリポジトリに変更をプッシュすると、DigitalOceanはそれらの変更を自動的にデプロイします。

次のページで、アプリを構成するように求められます。 あなたの場合、すべてのプリセットが正しいので、次へをクリックできます。

アプリの構成が完了したら、save-the-whalesのような名前を付けます。

名前を選択して次へをクリックすると、お支払いプランのページに移動します。 アプリは静的サイトであるため、無料のStarterプランを選択できます。

次に、 StarterAppボタンをクリックします。 数分待つと、アプリがデプロイされます。

アプリのタイトルの下にリストされているURLに移動します。 Gatsbyアプリが正常にデプロイされていることがわかります。

結論

このチュートリアルでは、GIFを使用してGatsbyサイトを作成し、そのサイトを DigitalOcean AppPlatformにデプロイしました。 DigitalOcean App Platformは、Gatsbyプロジェクトを展開および共有するための便利な方法です。 この製品の詳細については、 AppPlatformの公式ドキュメントをご覧ください。