技術

フロントエンド：静的サイトの更新にGatsby.jsとNode.jsを使用する

一部のプロジェクト要件では、静的ページの生成は十分、それはまた最も 効率的 速度とスケーラビリティの観点から。

にこのシリーズの前半、組み合わせました Node.js 、Express、MongoDB、cron、および Heroku 毎日のスケジュールに従ってGitHubのAPIを使用するCI対応のバックエンドを提供します。これで、Gatsbyをミックスに追加して、静的ページ生成プロジェクトを完了する準備ができました。

フロントエンドの開発：それをギャツビーのウェブサイトにする

ギャツビーのウェブサイトはに基づいているので React 、Reactを使用してWebサイトを構築する方法に既に精通している場合に役立ちます。

スタイリングには、Bootstrap、reactstrap、react-markdownが好きでした。あなたはそれを知っているかもしれません GitHubのリリースノートはMarkdown形式で保存されますしたがって、コンバーターが必要です。

静的ウェブサイトプロジェクトの構造

ファイル/フォルダーの構造は次のようになります。

空のパブリックフォルダーとpackage.jsonなどのファイル用のsrcフォルダーを持つ標準のフロントエンドプロジェクトルート。 srcフォルダーの下には、global.cssのstylesサブフォルダーと、all-repositories.jsおよびrepository.jsのtemplatesサブフォルダーがあります。

これらのファイルは何のためのものですか？どれどれ：

env.developmentおよびenv.production環境変数構成ファイルです。
all-repositories.jsテンプレートは、リポジトリのリストを含む当社のホームページに使用されます。
repository.jsテンプレートは、特定のリポジトリの詳細を表示するために使用されます。
gatsby-node.jsここでバックエンドエンドポイントを使用し、createPageを実行しますメソッド。
package.jsonは、いつものように、依存関係とプロジェクトプロパティを含みます。
global.css私たちのメインスタイルシートファイルです。

ギャツビーウェブサイトの実装

バックエンドと同様に、npm installを実行します（または、Yarnがインストールされている場合はyarn）必要な依存関係をフロントエンドのpackage.jsonに追加した後：

