現在、静的 Web サイトをホストする最も一般的なプラットフォームは、Netlify と Google App Engine (GAE) の 2 つです。

Netlify は、静的 Web サイトの構築と展開をすべて同じプラットフォームで統合した経験を提供するため、最近多くの人気を得ています。

GAE は、非静的 Web サイトもサポートするという点でより柔軟ですが、Netlify が提供する統合レベルには明らかに欠けています。では、多くの場合、なぜまだ GAE を使用するのでしょうか?答えは簡単です。GAE はより良い価格オプションを提供することがよくあります。同時に、この記事で説明するいくつかのシンプルなツール (GitHub Actions と Reliza Hub) を使用して、Netlify のすべての機能などを利用できます。

 価格
最初に、GAE + GitHub Actions の組み合わせがより理にかなっている場合の価格シナリオについて説明します。キーポイントはビルド時間です。 Netlifyãâ¢ãâãâ の無料利用枠では、1 か月あたり 300 のビルド分しか提供されません。静的な node.js アプリのようなものを使用していて、ビルドに平均で 2 ～ 3 分かかる場合、Netlify で 1 か月あたり約 100 以上のビルドしか取得できないため、これでは十分ではない可能性があります。特にウェブサイトが複数ある場合

Netlify ãâ¢ãâãâ でさらにビルド時間が必要な場合は、追加の 500 分ごとに $7 を支払うか、1000 分を含むが月額 $45 の次の層に移動します。一方、GitHub Actions では、プライベート リポジトリの場合は 2000 ビルド分、パブリック リポジトリの場合は無制限のビルド分を無料で利用できます。ドキュメント Web サイトを構築していて、それを GitHub で公開することにしたとします。これは、GitHub Actions で無制限のビルド時間を取得し、それにより大きな違い

次に考慮するのは交通費です。 Netlify は、無料利用枠に含まれる 1 か月あたり 100 GB の帯域幅送信を提供しますが、これは寛大です。 Google は 1 日あたり 1 GB の下りを無料で提供しているため、1 か月あたり約 30 GB になります。したがって、エグレスが 30GB から 100GB の場合は、Netlify の方がお得になる可能性があります。ただし、100GB を超えると、Netlify はその月の次の 100GB に対してすぐに 20 ドルを請求します。 Google には、GB 送信あたりの料金ポリシーがあり、0.12 ドルかかります。つまり、Netlify では $12/100GB ãâ¢ãâãâ 対 $20/100GB を支払うことになります

そのため、トラフィックによっては、Netlify または GAE のどちらかが、出口の見通しから優れている場合があります。しかし、多くの場合、ここでも GAE の方が優れた価値を提供します。
ビルドに GitHub Actions や CircleCI などを使用している場合でも、Netlify にデプロイできます。 GitHub Actions のより柔軟なシステム

 Google App Engine プロジェクトの構成
まず、httpsconsole.cloud.google.com/appengine にアクセスして、新しいプロジェクトを作成します。既にプロジェクトをお持ちの場合は、上部のプロジェクト名をクリックしてから、
**新しいプロジェクト**

プロジェクト名を入力してください。取得しているプロジェクト ID をここにメモします (後で必要になります)。私の場合は
*Ãâ¢ãâãâevie-landing-tutorialãâ¢ãâãâ* ãâ¢ãâãâ をクリックし、**作成をクリックします。ページ上部のプロジェクト セレクターからこのプロジェクト

クリック
**アプリケーションを作成**し、希望する地域を選択します。次に、静的アプリケーションの場合は、Python および標準環境を選択します (無料利用枠は標準環境にのみ適用されます)。この時点で、アプリケーションは次のステップの準備ができています

ドメイン名をこのアプリケーションに向けるには、httpsconsole.cloud.google.com/appengine/settings/domains に移動します。

そしてクリック
**カスタム ドメインを追加する 手順に従い、DNS をドメインから Google が提供するレコードにポイントします。これが完了すると、Google は自動的にドメインをこのアプリケーションに向け、SSL 証明書も管理します。

