Zenn
🌱

strapi-starter-gridsome-blogをGitHubから自動でデプロイしてみる

2021/04/23に公開
GitHub
Google Cloud
Jamstack
Strapi
Gridsome
tech

前回Cloud RunにデプロイしたstrapiのGridsome Blog Starterを、GitHubへのプッシュで自動的にデプロイが実行されるようにしてみます。
https://zenn.dev/mseto/articles/strapi-starter-blog
https://zenn.dev/mseto/articles/strapi-starter-blog-cloud-run

事前準備

  • GitHubのアカウント

Google Cloud SDKの準備

前回でも使用したGoogle Cloud SDKのプロジェクトを使用します。

VSCodeでgcloudディレクトリを開き、Remote-Containers: Reopen in Containerを実行してコンテナに入ります。

下記コマンドで現在のプロジェクトが前回使用したプロジェクトになっているか確認します。

$ gcloud config list

使用するプロジェクトではなかった場合、下記コマンドでプロジェクトを変更します。

$ gcloud config set project 使用するプロジェクトID

Cloud Source Repositories APIを有効化

Cloud Source Repositories API を有効にします。

$ gcloud services enable cloudresourcemanager.googleapis.com

GitHubにstrapiのリポジトリを作成

GitHubにstrapiのリポジトリを作成します。
GitHubのマイページのヘッダーメニューにある"+"をクリックして"New repository"を選択します。

"Create a new repository"ページで"Repository name"を入力します。
ここでは"Private"を選択し、"Create repository"をクリックします。

StrapiのプロジェクトをGitHubにpush

VSCodeに戻り、ターミナルから下記コマンドを入力して作成したリポジトリにstrapiのプロジェクトをpushします。

# strapiプロジェクトに移動
$ cd /src/strapi-blog/

# ローカルリポジトリ作成
$ git init

# strapiプロジェクトのファイルやディレクトリをステージングに追加
$ git add .

# strapiプロジェクトをローカルリポジトリにコミット
$ git commit -m "first commit"

# masterのブランチ名をmainに変更
$ git branch -M main

# リモートリポジトリに先程作成したGitHubのリポジトリを設定
$ git remote add origin GitHubに作成したリポジトリのURL

# ローカルリポジトリのファイルやディレクトリをリモートリポジトリにpush
$ git push -u origin main

Cloud Runで継続的デプロイを設定する

GitHubにpushされたらCloud Runでビルドとデプロイされるように設定します。
Google Cloud PlatformのCloud Runのページでstrapi_blogを選択します。
Cloud Run で strapi-blogを選択

"継続的デプロイの設定"をクリックします。
継続的デプロイの設定

"リポジトリ プロバイダ"にGitHubを選択します。
GitHubとの連携がまだの場合は"認証"をクリックします。

Cloud Build の設定

"認証"をクリックした場合、下記が表示されるので"続行"をクリックします。
GitHub による認証確認

GitHubに遷移し、ログイン後、認証の確認画面が表示されますので"Authorize Google Cloud Build"をクリックします。
Authorize Google Cloud Build

Cloud Buildの設定画面に戻ってきますので、"GOOGLE CLOUD BUILD のインストール"をクリックします。
GOOGLE CLOUD BUILD のインストール

GitHubのページに遷移するので"Only select repositories"からstrapiのリポジトリを選択して"Save"をクリックします。
リポジトリを選択

Cloud Buildの設定画面に戻り、利用規約が表示されるので確認し、チェックを入れ"次へ"をクリックします。
利用規約にチェック

"Build Type"に”Dockerfile”を選択し、保存をクリックします。
Build Configuration

リポジトリとの接続が成功すると自動的に初回のビルドが実行されます。

GitHubにpushしたらデプロイされるか確認

試しにstrapiの管理画面のURLを/adminから/dashboardになるように変更し、GitHubにpushしてデプロイされるかを確認してみます。
VSCodeで/strapi-blog/backend/config/server.jsにurlを追加します。

/strapi-blog/backend/config/server.js
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  admin: {
    // 下記を追記
    url: '/dashboard',
    auth: {
      secret: env('ADMIN_JWT_SECRET', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'),
    },
  },
});

保存したらGitHubのリポジトリにpushします。
デプロイが実行されているかはGoogle Cloud PlatformのCloud RunのページまたはCloud Buildのページから確認できます。
デプロイ終了後、strapiのURL/adminにアクセスすると"Not Found"が表示され、strapiのURL/dashboardにアクセスするとログイン画面が表示されていれば成功です。

Gridsomeについても同様に設定します。

GitHubにGridsomeのリポジトリを作成

GitHubのページからGridsomeのリポジトリを作成します。

Gridsomeの.gitignoreを作成

VSCodeに戻り、.gitignoreを作成します。

/gridsome-blog/.gitignore
*.log
.DS_Store
node_modules
coverage
dist
pnp-e2e
.env

GridsomeのプロジェクトをGitHubにpush

VSCodeのターミナルから下記コマンドを入力して作成したリポジトリにGridsomeのプロジェクトをpushします。

$ cd /src/gridsome-blog/
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin GitHubに作成したリポジトリのURL
$ git push -u origin main

Cloud RunでGridsomeの継続的デプロイを設定する

Google Cloud PlatformのCloud Runのページでgridsome_blogを選択します。
Cloud Run で gridsome_blogを選択

"継続的デプロイの設定"をクリックします。
継続的デプロイの設定

Gridsomeのリポジトリを追加するので"Manage connected repositories"をクリックします。
"Manage connected repositories"をクリック

GitHubのページに遷移するので"Only select repositories"からGridsomeのリポジトリを選択して"Save"をクリックします。
リポジトリを選択

Cloud Buildの設定画面に戻り、利用規約が表示されるので確認し、チェックを入れ"次へ"をクリックします。
利用規約にチェック

"Build Type"に”Dockerfile”を選択し、保存をクリックします。
Build Configuration

リポジトリとの接続が成功すると自動的に初回のビルドが実行されます。

GitHubにpushしたらデプロイされるか確認

Navbarの文字色を変更して確認してみます。
ここではNavbar.vueのg-linkにclass="uk-text-success"を追加しました。

gridsome-blog/frontend/src/components/Navbar.vue
<template>
  <div>
    <div>
      <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">
          <ul class="uk-navbar-nav">
            <li>
              <g-link to="/" class="uk-text-success">{{ $static.strapi.global.siteName }}</g-link>
            </li>
          </ul>
        </div>

保存したらGitHubのリポジトリにpushします。
デプロイ完了後、
Gridsome Navi変更前
が
Gridsome Navi変更後
になっていたら成功です。

まとめ

思ってたよりも簡単にGitHubのリポジトリへのpushでCloud Runにデプロイすることができました。
次回はstrapiの管理画面で記事を作成・更新したときにもGridsomeのビルドとデプロイができるようにしたいと思います。

次回

https://zenn.dev/mseto/articles/strapi-starter-blog-webhook

Discussion