GiitHub에서 strappi-starter-gridsome-blog를 자동으로 디버깅해 보십시오

저번 클라우드 런으로 설계된 strapiGridsome Blog Starter를 GiitHub에 누르면 자동으로 디버깅을 실행합니다.
https://zenn.dev/mseto/articles/strapi-starter-blog
https://zenn.dev/mseto/articles/strapi-starter-blog-cloud-run

사전 준비

GiitHub 계정

Google Cloud SDK 준비

마지막으로 사용한 Google Cloud SDK 프로젝트.
VScode에서 glocloud 디렉터리를 열고 Remote-Contaainer를 실행하여 컨테이너에 들어갑니다.
다음 명령을 사용하여 현재 항목이 마지막으로 사용된 항목인지 확인합니다.

$ gcloud config list

사용할 항목이 아닌 경우 다음 명령을 사용하여 항목을 변경합니다.

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

Cloud Source Repositories API 활성화

Cloud Source Repositories API를 활성화합니다.

$ gcloud services enable cloudresourcemanager.googleapis.com

GiitHub에 strapi 창고 만들기

GiitHub에 strapi의 창고를 만듭니다.
GiitHub 홈 페이지의 제목 메뉴에서 "+"를 클릭하여 "New repository"를 선택합니다.
페이지에 Repository name을 입력합니다.
여기서 Prevate를 선택하고 Create repository를 클릭합니다.

GiitHub에 Strapi 항목 push

VScode로 돌아가 터미널에서 다음 명령을 입력하여 만든 창고의push strapi 프로젝트를 만듭니다.

# 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에서 지속 디버깅 설정

GiitHub에 push가 있으면 Cloud Run에서 구축 및 디버깅으로 설정됩니다.
Google Cloud Platform의 Cloud Run 페이지에서 strap블로그를 선택합니다.

[설정 지속 디버깅]을 클릭합니다.

창고 공급자에서 GiitHub을 선택합니다.
GiitHub과 아직 합작하지 않았을 때 "인증"을 클릭하십시오.

인증을 클릭하면 다음이 표시되고 계속을 클릭합니다.

GiitHub으로 마이그레이션하고 로그인하면 인증 확인 화면이 표시되며 "Authorize Google Cloud Build"를 클릭합니다.

Cloud Build 설정 화면으로 돌아가 GOOGLE CLOUD BUILD 설치를 클릭합니다.

"Only select repositories"에서 strapi의 창고를 선택하고 "Save"를 클릭합니다.

Cloud Build의 설정 화면으로 돌아가 사용 규칙을 표시하고 확인한 후 다음을 선택합니다.

Build Type에서 Docker file을 선택하고 저장을 클릭합니다.

창고와 연결이 성공하면 첫 번째 구축이 자동으로 실행됩니다.

GiitHub에서 push를 한 후 설계되었는지 확인

strapi의 관리 화면의 URL을/admin에서/dashboard로 변경하여 GiitHub에서push 처리가 진행되는지 확인하십시오.
VS코드에서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'),
    },
  },
});

저장한 후push는GiitHub의 창고에 저장됩니다.
Google Cloud Platform의 Cloud Run 페이지 또는 Cloud Build 페이지에서 디버깅이 수행되었는지 확인할 수 있습니다.
depro가 끝나면 strapi의 URL/admin에 액세스하면'Not Fond'가 표시되고, strapi의 URL/dashboard에 액세스하면 로그인 화면이 표시되면 성공합니다.
Gridsome도 마찬가지로 설정합니다.

GitHub에 Gridsome 저장소 만들기

GiitHub 페이지에서 Gridsome 저장소를 만듭니다.

Gridsome의gitignore 만들기

VS코드로 돌아갑니다.gitignore를 만듭니다.
/gridsome-blog/.gitignore

*.log
.DS_Store
node_modules
coverage
dist
pnp-e2e
.env

Gridsome 프로젝트를 GiitHub에 push

VScode 터미널에서 다음 명령을 입력하여 만든 저장소의 push Gridsome 항목을 입력합니다.

$ 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 Plaatform의 Cloud Run 페이지에서 gridsome블로그를 선택합니다.

[설정 지속 디버깅]을 클릭합니다.

Manage connected repositories를 클릭하여 Gridsome 저장소를 추가합니다.

Only select repositories에서 Gridsome 창고를 선택하고 Save를 클릭합니다.

Cloud Build의 설정 화면으로 돌아가 사용 규칙을 표시하고 확인한 후 다음을 선택합니다.

Build Type에서 Docker file을 선택하고 저장을 클릭합니다.

창고와 연결이 성공하면 첫 번째 구축이 자동으로 실행됩니다.

GiitHub에서 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>

저장한 후push는GiitHub의 창고에 저장됩니다.
디버그 완료 후

농담하다

이렇게 되면 성공이야.

총결산

생각보다 간단하게push로GiitHub의창고를CloudRun으로디자인했습니다.
다음에 strapi의 관리 화면에서 글을 제작하고 업데이트할 때도 Gridsome의 구축과 디자인을 할 수 있을 거라고 생각합니다.

다음번

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