## はじめまして
都内のIT企業でソフトウェアエンジニアとして働いています @daihikamo_jpです
技術的なこと以外での主な関心事は投資、Ethereum、DeFiです

## 書いていきたいこと
主にこのブログでは

- 技術的な記事
  - How To系
  - トラブルシューティング系
  - やってみた系
- 投資系
- その他いろいろ

について書いていきたいと思います！

今後ともぜひよろしくお願いいたします！


ブログを開設しました

blog-title-image

## やりたいこと
本ブログはGCPのGoogle Cloud RunでDockerコンテナを使って運用しています。

Next.jsのSSG（Static Site Generation）を用いているので、記事の更新があるたびにDockerイメージをBuildしてデプロイするステップが必要となります。

ただ、記事を更新するたびにGCPの管理画面からビルドボタンをポチっていましたが、面倒でした。

そこで、今回はContentfulで記事更新がされると、GCPへWebhookの通知を送ってビルドのトリガーが発火するように設定をしたいと思います。

今回この記事で自動化したいことは以下のステップです。

1. Contentfulの記事を更新する
2. ContentfulからGCPへ記事を更新したことを伝える
3. GCPにてトリガーを実行し、Dockerコンテナのビルド＆デプロイを実行する

では、やっていきましょう！

## Webhookとは?
Webhookとは、Webアプリケーション間でデータを共有するための一種の方法です。

Webhookは、Webアプリケーションが別のWebアプリケーションにリアルタイムで通知を送信できるようにします。これにより、イベントが発生した場合に即座にリアクションを取ることができます。

本記事では、Contentfulで記事更新したことを、GCPへリアルタイム通信するため実行イメージを以下のようになります。

**事前準備**

1. GCPにてWebhookを受け付ける用のAPIを用意する
2. ContentfulでWebhookの設定を行う

**Webhookの実行**

4. Contentfulの記事を更新する
5. ContentfulのWebhookが発火し、登録されたGCPへPOSTリクエストが飛ぶ
6. GCPにてPOSTリクエストを受けてトリガーを実行される

## GCP（Google Cloud Run)側の設定手順
では、GCP側で設定を進めていきます。

下記、公式のドキュメントなので、参考にしながら進めていきます。

