GatsbyアプリケーションをDigitalOceanアプリプラットフォームにデプロイする方法
序章
このチュートリアルでは、GatsbyアプリケーションをDigitalOceanのAppPlatformにデプロイします。 App Platformは、アプリを自動的に構築、デプロイ、管理する Platform as aServiceです。 Gatsbyのような静的サイトジェネレーターの速度と組み合わせると、サーバー側のプログラミングを必要としないスケーラブルなJAMStackソリューションを提供します。
このチュートリアルでは、ローカルマシンでサンプルのGatsbyアプリを作成し、コードを GitHub にプッシュしてから、AppPlatformにデプロイします。
前提条件
-
ローカルマシンでは、Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン14.16.0およびnpmバージョン6.14.11でテストされました。 これをmacOSまたはUbuntu20.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはの
PPAを使用したインストール ]セクションの手順に従います。 Ubuntu20.04にNode.jsをインストールする方法。 -
Gitがローカルマシンにインストールされています。 チュートリアルオープンソースへの貢献:Git入門に従って、コンピューターにGitをインストールしてセットアップすることができます。
-
アカウントの作成ページに移動して作成できるGitHubのアカウント。
-
GatsbyCLIツールがローカルマシンにダウンロードされました。 これを行う方法は、最初のギャツビーWebサイトをセットアップする方法チュートリアルのステップ1で学ぶことができます。
-
JavaScriptを理解しておくと役に立ちます。 JavaScriptの詳細については、JavaScriptシリーズのコーディング方法をご覧ください。 始めるためにReactを知る必要はありませんが、基本的な概念に精通していると役に立ちます。 このシリーズでReactを学ぶことができます。
ステップ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
、次の強調表示された行に示されているように:
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>
鬼ごっこ:
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
インポートして要素を作成し、次の強調表示された行に置き換えます。
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が発生した場所を読者に通知します。
インデックスファイルを閉じて保存します。
次に、サイトをローカルで実行して、サイトが機能することを確認します。 プロジェクトのルートから、開発サーバーを実行します。
- 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バージョン管理にコミットされます。 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という名前の新しいリポジトリを作成します。 リポジトリをプライベートまたはパブリックにすることができます。
新しいリポジトリを作成したら、コマンドラインに戻り、リモートリポジトリアドレスを追加します。
- 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の公式ドキュメントをご覧ください。