最後に、自動デプロイを担当するサービス アカウントを準備する必要があります。 httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id に移動します (
*your_project_id *実際のプロジェクト ID を含むこのリンク。私の場合は *evie-landing-tutorial になります。次のメニュー ページが表示されます。
[アクション] 列で、App Engine のデフォルト サービス アカウントの近くにある 3 ドット アイコンをクリックします。そして選択
ドロップダウン メニューの **キーの作成** オプション

キータイプとして JSON を選択し、
**CREATE これにより、.json ファイルがマシンにダウンロードされます。ここで最後に行う必要があるのは、このファイルを base64 形式でエンコードすることです。これは、後で GitHub Actions に移動するときに必要になります。

これは、次のようにコマンド ラインを使用して実行できます。
base64 your_json_file.json >key.base64
次に、key.base64 ファイルには base64 でエンコードされたキーが含まれます。

**セキュリティに関する注意事項: これらの json および base64 キー ファイルを使用すると GAE プロジェクトを制御できるため、それらを GitHub Actions に追加した後 (後で説明するように)、シュレッドすることをお勧めします。このファイルを削除します。これは、次のように cli から実行できます。
シュレッド key_file_name&& rm key_file_name
キーを取得したら、Google App Engine API を有効にする必要があります。これを行うには、ページ httpsconsole.developers.google.com/apis/api/appengine にアクセスしてください。 .googleapis.com/overview をクリックして
**有効**

 GitHub リポジトリと GitHub アクションの設定
最後に、GitHub リポジトリを準備します。このチュートリアルでは、Undraw による Evie テーマのセットアップについて説明します。 (これは、私が現在 Reliza Hub ランディング ページで使用しているテーマです!) 元の Evie テーマはここでホストされていますが、このリポジトリで Relizaãâ¢ãâãâ のフォークを使用します。

他の記事ですでに述べたように、最近の私のビルド哲学は、すべてをドッキングして使用することです
複数のプラットフォームにわたる統合された CI ビルド環境としての docker build。したがって、Dockerfile、nginx 構成を追加し、元の Evie テーマに関連する npm バージョンも更新して、dockerized ビルドが機能するようにしました。

今私たちがするなら
Reliza の Evie リポジトリ コンテンツで docker build コマンドを実行すると、ポート 80 に関するドキュメントなしで、Evie テーマを提供する nginx ベースのイメージがビルドされます。

ここで、GitHub Actions スクリプトを準備します。プロセス全体をシンプルにする actions-hub/gcloud@master アクションを使用します

まず、アクションに必要な 2 つの GitHub Actions シークレットを設定します。 GitHub リポジトリ内の [設定] ->[シークレット] に移動し、
次の 2 つのシークレットを設定する **新しいシークレット**:
- GCLOUD_PROJECT_ID ãâ¢ãâãâ は、プロジェクトの作成時に書き留めたプロジェクト ID に設定します。私の場合は evie-landing-tutorial です。

- GOOGLE_APPLICATION_CREDENTIALS × 上記の Google サービス アカウント用に取得した base64 でエンコードされた json-key ファイルの内容に設定します。

リポジトリに .github ディレクトリを作成し、その中にワークフロー ディレクトリを作成します。その中にgae_build.ymlを作成します。また、GAE 構成を含む app.yaml ファイルを追加する必要があり、私が持っている静的アプリのユースケースでは非常に簡単です。

このコードをプッシュすると、GitHub Actions ビルドがトリガーされ、GAE アプリケーションへのデプロイが行われ、サービスが稼働します!以降の GitHub へのプッシュごとに、新しい GitHub Actions ビルドが自動的にトリガーされ、GAE でアプリケーションが自動的に更新されます

これで、静的 Web サイトの基本的な CICD パイプラインの準備が整いました。ここで終了するか、Reliza Hub を使用して承認と展開の可視化機能を追加する方法を読み続けることができます

 ボーナス: Reliza Hub を使用して承認と可視性を追加する

すべての新しいビルドを自動的に本番環境に移行させたくない場合を考えてみましょう。 代わりに、最初に本番環境ではない場所にデプロイしてから、気に入った場合は、あなたまたは承認者 (たとえば、マーケティング マネージャー) がボタンをクリックして、生産に昇格  これまでに説明した構成に加えて、Reliza Hub を使用してこれを実現する方法を次に示します。   1 Ãâ¢ãâãâ Reliza Hub へのリリース メタデータのストリーミング まず、httpsapp.relizahub.com に移動し、GitHub で認証して組織を作成します。 *ãâ¢ãâãâEvie Landing Tutorialãâ¢ãâãâ* は組織名として。 **VCS** メニュー項目をクリックしてから、プラス丸のアイコンをクリックして、VCS リポジトリを追加します。  GitHub リポジトリの URI を入力に貼り付けると、Reliza Hub が自動的に解析します  クリック **送信すると、リポジトリが作成されます。 プロジェクトメニューに進み、プラス丸のアイコンをクリックしてプロジェクトを作成します。 プロジェクト名を入力します (ここでは *Evie Landing Set バージョン スキーマを Single Component (Major) に使用します。これは、GAE が 1 つのコンポーネントで構成される独自のバージョン管理を使用しているためです。 âãâ そのまま Reliza Hub 内で使用します。 前のステップで作成したばかりの VCS リポジトリを選択します  そしてクリック **送信 これにより、新しいプロジェクトが作成されます。 次に、この新しく作成されたプロジェクト名をクリックし、ロック アイコンをクリックしてプロジェクト API キーを生成します。  プロジェクト用に生成された API ID と API キーが表示されたら、対応する値を使用して GitHub Actions â RELIZA_API_PROJECT_ID と RELIZA_API_PROJECT_KEY に 2 つの新しいシークレットを作成します。  ここで、gae_build.yml スクリプトを更新して、ビルドの詳細を Reliza にストリーミングし、非昇格モードに切り替えます。 これは、すべての git プッシュで GAE にデプロイが作成されることを意味しますが、Google は後で手動で手順を実行するまでトラフィックをこの新しいデプロイに切り替えません。  更新されたスクリプトには、ビルド時間追跡の Reliza Hub へのレポートが含まれており、GAE で昇格されていない各展開の URI も含まれます。 Reliza Go Client の GitHub リポジトリで、私たちが使用するさまざまなフラグの説明を見つけることができます。  GitHub Actions run on push が完了したら、Reliza Hub でリリースのページに移動して、次の図を確認できます。  をクリックすることに注意してください **テスト エンドポイント** リンクをクリックすると、このソース コード エントリに対応する GAE 上の実際のデプロイ バージョンに移動できますが、トラフィックを処理するためにまだ昇格されていません  こちらのガイドに従ってスラック統合を追加して、Reliza Hub のすべての新しいリリースの通知を受け取ることもできます   2 ãâ¢ãâãâ 承認の追加 Reliza Hub の設定ページに移動し、その下部で PRODUCTION 環境の承認マトリックスを構成します。 私の場合、リリースを本番環境に昇格させるには、マーケティングからの承認のみが必要です。 次のように：  クリック **マトリックスを保存**  次に、Reliza GitHub アプリ ãâ¢ãâãâ httpsgithub.com/apps/reliza-hub ãâ¢ãâãâ をインストールし、チュートリアル Iãâ¢ãâ に従いますÃâve プロジェクトに登録するために以前に書いた  最後に、Reliza Hub からの承認でトリガーされる新しい GitHub Actions ワークフローは、こちらで確認できます。 基本的に、このワークフローは、Reliza Hub に最新の本番承認済みバージョンを照会し、Google App Engine にトラフィックをそのバージョンに切り替えるように要求します。  このスクリプトで設定が必要なのは、RELIZA_PROJECT_ID 環境変数 âÃâÃâ だけです。これは、Reliza Hub のプロジェクト ページで取得したプロジェクト UUID に設定する必要があります。  これで、MARKETING から承認された最新のプロジェクト リリースは、Google App Engine 側で自動的に昇格されます。承認者を組織に追加する方法の詳細については、承認に関するチュートリアル ビデオをご覧ください。   3 ãâ¢ãâãâ 何がいつ展開されるかを可視化する 最後に、実際にどのリリースがいつデプロイされたかを Reliza Hub で可視化したいと考えています。  これを行うには、まず Reliza Hub のインスタンスに移動し、プラス丸のアイコンをクリックして新しいインスタンスを作成します  次に、インスタンスの URI を入力し、この静的 Web サイトには運用環境しかないため、環境を PRODUCTION ãâ¢ãâãâ に選択します。 クリックする **送信** 新しいインスタンスを作成します  次に、この新しく作成したインスタンスを選択し、ロック アイコンをクリックして API キーを生成します。  API ID と API キーが生成されたら、対応する値を使用して GitHub Actions の 2 つの新しいシークレット â RELIZA_API_INSTANCE_ID と RELIZA_API_INSTANCE_KEY を作成します。  これにより、最初に承認済みデプロイ スクリプトを更新して、GAE でのデプロイを確認するセクションを追加し、それを Reliza Hub にストリーミングします。 また、cron GitHub Actions ワークフローを追加して、GAE アプリケーションの状態を確認します。  このワークフローのいずれかが実行された後、次のように、インスタンス ビューの Reliza Hub で GAE アプリケーションのデプロイ スナップショットを取得します。   まとめ これで、GitHub Actions が GAE にデプロイされ、Reliza Hub によって管理される承認と可視性を備えた完全なプッシュボタン CI CD パイプラインができました。 また、技術スタッフに尋ねることなく、Slack 通知とマーケティング マネージャーが変更を確認し、ボタンを押して本番環境に昇格させることもできます。 それはどれほどクールですか？
私と話をして、このワークフローまたは他のワークフローについてさらに話し合いたい場合は、30 分間の縛りのない Reliza Hub のデモ通話を予約してください。 Ãâ と私は全力でお手伝いします。