ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた（microCMS + Amazon S3）

この記事では、S3 の静的ウェブページにお知らせ記事の投稿システムを 1 時間ほどの作業で実装する方法をご紹介しています。

#AWS

#Amazon S3

#microCMS

#ヘッドレスCMS

#HTML

M.Shimizu

2021.08.11

この記事は公開されてから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バケットにアップロードします。

公開状態にするため「アクセス許可」の設定で「パブリック読み取りアクセス権の付与」にチェックを入れてアップロードします。