{ // ... 'dependencies': { 'axios': '^0.18.0', 'bootstrap': '^4.3.1', 'gatsby': '^2.0.0', 'react': '^16.5.1', 'react-dom': '^16.5.1', 'react-markdown': '^4.0.6', 'reactstrap': '^7.1.0' } // ... }

env.developmentおよびenv.productionファイルには、対応する環境のバックエンドURLのみが含まれます。前者は：

API_URL=http://localhost:3000

…本番環境には次のものがあります。

API_URL=https://[YOUR_UNIQUE_APP_NAME].herokuapp.com

gatsby-node.jsコードのビルド中に1回だけ実行されます。したがって、ここでバックエンドから必要なすべての情報を収集する必要があります。次に、応答をテンプレートで使用して、適切な静的ページを生成します。

私たちの場合、all-repositories.jsすべてのリポジトリが必要であり、repository.js反復ごとに対応するリポジトリが必要です。最後に、リポジトリを渡して、ページパスを動的に生成できますownerおよびname pathの一部としてのパラメーターフィールド：

const axios = require('axios'); require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` }); const getRepositoryData = async () => { console.log(process.env.API_URL); return axios.get(`${process.env.API_URL}/repositories`); }; exports.createPages = async ({ actions: { createPage } }) => { let repositories = await getRepositoryData(); repositories = repositories.data; // Create a page that lists all repositories. createPage({ path: `/`, component: require.resolve('./src/templates/all-repositories.js'), context: { repositories } }); // Create a page for each repository. repositories.forEach(repository => { createPage({ path: `/repository/${repository.owner}/${repository.name}`, component: require.resolve('./src/templates/repository.js'), context: { repository } }); }); };

all-repositories.jsの場合およびrepository.js、スタイリングを省略した場合、pageContextからデータを収集するだけです。 Reactでパラメーターを使用するときに使用します。

all-repositories.jsでは、repositoriesを使用しますpageContextのフィールドこのような：

export default ({pageContext: {repositories}}) => ( // ... {/* Because the repositories parameter is a list, we are iterating over all items and using their fields */} {repositories.map(repository => (repository.tagName && // ... {`${repository.repositoryDescription}`} // ... ))} // ... );

repository.jsについては、代わりにrepositoryを使用しますpageContextのフィールド：

export default ({pageContext: {repository}}) => ( {repository.tagName && // ...  
 {/* This the place where we will use Markdown-formatted release notes */} } // ... );

ここで、バックエンドが稼働していることを確認します。このプロジェクトでは、次のように設定したことを思い出してください。 http：// localhost：3000 。

次に、gatsby developを実行しますフロントエンドプロジェクトのルートから開いて http：// localhost：8000 。

バックエンドにいくつかのリポジトリ（所有者/名前）を追加し、update-via-GitHub-API機能を少なくとも1回実行した場合は、次のように表示されます。

GitHubリポジトリのサンプルの基本情報を示す、アプリのホームページを一覧表示するリポジトリ

リポジトリの1つをクリックすると、次のように表示されます。

facebook / reactGitHubリポジトリに関する詳細情報を表示するサンプルリポジトリ詳細ページ

上記の変更後、フロントエンドの実装が完了しました。

すごい！これで、デプロイする必要があります。

フロントエンドの展開

この部分では、フロントエンドアプリケーションに変更を加える必要はありません。単純に展開します Netlify —そこにアカウントが必要です。

ただし、最初に、コードをGitHub、GitLab、またはBitbucketにデプロイする必要があります。バックエンドと同様に、コードをGitHubにデプロイしました。

次に、Netlifyにログインし、ダッシュボードの[Gitから新しいサイト]ボタンをクリックします。画面の手順に従って、Gitプロバイダーを選択し、リポジトリを見つけます。

最後のステップとして、コードを正しく構造化した場合、Netlifyは自動的にビルドコマンドを設定し、次のようにディレクトリを正しく公開します。

Netlifyの正しい設定

次に、「サイトの展開」をクリックします。ランダムに生成されたNetlifyサブドメインにサイトをデプロイしますが、いつでも変更できます。デプロイメントを次のように変更しました。 https://sample-create-page-api-gatsby.netlify.com 、完成したアプリのライブデモを見つけることができます。

ここまでは順調ですね。ただし、これは静的ページアプリケーションであるため、最新の状態に保つために毎日再構築する必要があります。

ビルドフックを使用した毎日の更新

Netlifyのビルドフックはビルドトリガーとして機能するため、cronジョブの終了後にバックエンドからフックをトリガーできます。これを行うには、最初にNetlifyでビルドフックを作成します。

「ビルドとデプロイ→継続的デプロイ」セクションの下に、「ビルドフック」があります。「ビルドフックの追加」をクリックします。

Netlifyでビルドフックを見つける場所

名前を付けて保存します。（私はbuild-from-backendと呼びました。）次に、生成されたリンクをコピーします。

それでは、バックエンドプロジェクトを開いて、これらの数行をcron.controller.jsに追加しましょう。ファイル。単にPOSTを送信していますNetlifyのビルドフックURLへのリクエスト。

const Axios = require('axios'); const Config = require('../config/env.config'); const NETLIFY_BUILD_HOOK_URI = Config.netlifyEndpoint; function updateGatsby() { if (NETLIFY_BUILD_HOOK_URI) { console.log('Gatsby build request will be send'); Axios.post(NETLIFY_BUILD_HOOK_URI).then(() => { console.log('Gatsby build request was successful'); }); } }

次に、updateDailyを更新します関数：

function updateDaily() { RepositoryController.updateRepositories().then(() => { updateGatsby(); }); }

最後に、env.config.jsを更新しますnetlifyEndpointを設定するファイル環境変数から収集されるプロパティ：

'netlifyEndpoint': process.env.NETLIFY_BUILD_HOOK || ''

次に、NETLIFY_BUILD_HOOKを設定する必要があります少し前にNetlifyからコピーした環境変数。 Herokuでは、アプリケーションの「設定」セクションから環境変数を設定できます。

コミットをプッシュした後、バックエンドアプリケーションはビルドリクエストをNetlifyに送信し、cronジョブの最後にページが毎日更新されます。リポジトリは次のようになりますビルドフック機能を追加した後、の最終バージョンとともにバックエンドリポジトリそしてフロントエンドリポジトリ。

プロジェクトの最後の仕上げとして、使用方法を示します。 AWS AWS CloudWatchによってトリガーされるLambda関数は、毎日の更新ごとに時間内にバックエンドをウェイクアップします。

AWSLambdaとAWSCloudWatch Simple Request

AWS Lambda サーバーレスコンピューティングプラットフォームです。必要なのは非常に基本ここで私たちの目的のためにこのプラットフォームの。 AWSアカウントが必要です。

まず、アカウントでAWSにログインし、Lambda ManagementConsoleを見つけます。たとえば、us-east-2の場合、次の場所にあります。 https://us-east-2.console.aws.amazon.com/lambda/home 。

まだ選択されていない場合は、「機能」セクションに移動します。

AWS Lambda

ここでは、「関数の作成」をクリックして、関数を最初から作成します。説明的な名前を付けましょう。 Node.jsをランタイム言語として使用します。次に、次の「関数の作成」をクリックして完成させます。

AWS Lambda

index.jsでコードを記述できる新しい関数のページにリダイレクトされます。

最初のラムダ関数を実装しましょう。サードパーティの依存関係がないため、Node.jsのコアモジュールを使用する必要があります。（代わりにサードパーティの依存関係を有効にする場合は、 AWSのこのガイドに従ってください。）

エクスポートされたメソッド名（この場合はhandler）がページの「Handler」パラメーターと一致することを確認してください。

ハンドラーパラメータ

残りは単純ですGETバックエンドへのリクエスト：

const https = require('https'); exports.handler = async (event) => { return new Promise((resolve, reject) => { https.get(process.env.HEROKU_APP_URL, (resp) => { let data = ''; resp.on('data', (chunk) => { data += chunk; }); resp.on('end', () => { resolve(JSON.parse(data)); }); }).on('error', (err) => { reject('Error: ' + err.message); }); }); };

必ずHEROKU_APP_URLを設定してくださいページ内の環境変数、および構成を保存します。

AWSLambdaで必要な環境変数を設定します。表示される値はhttps://sample-github-api-consumer-nod.herokuapp.com/repositoriesです。