この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。
サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。
今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました！
※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。
ヘッドレスCMSとは？
CMS（Content Management System）とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。
最も代表的な CMS といえば WordPress が思い浮かびますが、導入するにはWebサーバーやデータベースの管理が必要なため、既存のウェブサイトを置き換えるのは難しいケースもありました。
ヘッドレスCMSとは「ビューのないCMS」を意味し、CMSのユーザー管理やコンテンツ管理の部分だけをサービスとして提供するものです。
ビュー（外観）の部分はユーザー側で自由に実装できるため、既存のウェブサイトをそのまま運用しながら、部分的にCMS化するような使い方が可能です。
サーバーレスで静的コンテンツのみを提供する S3 の静的ウェブサイトホスティング機能とは、まさに相性抜群なのです！
今回の構成（概略図）
やってみた
AWS のアカウントはすでに取得済みの前提で、まずはヘッドレスCMS側のユーザー登録、コンテンツの作成を行っていきます。
ヘッドレスCMSのサービス提供元は多数ありますが、今回は日本製でUIが直感的に分かりやすい「microCMS」を利用します。
手順1. microCMS のユーザー登録、コンテンツ作成
1-01.
microCMS 公式サイトの「無料で始める」をクリックし、遷移先のページでメールアドレスとパスワードを入力して「登録する」をクリックします。
1-02.
登録したメールアドレスに認証コードが届くので、それをフォームに入力して「送信する」をクリックします。
1-03.
管理画面にログインできたら、まずは「サービス名」を登録しましょう。
「サービス」とはプロジェクトのような、ユーザー管理できる単位のこと。ここでは「S3ウェブサイト テスト」とします。
「サービスID」はサービスのサブドメインになるので、半角英数のユニークな文字列を設定しましょう。
1-04.
サービス画像は、任意でサイトのロゴやアイコンなどを設定します。
1-05.
プランを選択します。有料プランもありますが、ここではテストのため無料の「Hobby」プランを選択して「完了」ボタンをクリックします。
1-06.
サービスの登録が完了しました。表示されるサービスのURLをクリックして、APIの作成をしていきましょう。
1-07.
まずはコンテンツを投稿する枠（API）を作成していきます。
ここではAPI名を「お知らせ」、エンドポイント名を「news」とします。
1-08.
APIの型を選択します。今回はリスト形式とします。
1-09.
APIスキーマ（インターフェース）を定義していきます。
ここではコンテンツを投稿する時の入力項目を自由に設定できますが、今回はシンプルに「title（記事タイトル）」「body（記事本文）」「image（記事画像）」の3つの項目のみとします。
入力フィールドの種類はそれぞれ「テキストフィールド」「リッチエディタ」「画像」にしています。
1-10.
「お知らせ」というAPI（コンテンツの投稿枠）ができました。
まだコンテンツがないので、「+追加」ボタンで追加していきます。
1-11.
記事タイトル、記事本文、記事画像を入力していきます。
ここは一般的なブログ投稿と同様なので説明は割愛しますが、リッチエディタに設定したフィールドでは画像の挿入やテキストの装飾ももちろん可能です。
記事を作成できたら、右上の「公開」ボタンをクリックしましょう。
1-12.
同じ要領で、3つほど記事を作成しておきます。
記事の投稿が完了したら、右上の「APIプレビュー」をクリックしてみましょう。
1-13.
オレンジの「取得」ボタンをクリックすると、JSONデータの取得テストができます。
ここで表示されるAPIのエンドポイントURLと「X-API-KEY」は後で使用するので、エディタなどにコピペしておきましょう。
ここまでで microCMS 側の設定は完了です。
それでは、ここで作成したコンテンツを表示させる静的ウェブページを S3 上に作成していきます！
手順2. S3 バケットの作成と公開
2-01.
AWSのマネジメントコンソールにログインし、S3バケットを新規作成していきます。
今回は特にドメイン名などを紐づけないため、バケット名は任意で構いません。
後でコンテンツを公開するため「パブリックアクセスをすべてブロック」のチェックは外し、承認にはチェックを入れます。 その他はデフォルト設定でOKです。
2-02.
作成したバケットの「プロパティ」より、「静的ウェブサイトホスティング」の右側の「編集」をクリックします。
2-03.
「静的ウェブサイトホスティング」を「有効にする」を選択します。
「インデックスドキュメント」と「エラードキュメント」は任意ですが、ここでは後で公開するファイル名に合わせて「index.html」に設定し、「変更の保存」をクリックします。
2-04.
静的ウェブサイトホスティングが有効になっていることを確認し、ウェブサイトエンドポイントURLを控えておきましょう。
※現時点ではまだバケット内にコンテンツがないため、表示エラーになります。
以上で、S3 バケットの公開設定は完了です。 それでは、作成したバケット内に配置する静的 HTML ページを作成していきます。
手順3. 静的 HTML ページの作成とアップロード
3-01.
今回必要なファイルは「index.html」と「function.js」の2ファイルのみです。
下記のコードをコピペして、2つのファイルを作成しましょう。
見栄えを整えるための CSS にはフレームワーク「BULMA」を利用しています。
index.html
///// index.html の内容
<!DOCTYPE html>
<html>
<head>
<title>S3 + MicroCMS テスト</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel=stylesheet />
</head>
<body>
<div class="container" style="max-width:960px;">
<!-- 個別記事を表示する部分 -->
<section class="section">
<div class="columns article"></div>
</section>
<!-- 記事一覧を表示する部分 -->
<section class="section">
<h2 class="title is-4">最新のお知らせ</h2>
<div class="columns news-list"></div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="function.js"></script>
</body>
</html>function.js
※ 先ほど手順 1-13 の画面からコピーしたAPIのエンドポイントURL、および「X-API-KEY」を該当箇所に貼り付けます。
※ 手順 1-09 で例と異なるスキーマにした場合は、変数の定義も適宜変更します。
///// function.js の内容
$(function(){
$.ajax({
url: 'https://xxxxxx.microcms.io/api/v1/xxxxx（APIエンドポイントURLが入ります）',
type: 'GET',
dataType: 'json',
headers: {
'Content-Type': 'application/json',
'X-API-KEY': 'xxxx-xxxx-xxxx（X-API-KEYが入ります）'
},
})
.done(function(data) {
var article = '';
var lines = '';
// 各値の取得
$.each(data.contents, function(index, value) {
var date = value.publishedAt.slice(0,10);
var title = value.title;
var body = value.body;
var image = value.image.url;
var id = value.id;
// 個別記事のHTMLを生成
var article_id = location.search.slice(4,20);
if(id === article_id){
article = '<div class="card column is-12">\
<div class="card-image"><img src="'+ image +'" alt="image" width="100%"></div>\
<div class="card-content"><div class="content">\
<h3 class="title is-2">'+ title +'</h3>\
<time datetime="'+ date +'">'+ date +'</time>\
<p>'+ body +'</p>\
</div></div></div>';
$('.article').html(article);
}
// 記事一覧のHTMLを生成
lines += '<div class="card column is-4">\
<a href="./index.html?id='+ id +'">\
<div class="card-image"><img src="'+ image +'" alt="image"></div>\
<div class="card-content"><div class="content">\
<h3 class="subtitle is-5">'+ title +'</h3>\
<time datetime="'+ date +'">'+ date +'</time>\
</div></div></a></div>';
})
$('.news-list').html(lines);
})
.fail(function() {
console.log('failed');
});
});3-02.
上記2つのファイルを作成したら、先ほどのS3バケットにアップロードします。
公開状態にするため「アクセス許可」の設定で「パブリック読み取りアクセス権の付与」にチェックを入れてアップロードします。
以上で静的HTMLページのアップロードは完了なので、ブラウザで動作確認をしていきます。
手順4. 公開したウェブページの動作確認
4-01.
手順 2-04 で確認した S3 バケットのウェブサイトエンドポイントURLをブラウザに貼り付けて、表示確認してみましょう。
ここまでの設定に問題がなければ、先ほど microCMS に投稿した記事の一覧が表示されます。 カードをクリックすると、個別記事ページも表示されるはずです。
以上で、記事投稿システムの実装は完了です！
おわりに
今回作成したのは microCMS の無料プランを利用した簡易的な投稿システムですが、ヘッドレスCMS と組み合わせることで S3 の静的ウェブサイトを簡単にCMS化でき、可能性が広がることをお伝えできたと思います。
本記事では深掘りしていませんが、microCMS のフロントエンド部分の実装については下記のブログでもご紹介していますので、参考にしてみてください！
・ [Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る
・ microCMS と Next.js でブログを作る（SDK 版）
・ microCMS + Gatsby + GitHub Actions + S3 でJamStackのチュートリアル
参考資料
Amazon S3 を使用して静的ウェブサイトをホスティングする - Amazon Simple Storage Service
ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！
microCMS｜APIベースの日本製ヘッドレスCMS
Bulma: Free, open source, and modern CSS framework based on Flexbox
0
