GatsbyアプリケーションをDigitalOceanアプリプラットフォームにデプロイする方法

提供：Dev Guides
移動先:案内、検索

著者は、 Write forDOnationsプログラムの一環として寄付を受け取るために/dev /colorを選択しました。

序章

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

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

前提条件

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

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

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

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

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

リポジトリのクローン作成が終了したら、cdをgatsby-starter-defaultディレクトリに追加します。 

cd gatsby-starter-default

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

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.に変更し、最後の<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ファイルを作成します。 

cd src/
mkdir gifs

次に、新しく作成したgifsフォルダーに移動します。 

cd gifs

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

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

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

次に、名前を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にプッシュして、AppPlatformからアクセスできるようにします。

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

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

プロジェクトのルートに移動し、新しい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 "[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という名前の新しいリポジトリを作成します。 リポジトリをプライベートまたはパブリックにすることができます。

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

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から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の公式ドキュメントをご覧ください。

「https://www.finddevguides.com/index.php?title=GatsbyアプリケーションをDigitalOceanアプリプラットフォームにデプロイする方法&oldid=107723」から取得
Powered by MediaWiki