🚀

Astro + microCMS のサイトをデプロイする(SpearlyCLOUD編)

2023/02/03に公開

Heroku

Astro + microCMS のサイトをSpearly CLOUD を使ってデプロイする

Spearly CLOUD を利用した Astro のデプロイを試してみたくなったので、試してみた記録です。

Spearly CLOUD とは?

日本のユニマルという会社が開発している国産の静的サイトホスティングサービスです。

デプロイしたときの動画を見ていただけると簡単さがわかると思います。

https://youtu.be/FuqSo9qfxOg

昨今、Heroku の有料化や Netlify の組織プライベートレポジトリの有料化などあって、代替できるサービスがなかったのですが、Spearly CLOUD は現在は無料で使えるということなので、代わりとなりそうです。
(Cloudflare も良いのですが、404 リダイレクト設定が出来ないのが地味にきつかったりする)

https://cloud.spearly.com/

基本的な機能は以下の通りです。

GitHub 連携
CDN
カスタムドメイン

Spearly CLOUD は Node.js / GitHub だけですが、基本的な機能は備えているので、静的サイトだけを運用されていたような方はすんなり移行できそうです。
また、無料で使える範囲が広いので、Netlify と違って組織のプライベートレポジトリもデプロイできます。

	Netlify(Starter)	Heroku(Eco and Basic)	Spearly CLOUD(free)
対応言語	Node.js,Go	Node.js, Ruby, Java, PHP, Python, Golang, Scala,Clojure, etc...	Node.js
料金	無料	$5 (Eco Dyno)	無料
レポジトリ	GitHub,GitLab,Bitbucket,Azure DevOps	GitHub,GitLab,Bitbucket	GitHub

Astro プロジェクトの準備

Astro ？

SSG フレームワークです。
Astro を使ったヘッドレスCMSとの接続についての詳しい説明は以下の記事を参考にしてください。

今回利用するレポジトリ

今回は以下のレポジトリを利用します。

Astro + microCMS を利用したサンプルサイトを用意しました。以下のように microcms の記事からデータを取得して静的ファイルを生成しています。

index.astro

---
import { microcmsApiClient } from "../lib/microcms"
const contents = await microcmsApiClient.getList({endpoint: 'blogs'})
const posts = contents.contents.map(c => {
	return {
		title: c.title,
		alias: c.id,
		description: c.description,
		date: c.date,
		image: c.image.url,
	}
})
---
    <section class="container">
      <ul>
        {posts.map((post) => (
          <li>
            <figure>
              <img src={`${post.image}`} alt={`${post.description}`} />
            </figure>
            <a href={`/posts/${post.alias}/`}>
              <h2>{post.title}</h2>
            </a>
            <time>{post.date}</time>
            <p>{post.description}</p>
          </li>
        ))}
      </ul>
    </section>

ローカルでのビルド確認

API キー等を設定してローカルビルドできるか確認しておきます。
なにはともあれ、まずは関係パッケージのインストールから。

➜  microcms-blog-template git:(master) yarn install
yarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 5.37s.

関係パッケージのインストールが終わったら、環境変数 API_DOMAIN と MICROCMS_API_KEY を指定してビルドします。(API_DOMAIN は microCMS のエンドポイントのサブドメイン部分なので注意してください。https://○○.microcms.com/ の○○の部分)

API_DOMAINで指定するサブドメイン

➜  microcms-blog-template git:(master) ✗ API_DOMAIN=mh90sq9pk6 MICROCMS_API_KEY=XXXXXXXXXXXXXXXXXXXXXX yarn build
yarn run v1.22.19
$ astro build
02:53:34 PM [build] output target: static
02:53:34 PM [build] Collecting build info...
02:53:34 PM [build] Completed in 15ms.
02:53:34 PM [build] Building static entrypoints...
02:53:35 PM [build] Completed in 599ms.

 generating static routes
▶ src/pages/index.astro
(node:4993) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  └─ /index.html (+641ms)
▶ src/pages/posts/[alias].astro
  └─ /posts/first-blog/index.html (+155ms)
Completed in 0.82s.

02:53:35 PM [build] 2 page(s) built in 1.44s
02:53:35 PM [build] Complete!
Done in 2.78s.

これで dist/にビルド結果の静的ファイルが出来上がります。

Spearly CLOUD の設定

ローカルでビルドが出来る事を確認したら、早速 Spearly CLOUD でデプロイしてみます。

アカウントの登録

Spearly CLOUD にアクセスしたら、右上にある 新規登録＋ ボタンからアカウントを登録します。

https://cloud.spearly.com/

Google か GitHub のアカウントがあればそのまま Spearly アカウントを作成できます。ヘッドレス CMS のサービスである Spearly CMS と同じアカウントなので一度登録しちゃえば、Spearly CLOUD / Spearly CMS 両方使えるようです。

アカウント登録で認証方法を選ぶ画面

サイトの登録

ログイン直後はサイトを登録してないので以下のようにサイトリストには何も表示されません。

何も登録されていないサイトリスト

右上の サイトを追加する ボタンを押してサイトを登録しましょう。
まずはGitHubとの連携を設定します。
ボタンを押すとプロバイダーの選択が現れますが、GitHubしかないのでGitHubを選択します。

ソースコードのプロバイダを選択

その次にレポジトリの選択画面になります。もし自分の所属するレポジトリが出てこない場合はレポジトリを追加ボタンを押してGitHubの設定ページで公開設定することで表示されるようになります。

レポジトリ選択画面

最後にサイトのデプロイ設定をします。基本はデフォルトの設定で問題ないのですが、ROOTパスと環境変数だけ追加が必要です。

ROOTパス : ./dist/
環境変数

環境変数名	値
`NODE_VERSION`	`18`
`API_DOMAIN`	microCMS のエンドポイントのサブドメイン
`MICROCMS_API_KEY`	microCMS で作成したAPIキー

デプロイ設定

これでしばらくすればビルドが終わってデプロイが完了します。

デプロイサイトの確認

サイトリストに追加したサイトが表示されているので、サイトをクリックしてサイトを表示できます。

公開後のサイト

これでデプロイは完了です。あとは GitHub のファイルが更新されるたびにデプロイが自動で実行されるようになります。

すごい簡単に Astro のサイトがビルドできました！