[Webhook イベントに応答してビルドを自動化する
](https://cloud.google.com/build/docs/automate-builds-webhook-events)

**①Cloud Buildを開く**

Google Cloud Consoleへログインして、Cloud Buildへアクセスします。
そして、メニューから「トリガー」を選んでトリガー一覧を表示させます。

ここで、上部にある「＋トリガーを作成」からトリガーの新規作成ページへ飛びます。

![gcp-trigger-top](//images.ctfassets.net/yrtjh6oukdaf/jSkpDmf9WG8q9D4A9c84O/5377ee11371a1ed5c6d55d8bb2cdf2af/gcp-trigger-top.JPG)

**②トリガーを設定する**

トリガーの設定をしていきます。

名前は適当なものを設定します。
リージョンは特段こだわりはないので、デフォルト設定のままでいきます。

次に、イベントのところで、「Webhookイベント」を選択します。（重要）

![webhook-1](//images.ctfassets.net/yrtjh6oukdaf/4UBHuOHqf6fjGUl6Cfpowr/c3f2f4b57afbb23fdc1bb20689426539/webhook-1.JPG)

Webhookイベントという項目が出るので、ここの設定をしていきます。

まず、Cloud Build and Secret Manager APIを有効化する必要があると表示されるため、有効化を実施する。

次に、「新しいシークレット（Cloud Build で生成）を使用する」を選択して、シークレットを作成します。
シークレット名はなんでもいいです。

![webhoook-2](//images.ctfassets.net/yrtjh6oukdaf/1wCjTUu1YjUW8rmv20UpcT/9a071fc63cc73d0b9aee76cb4b3bd763/webhoook-2.JPG)

残りの設定については、既に登録されているトリガーと全く同じように設定します。
（環境変数も二か所で別々に設定しないといけないのは、少しイケてないなと思いましたが、仕方ないですね、、）

**③Webhook用のURLを控える**

Webhookの設定のところに戻り、「URLのプレビュー表示」を押して出てきたURLコピーします。

このURLはContentful側で設定で利用します。

## Contentful側の設定手順
Contentful側の設定をします。

**①管理画面からWebhookの設定画面にいき、Webhookを新規作成ページを開く**

上部のSettingsからWebhookへアクセスします。

右上の「Add Webhook」からWebhookの新規作成ページへいきます。

![contentful-webhook0](//images.ctfassets.net/yrtjh6oukdaf/3rRL4wLpQUnuCcHFI77tVd/aa9eadce128bd48f80de8cd13426f499/contentful-webhook0.JPG)

**②Webhookの設定をする**

新規項目を開くとNameとURLを設定していきます。

Nameは任意の名前を設定します。
URLについては先程のGCPで表示されたURLを指定します。
![contentful-webhook1](//images.ctfassets.net/yrtjh6oukdaf/3WppfE0excCp1wMowMfQAt/c0b1944086d5412795b1710732af0d04/contentful-webhook1.jpg)

Triggersの項目で、どのイベントでTriggerされるかを定義できます。

デフォルトではすべてのイベントになっていますが、これだと記事作成中の変更でも発火するため、
添付の画像の範囲に設定を行いました。

![contentful-webhook2](//images.ctfassets.net/yrtjh6oukdaf/PxRICb7y5VPOmfy4wkixE/58e3a9594a4c0fbee2d71be0f0a12c81/contentful-webhook2.JPG)

## 動いているか確認する

最後に動作確認です。

既存の記事の最後に改行を入れてPublishしてみます。
次に、Google Cloud Buildの履歴ページへアクセスすると、一番上でビルドが実行中であることが確認できました！！！

![contentful-webhook4](//images.ctfassets.net/yrtjh6oukdaf/5Iu9SlmpF5CsoHDUTK5bzk/b69867e325d4a188cfc880e37960148e/contentful-webhook4.JPG)

（2つ目以下のビルドは環境変数の設定を間違えて停止したものです）

以上、Contentful側の変更をトリガーにGoogle Cloud Runでビルドを行うための設定手順でした！


ContentfulでWebhookを使ってブログを自動更新する

contentful-webhook-top


## Astroとは？
公式サイトでは下記のように説明されています
> Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
## Astroの特徴

### 極力Javascriptを生成しない設計

Astroの一番の特徴は、***デフォルトJavascriptを生成せずにHTMLのみを生成する***ことです。
（ただ、クライアント側でJavascriptを実装する方法も用意されています。）
これにより軽量なWebサイトを構築することができます。

> Astroは、デフォルトでクライアントサイドのJavaScriptを一切使用せずにすべてのウェブサイトを生成します。 React、Preact、Svelte、Vue、SolidJS、AlpineJS、またはLitで作られたフロントエンドUIコンポーネントを使うと、Astroが自動的に前もってHTMLとして生成し、すべてのJavaScriptを取り除いてから、それを表示します。このように、ページ内の未使用のJavaScriptをすべて削除することで、すべてのサイトをデフォルトで高速に保つことができます。
> https://docs.astro.build/ja/concepts/islands/

### 様々なUIフレームワークが使える
あくまでWebフレームワークという立ち位置であるため、React、Preact、Svelte、Vue、Solid、Litといった様々なUIフレームワークを利用できます。

特定のコンポーネントはReactで作って、他はVueで作ることもできるようです。

### クライアント側でのjavascriptの実行（ハイドレーション）もできる
ただ、完全にJSを排除するほど尖った設計ではありません。
クライアント側でのjavascriptの実行をすることも可能です。

これはAstroでは***ハイドレーション***と呼ばれているため今後はハイドレーションと表現します。

### SSR(Server Side Rendering)できる
そして、意外なことにSSR(Server Side Rendering)もできます！
CSRやSSGと違ってサーバーの運用が必要なため、実装にはサーバーランタイムを選択して実装が必要とのことです。

[https://docs.astro.build/ja/guides/server-side-rendering/](https://docs.astro.build/ja/guides/server-side-rendering/)

## 実際に作ってみる
### デフォルトのテンプレートを作る

Next.jsなどの他のフレームワークと同様に、公式のcreateコマンドを実行して質問していくだけで、作成できます。

```npm create astro@latest```

今回はお試しなので、基本全部Yesで進めて、Templateの選択だけBlogを選択しました。

すると以下のような構成でテンプレートを作ってくれます。
![astro-default-directory](//images.ctfassets.net/yrtjh6oukdaf/4F2kaHkJVzWovInMzx1eHa/0e67892f60fbf2b1330dff5c00e54ed6/astro-default-directory.JPG)

ざっと、各フォルダごとの役割を説明したいと思います。
見ての通りNext.jsなどの他のフレームワークとそこまで違いがないため、取っつきやすい印象をうけました。

1. components: HeaderやFooterのようなコンポーネントを置くフォルダです。ReactやVueのコンポーネントもここに配置します
2. pages: URLのパス構造と同じようにファイルが作成されます。[..slug].astroのように動的パスも配置できます
3. contents: pagesで[..slug].astroのような動的なパスに対応したファイルを配置する場所　ブログでいうと記事ファイルを配置しています
4. public: 画像などpublicフォルダ
5. layput: 中身はブログ記事で利用されているComponentファイルでしたが、なぜ切り出してディレクトリにしているかは謎（正直、componentsにまとめてよいかと思いました）
6. styles: CSSファイルをまとめたもの

.astroファイルの構成は、JS部分とHTML部分に分かれているようです。
```---```で前半がJSで後半がHTMLのようです。
記事一覧の取得などJSが必要な処理は前半のJSに処理を記述します。

```
//src/pages/blog/index.astro
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';

const posts = (await getCollection('blog')).sort(
	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
);
---

<!DOCTYPE html>
<html lang="en">

｛中略｝

	<body>
		<Header />
		<main>
			<section>
				<ul>
					{
						posts.map((post) => (
							<li>
								<FormattedDate date={post.data.pubDate} />
								<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
							</li>
						))
					}
				</ul>
			</section>
		</main>
		<Footer />
	</body>
</html>
```

### ハイドレーションを実装してみる
ReactのuseEffect()のようにJavascriptを利用した処理を入れ込むことも可能です。

フレームワークを用いて、ハイドレーションを利用する場合は、```client:load="react"```のようにどのフレームワークを利用するか明示的に伝える必要があります。

では、実際にやってみます。

Reactのコンポーネント（useEffect()を利用したもの）
```
import React, { useState, useEffect } from 'react';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

function TodoList(): JSX.Element {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    setTodos([
      { id: 1, title: 'Todo 1', completed: false },
      { id: 2, title: 'Todo 2', completed: false },
    ]);
  }, []);

  return (
    <div>
      <h2>Todo List</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

```

Astro側での実装

```
  ---
  import BaseHead from '../../components/BaseHead.astro';
  import Header from '../../components/Header.astro';
  import Footer from '../../components/Footer.astro';
  import JustReactComponets from '../../components/justReactComponents';
  {中略}

  ---

  <!DOCTYPE html>
  <html lang="en">

  {中略}

    <body>
      <Header />
      <main>
        <section>
          <TodoList client:load="react" /> 
        </section>
      </main>
      <Footer />
    </body>
  </html>
```
実際にアクセスすると、初期描画時はTodoListは生成されていませんが、
Client側で描画処理がされて最終的に表示されていることが確認できました。

初期描画
![syoki-byouga](//images.ctfassets.net/yrtjh6oukdaf/7A3399KVCtJF7ehdmhUq2w/d5fb78b7edfb85ab7050b54615202159/syoki-byouga.JPG)

描画完了後
![saisyu-byouga](//images.ctfassets.net/yrtjh6oukdaf/1jhtXnFe2nZ4mFMu3LHRX8/b06e1e957b006c896d49ef18bb8191f9/saisyu-byouga.JPG)

仮に、client:loadの部分を削除するとハイドレーションが実施されないため、
ReactのuseEffect()を用いた処理がされず、初期描画時と同じ形で表示されます。

↓client:loadを削除した場合のコード（素のReactコンポーネント）

```
          <TodoList /> 
```
### HTMLを生成する
```npm run build```を実施することで、HTMLファイルを生成することができます。
これをホスティングすることで静的なWebサイトが作成できます。

![static-file-dist](//images.ctfassets.net/yrtjh6oukdaf/44AHQ7v7nAzfGbI4qbypbz/c09e0debaf78608c6008b98b6056f42c/dist.JPG)

## デプロイはどのようにするのか？
デプロイの方法は、SSGのみでいくか、SSRも利用するかどうかで変わってきます。

### 1. SSGのみでいく場合
ざっと手順をまとめると、静的なファイルを生成する→ストレージサービスにホスティングするといった手順となります

① 静的なファイルを生成する
npm run build を実行するとAstroが.distフォルダにホスティングすべきファイルを作る

② Cloud Storageにファイルをホスティングする
自分はGCPを利用しているので、Cloud Storageの方法を引用します。

アップロードするだけなので、とても簡単ですね！

（公式ドキュメントに各ホスティングサービス別にデプロイ方法が書いてあるのはとてもうれしいですね！）

> 1. 新しいGCPプロジェクトを作成するか、既存のプロジェクトを選択します。
> 2. Cloud Storageに新しいバケットを作成します。
> 3. バケットに名前を付け、他の必要な設定を行います。
> 4. distフォルダをバケットにアップロードするか、Cloud Buildを使用してアップロードします。
> 5. allUsersにStorage Object Viewerという権限を新たに追加することで、パブリックアクセスを有効にします。
> 6. ウェブサイトの設定を編集し、エントリポイントとしてìndex.htmlを、エラーページとして404.htmlを追加します。
[https://docs.astro.build/ja/guides/deploy/google-cloud/
](https://docs.astro.build/ja/guides/deploy/google-cloud/)

### 2. SSRも実施する場合
公式ドキュメントだとCloud Runの方法が書いていますが、Node.jsが実行できる環境であればどこでもよさそうです。

> 1. 新しいGCPプロジェクトを作成するか、既存のプロジェクトを選択します。
> 2. Cloud Run APIが有効になっていることを確認します。
> 3. 新しいサービスを作成します。
> 4. Docker Hub上のコンテナを使用するか、Cloud Buildを使用して独自のコンテナをビルドします。
> 5. ファイルが提供されるポートを設定します。
> 6. allUsersにCloud Run Invokerという権限を新たに追加することで、パブリックアクセスを有効にします。
[https://docs.astro.build/en/guides/deploy/google-cloud/
](https://docs.astro.build/en/guides/deploy/google-cloud/)

参考）
Astro.js 簡易チュートリアル Reactを利用したCSR
[https://zenn.dev/thirosue/books/6fa991650c5767/viewer/e0b761S
](https://zenn.dev/thirosue/books/6fa991650c5767/viewer/e0b761)

## 感想
デフォルトではHTMLのみ生成しないという尖ったコンセプトを持ちつつも、クライアント側でもjavascriptを実行できる余地を残すなど開発者のかゆいところにも手が届く設計になっているなと思いました。

また、SSRにも対応して動的な表示もできるので既存のWebフレームワークとも置き換えられるのもGoodですね！

コードは下記に保存しているので、参考にしたい方はどうぞご覧ください
[https://github.com/daichipyon/astro-blog/tree/add-react](https://github.com/daichipyon/astro-blog/tree/add-react)


Astroでブログを作ってみる

placeholder-hero

## はじめに

ソフトウェアエンジニアとして働いているのに、自分のサイトを持っていないのもな～と思いブログを作成しました！
同じようにブログを作成を試みている方へ向けて作成した内容をまとめます

## 要件
ブログを作成するにあたり、まず2つの要件を定めました。
SSG(Static Site Generation)でサクサクした体験を実現したい
CMSを自前で運用するのは面倒なのでCMSサービスを利用したい

そこで、ChatGPTと壁打ちしながら考えた結果、以下の構成にしました。

フロント、バックエンド：Next.js

コンテンツ作成（ヘッドレスCMS）：Contentful

ホスティング：Google Cloud Run

SSGはNext.js以外にもAstroやGatsby.jsも有名ですが、Next.jsが一番メジャーなのでNext.jsにしました（いずれ他も試してみたい）

ContentfulはヘッドレスCMSで、WordPressのように自前のサーバーを準備する必要がなくCMSを構築できます。

GCPにおいてGoogle Cloud Runを使うか、Google App Engineを使うかは特にこだわりはありませんでしたが、DockerになじみがあったのでGoogle Cloud Runにしました。

Github上でマークダウンで記事を書く方法が一般的ですが、記事とプログラムは分離させたい謎のこだわりでヘッドレスCMSを使うことにしました。
（ここは好みによるので、CMSを利用せずにマークダウンで記事を管理でも全然OKと思います）

## Contentfulとの連携
実際に利用してみてわかりましたが、ContentfulのAPIは記事のデータをHTMLに変換して返すのではなく独自のjsonファイルで返します。

Contentfulの仕様に依存してしまうので、この点はContentfulを利用する際に注意すべき点だと思います。
手順としては、まずContentfulと通信する関数を作成します。

    import { createClient } from 'contentful';
    export interface BlogPostFields {
      title: string;
      blogSlug: string;
      isOpen: boolean;
      textSub: string;
      titleImage: {
        fields:{
          file: {
            url: string;
          }  
        }
      };
    }

    export interface BlogPost {
      fields: BlogPostFields
      sys: {
        id: string;
        createdAt: string;
        updatedAt: string;
        revision: number;

      }
    }

    export interface EntryCollection<T> {
      items: T[]
    }

    const client = createClient({
      space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID!,
      accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN!,
    });

    export async function fetchBlogPosts(): Promise<BlogPost[]> {
      const entries: EntryCollection<any> = await client.getEntries();
      if (entries.items) return entries.items;
      console.log(`Error getting Entries for blogPost.`)
      return []
    }

    export async function fetchBlogPostBySlug(slug: string): Promise<BlogPost> {
      const query = {
        limit: 1,
        include: 10,
        content_type: 'title',
        'fields.blogSlug': slug
      };

      const entry: EntryCollection<any> = await client.getEntries(query);

      if (entry.items){
        return entry.items[0];
      } else {
        console.log(`Error getting Entries for blogPost.`);
        return {
          sys: { id: '', createdAt: '', updatedAt: '', revision: 0 },
          fields: {titleImage:{fields:{file:{url:''}}}, title: '', blogSlug: '', isOpen: false, textSub: '' },
        }
      }
    }

## SSG(Static Site Generation)の実施方法
SSG(Static Site Generation)はgetStaticPropsを用いることで実現できます。
getStaticPropsはデプロイ時に実行されStaticなファイルを生成して保存します。

本ブログはトップページと記事ページの二つで、記事データの取得と生成をgetStaticPropsを用いて実施していきます。

また、記事の部分はRich TextというContentful独自の形式が利用できるため、はじめはこれで試してみましたが、挿入したコードブロックに改行が挿入できない問題が発生してマークダウン形式に切り替えました。

具体的には下記のようなコードとなります。
	import { GetStaticPaths, GetStaticProps } from 'next';
	import { BlogPost, fetchBlogPosts, fetchBlogPostBySlug, BlogPostFields } from '../../lib/contentful';

	import { BLOCKS, Block, Inline } from '@contentful/rich-text-types';

	import hljs from 'highlight.js';
	import { unified } from 'unified';
	import html from 'remark-html';
	import markdown  from 'remark-parse';
	import rehype2html from 'rehype-format';

	import dayjs from 'dayjs';
	import Image from 'next/image';
	import articleStyle from '../styles/article.module.css';
	import "highlight.js/styles/atom-one-dark.css";

	import { useEffect } from 'react';

	export default function Home(props: {post:{ fields: BlogPostFields, sys: { createdAt: string }, }, doc: string }) {

	  useEffect(() => {
	    const codeElements = document
	      .querySelectorAll('code')
	    codeElements.forEach((block) => {
	      hljs.highlightBlock(block);
	    });
	  }, []);

	  //const doc = props.fields?.textSub;
	  const titleText: string = props.post.fields?.title;
	  console.log(titleText)

	  const createdAt: string = props.post.sys?.createdAt;

	  const formatedCreatedAt: string = createdAt ? dayjs(createdAt).format('YYYY年MM月DD日') : '';

	  const titleImageUrl: string = 'https:' + props.post.fields?.titleImage?.fields.file?.url;

	  return (
	    <main className='main'>
	      <div className="container">
	        <article className="article">
	          {titleText ? <h1 className={articleStyle.article__title}>{titleText}</h1>
	            : <></>}
	          {createdAt ? <div className={articleStyle.article__createdat}>{formatedCreatedAt}</div>
	            : <></>}
	          {titleImageUrl ? (
	            <div className={articleStyle.title__image__container}>
	              <Image
	                alt={titleText}
	                src={titleImageUrl}
	                width={1200}
	                height={600}
	                className={articleStyle.title__image}
	              />
	            </div>
	          ) : <></>}
	          {    <div dangerouslySetInnerHTML={{ __html: props.doc}} />}
	        </article>
	      </div>

	    </main>
	  );
	}

	export const getStaticPaths: GetStaticPaths = async () => {
	  const posts: BlogPost[] = await fetchBlogPosts();
	  const paths = posts.map((post) => {
	    return {
	      params: {
	        slug: post.fields.blogSlug,
	      }
	    };
	  });
	  return {
	    paths: paths,
	    fallback: false,
	  };
	}

	export const getStaticProps = async (params: { slug: string; }) => {
	  const { slug } = params!;
	  const post = await fetchBlogPostBySlug(slug as string);

	  const processor = unified()
	  .use(markdown)
	  .use(rehype2html)
	  .use(html);

	  const doc:string = (await processor.process(post.fields.bodyText)).value?.toString();
	  return {
	    props: {post, doc}
	  }
	}

	const renderOptions = {
	  renderNode: {
	    [BLOCKS.EMBEDDED_ASSET]: (node: Block | Inline, children: any) => {
	      return (
	        <><Image
	          alt={node.data.target.fields.description}
	          src={`https://${node.data.target.fields.file.url}`}
	          height={node.data.target.fields.file.details.image.height}
	          width={node.data.target.fields.file.details.image.width} /></>
	      );
	    },
	  },
	};

## 感想
仕事ではデザインとCSSは別のチームで実装してもらっているので、不慣れでしたが今回自分でやってみて勉強になりました。

あと、作り始めた当時は「テンプレートは甘え」と思って、素のNext.jsから作成しましたが、今となってはテンプレートをいじる方が効率は良かったと思ってます（笑）
https://vercel.com/templates/next.js/blog-starter-kit
