StrapiとNext.jsを使って静的ウェブサイトを構築

はじめに

弊社のWebサイト(https://itccorporation.jp)は、Next.js、ヘッドレスCMSのStrapiを使って、生成した静的Webサイトです。 ※用語については、下にまとめて簡単に解説があります。

図で示すと、以下のようになっています。

https://itccorporation.jpのソースコードは、GitHubにあります。(https://github.com/itc-lab/itccorporation) 今回は、このソースコードを使い、静的Webサイトを生成するところまでやっていきたいと思います。

Webサーバー（上の図で言うと一番右）のところの解説は省略します。

・Node.jsインストール
・Strapiインストール
・Webサイトソースコードの配置
・Strapi初期設定
・Strapiでデータスキーマ作成
・Strapiでデータ登録
・GraphQL有効化
・Webサーバーへデプロイ

【 Next.js 】

「Next.js」とは、Vercel社が開発したReactのフレームワークです。

Static Site Generator（SSG）・静的サイトジェネレーターとしての役割を果たします。

Next.jsのnext/image(Imageコンポーネント)による画像最適化を使う場合、VercelにデプロイするかCloudinaryなどの外部CDNを使う必要があります。※2021/07現在

【 React 】

「React」とは、Facebook社が開発したJavaScriptのフレームワークです。

コンポーネントと呼ばれる部品（ＵＩ・画面の一部分）ごとに開発ができます。画面更新の際、差分を検出して差分だけ更新するため、動作が速いという特徴があります。

【 静的Webサイト 】

決まった内容を表示するだけのサイトです。ユーザーによって画面が切り替わったり、入力内容によって切り替わったり、サーバー側に何らかの処理が必要な場合は動的Webサイトになります。

【 ヘッドレスCMS 】

まず、「CMS」とは、WordPressのように全体の枠（決まったデザイン）ができあがっていて、その中に記事を書き込みできるなどのコンテンツの管理システムの事です。「ヘッドレスCMS」とは、全体の枠（決まったデザイン）が無く、記事の内容（コンテンツ）だけを登録し、APIによって取り出されるというものです。ヘッドレスCMSの場合、その都度デザインを作らないといけませんが、反面、自由です。ヘッドレスCMS提供サービスは、Contentful、microCMS、Strapi、などいろいろあります。

【 Strapi 】

ヘッドレスCMSの一つですが、クラウドのWebサービスのみならず、ソースコードが公開されているため、それを利用し、自分が管理しているサーバーにヘッドレスCMS、APIを構築できます。

今回の検証環境は、

Ubuntu 20.04.2 LTS

node v14.17.2

になります。

ソースコードの解説は行いません。

Google reCAPTCHAは、設定済みで、キーは取得済みとします。

Node.jsインストール

root権限で作業していますので、全てsudoは省略しています。

パッケージを最新にします。※必須ではありません。

# apt update
# apt upgrade
Do you want to continue? [Y/n]Y

※以降基本的にYのため、-yを付けます。
　-y は、? [Y/n]: のようなときに自動的に y とするオプションです。

curlをインストールします。

# apt install -y curl

node 14.x をインストールします。

# curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
# bash nodesource_setup.sh
# apt install -y nodejs
# node -v
v14.17.2

nodeのバージョンはインストール時期によって異なります。

Node.jsのパッケージ管理システムnpmも同時にインストールされます。

Strapiインストール

空の状態のStrapiをインストールします。
今回、/home/admin/mycorporation_backendにインストールします。

# cd /home/admin
# npx create-strapi-app mycorporation_backend --quickstart
→そのまま起動してくるため、CTRL+Cで停止

【 npx 】

npmで管理されたプログラムの一つです。npxを使うと、オンメモリで依存関係を解決した状態で、引数に指定したプログラムを実行できます。ディスクを汚さず、一度きりしか実行しないプログラムを実行するのに向いています。

Webサイトソースコードの配置

ソースコード展開

https://github.com/itc-lab/itccorporation からソースコードをダウンロードして、独自プロジェクトとします。
Code → Download ZIP で itccorporation-master.zip をダウンロードします。

ソースコードを展開し、ディレクトリをリネームします。
※ここでは、/home/admin/mycorporation_frontendとします。

# cd /home/admin
# unzip itccorporation-master.zip
# mv itccorporation-master mycorporation_frontend
# cd mycorporation_frontend

環境変数変更

環境変数を自分の環境に合わせます。

# cp .env.local.example .env.local
# vi .env.local
GRAPHQL_API=http://localhost:1337/graphql
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

GRAPHQL_API
今回、1337ポートで動くStrapiの機能を利用するため、http://localhost:1337/graphql のままにします。

NEXT_PUBLIC_RECAPTCHA_SITE_KEY
Google reCAPTCHAの「サイトキーをコピーする」に表示される文字列です。

環境変数変更

以下の図のようにシンボリックリンクを作成します。
uploadsディレクトリは、Strapiからアップロードした画像ファイルが格納されるディレクトリになります。

# ln -s /home/admin/mycorporation_backend/public/uploads public/uploads

Strapi初期設定

Strapiを起動します。

# cd /home/admin/mycorporation_backend
# npm run develop

何も設定変更していない時は、1337ポートで起動します。
ブラウザから http://[Strapiを起動したサーバーのIPアドレス]:1337 にて、アクセスします。

「Create the first administrator」をクリックします。
「First name」「Last name」「Email」「Password」「Confirmation Password」を入力し、「LET'S START」をクリックします。 ※「Email」は、ログインＩＤに使われます。メールの設定をしない場合、メールは送信されません。

Strapiでデータスキーマ作成

Strapiでスキーマ（空のテーブル）を作成していきます。

「Content-Types Builder」をクリックします。

「＋Create new collection type」をクリックします。

「Display name」のところに "Available" と入力し、「Continue」ボタンをクリックします。
→ＤＢで言うAvailableテーブルを作成するイメージです。

「Text」をクリックします。

「Name」のところに "name" と入力し、「Short text」にチェックを入れて、「＋ Add another field」ボタンをクリックします。

「Media」をクリックします。

「Name」のところに "logo" と入力し、「Single media」にチェックを入れて、「＋ Add another field」ボタンをクリックします。
→単一画像を登録できるフィールドになります。

・・・以降、下記のスキーマの通りに作成します。
（Textは全て「Short text」、Mediaは全て「Single media」です。）

Relationのところは、以下のように、左側に "seo_Images" を入力して、右矢印が複数のアイコンを選択、右側で Seo-Image を選択します。
→これにより、OpenGraphテーブルのseo_imagesフィールドは、Seo-Imagesテーブルの複数のデータに紐づけが可能になります。
Twitterは、「SINGLE TYPE」→「Create new single type」で作成します。

スキーマ

Strapiでデータ登録

データを登録していきます。

「Availales」をクリックし、「Add New Availables」をクリックします。※作ったのは「Available」テーブルですが、自動的に複数形表示になります。

「Name」：Strapi
「Description」：ストラピ
「Priority」：1
「Logo」：Strapiのロゴ画像をドラッグ＆ドロップ とし、「Save」ボタンをクリックします。
「Publish」ボタンをクリックします。
→「Publish」ボタンを押さないと有効化されませんので、毎回忘れずに押します。
他、以下のように登録していきます。














OpenGraphsの「Seo_images」のところですが、Seo-imageテーブルのデータと紐づけるため、選択します。（複数選択可能です。）

GraphQL有効化

GraphQLインストール

【 GraphQL 】

「GraphQL」とは、Facebookにより開発されたAPI用のクエリ言語です。似たものとして、「REST」がありますが、「GraphQL」の方は、"全部"では無く、"これとこれとこれ"という感じで、あらかじめ対象データを指定して、命令を出せるという特徴があります。

「Marketplace」をクリックし、「GRAPHQL」のところの「Download」ボタンをクリックします。
→しばらくすると、StrapiにGraphQL機能が組み込まれます。

http://[StrapiのサーバーIPアドレス]/graphql にアクセスすると、クエリを発行してテストすることができます。
→この時点では、「Forbidden」が返り、うまくいきません。Strapi側のアクセス権の設定が必要です。

アクセス権の設定

「Settings」→「Roles」→「Public」をクリックします。
「find」、「findone」チェックボックス全てにチェックを入れて、「Save」ボタンをクリックします。
再び、http://[StrapiのサーバーIPアドレス]/graphql にアクセスし、クエリを実行すると、データが取り出せることが確認できます。

動作確認

Strapiが起動（npm run develop）したままで下記の実施が必要です。起動していない場合、データの取り出しに失敗します。

Webサイトのプログラムの方へ戻って、npm installを実行します。
→これにより、package.jsonに書かれた必要なもの全てが自動的にインストールされます。

# cd /home/admin/mycorporation_frontend
# npm install

インストールが終わったら、起動します。

# npm run dev

http://[IPアドレス]:3000/ でアクセスします。

表示されました！

Webサーバーへデプロイ

Webサーバーへデプロイは簡単です。

# npm run build

を実行すると、カレントディレクトリに out ディレクトリができますので、これをドキュメントルートへ移動するだけになります。
→例えば、mv out /var/www/html のようにWebサーバーが参照する場所に置くだけになります。

https://[WebサイトのFQDN]/ でアクセスします。

できました！