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

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

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/kousei.svg)

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

<blockquote class="alert">
Webサーバー（上の図で言うと一番右）のところの解説は省略します。
</blockquote>

 

・[Node.jsインストール](#anchor1) 
・[Strapiインストール](#anchor2) 
・[Webサイトソースコードの配置](#anchor3) 
・[Strapi初期設定](#anchor4) 
・[Strapiでデータスキーマ作成](#anchor5) 
・[Strapiでデータ登録](#anchor6) 
・[GraphQL有効化](#anchor7) 
・[Webサーバーへデプロイ](#anchor8) 

 

<blockquote class="info">
【 Next.js 】
「Next.js」とは、Vercel社が開発したReactのフレームワークです。
Static Site Generator（SSG）・静的サイトジェネレーターとしての役割を果たします。
</blockquote>

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

<blockquote class="info">
【 React 】
「React」とは、Facebook社が開発したJavaScriptのフレームワークです。
コンポーネントと呼ばれる部品（ＵＩ・画面の一部分）ごとに開発ができます。画面更新の際、差分を検出して差分だけ更新するため、動作が速いという特徴があります。
</blockquote>

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

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

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

 

<blockquote class="warn">
今回の検証環境は、
<code>Ubuntu 20.04.2 LTS</code>
<code>node v14.17.2</code>
になります。
</blockquote>

<blockquote class="alert">
ソースコードの解説は行いません。
Google reCAPTCHAは、設定済みで、キーは取得済みとします。
</blockquote>

 

<a class="anchor" id="anchor1"></a>

# Node.jsインストール

<blockquote class="warn">
root権限で作業していますので、全てsudoは省略しています。
</blockquote>

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

```sh
# apt update
# apt upgrade
Do you want to continue? [Y/n]Y
```
※以降基本的にYのため、-yを付けます。 
　-y は、? [Y/n]: のようなときに自動的に y とするオプションです。

 

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

```sh
# apt install -y curl
```

 

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

```sh
# 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
```

<blockquote class="info">
<code>node</code>のバージョンはインストール時期によって異なります。
</blockquote>

<blockquote class="info">
Node.jsのパッケージ管理システム<code>npm</code>も同時にインストールされます。
</blockquote>

 

<a class="anchor" id="anchor2"></a>

# Strapiインストール

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

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

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

 

<a class="anchor" id="anchor3"></a>

# Webサイトソースコードの配置
## ソースコード展開
<a href="https://github.com/itc-lab/itccorporation" target="_blank">https://github.com/itc-lab/itccorporation</a> からソースコードをダウンロードして、独自プロジェクトとします。 
Code → Download ZIP で itccorporation-master.zip をダウンロードします。

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image1.png)

 

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

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

 

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

```sh
# 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の「サイトキーをコピーする」に表示される文字列です。

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image2.png" alt="" width="600px">

 

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

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/symlink.svg)

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

 

<a class="anchor" id="anchor4"></a>

# Strapi初期設定

Strapiを起動します。

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

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

「Create the first administrator」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image3.png" alt="" width="600px">
 
「First name」「Last name」「Email」「Password」「Confirmation Password」を入力し、「LET'S START」をクリックします。
※「Email」は、ログインＩＤに使われます。メールの設定をしない場合、メールは送信されません。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image4.png" alt="" width="600px">
 

 

<a class="anchor" id="anchor5"></a>

# Strapiでデータスキーマ作成
Strapiでスキーマ（空のテーブル）を作成していきます。 
 
「Content-Types Builder」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image5.png" alt="" width="600px">
 
「＋Create new collection type」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image6.png" alt="" width="600px">
 
「Display name」のところに "Available" と入力し、「Continue」ボタンをクリックします。 
→ＤＢで言うAvailableテーブルを作成するイメージです。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image7.png" alt="" width="600px">
 
「Text」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image8.png" alt="" width="600px">
 
「Name」のところに "name" と入力し、「Short text」にチェックを入れて、「＋ Add another field」ボタンをクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image9.png" alt="" width="600px">
 
「Media」をクリックします。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image10.png" alt="" width="600px">
 
「Name」のところに "logo" と入力し、「Single media」にチェックを入れて、「＋ Add another field」ボタンをクリックします。 
→単一画像を登録できるフィールドになります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image11.png" alt="" width="600px">
 
・・・以降、下記の[スキーマ](#schema)の通りに作成します。 
（Textは全て「Short text」、Mediaは全て「Single media」です。） 
 
Relationのところは、以下のように、左側に "seo_Images" を入力して、右矢印が複数のアイコンを選択、右側で Seo-Image を選択します。 
→これにより、OpenGraphテーブルのseo_imagesフィールドは、Seo-Imagesテーブルの複数のデータに紐づけが可能になります。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image12.png" alt="" width="600px">
 
Twitterは、「SINGLE TYPE」→「Create new single type」で作成します。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image13.png" alt="" width="600px">
 

<a class="anchor" id="schema"></a>

スキーマ 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image14.png" alt="" width="300px">

 

<a class="anchor" id="anchor6"></a>

# Strapiでデータ登録
データを登録していきます。 
 
「Availales」をクリックし、「Add New Availables」をクリックします。※作ったのは「Available」テーブルですが、自動的に複数形表示になります。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image40.png" alt="" width="600px">
 
「Name」：Strapi 
「Description」：ストラピ 
「Priority」：1 
「Logo」：Strapiのロゴ画像をドラッグ＆ドロップ
とし、「Save」ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image15.png" alt="" width="600px">
 
「Publish」ボタンをクリックします。 
→「Publish」ボタンを押さないと有効化されませんので、毎回忘れずに押します。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image16.png" alt="" width="600px">
 
他、以下のように登録していきます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image17.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image18.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image19.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image20.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image21.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image22.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image23.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image24.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image25.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image26.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image27.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image28.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image29.png" alt="" width="500px"> 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image30.png" alt="" width="500px"> 
OpenGraphsの「Seo_images」のところですが、Seo-imageテーブルのデータと紐づけるため、選択します。（複数選択可能です。） 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image31.png" alt="" width="300px">
 

 

<a class="anchor" id="anchor7"></a>

# GraphQL有効化
## GraphQLインストール
<blockquote class="info">
【 GraphQL 】
「GraphQL」とは、Facebookにより開発されたAPI用のクエリ言語です。似たものとして、「REST」がありますが、「GraphQL」の方は、"全部"では無く、"これとこれとこれ"という感じで、あらかじめ対象データを指定して、命令を出せるという特徴があります。
</blockquote>

「Marketplace」をクリックし、「GRAPHQL」のところの「Download」ボタンをクリックします。 
→しばらくすると、StrapiにGraphQL機能が組み込まれます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image32.png" alt="" width="600px">
 

http://[StrapiのサーバーIPアドレス]/graphql
にアクセスすると、クエリを発行してテストすることができます。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image33.png" alt="" width="600px">
 
→この時点では、「Forbidden」が返り、うまくいきません。Strapi側のアクセス権の設定が必要です。

 

## アクセス権の設定
「Settings」→「Roles」→「Public」をクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image34.png" alt="" width="600px">
 
「find」、「findone」チェックボックス全てにチェックを入れて、「Save」ボタンをクリックします。
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image35.png" alt="" width="600px">
 
再び、`http://[StrapiのサーバーIPアドレス]/graphql` にアクセスし、クエリを実行すると、データが取り出せることが確認できます。 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image39.png" alt="" width="600px">
 

 

## 動作確認

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

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

```sh
# cd /home/admin/mycorporation_frontend
# npm install
```

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

```sh
# npm run dev
```

 

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

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image36.png" alt="" width="500px"> 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image37.png" alt="" width="500px"> 
 
<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image38.png" alt="" width="500px"> 

 

表示されました！

 

<a class="anchor" id="anchor8"></a>

# Webサーバーへデプロイ

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

```sh
# npm run build
```

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

 

![](https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/kousei.svg)

 

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

 

<img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/corporatesite/image36.png" alt="" width="500px"> 

 

できました！

弊社の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サーバーへデプロイ

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

このブログ「ITC Engineering Blog」は、Next.js、ヘッドレスCMSのmicroCMS、GitHub、ホスティングサービスNetlifyで構成されています。いわゆるJamstack構成です。このブログのソースコードは、GitHubにあります。(https://github.com/itc-lab/itc-blog) 今回は、このソースコードを使い、Netlifyにデプロイし、最終的にブログ記事をアップするところまで行いたいと思います。

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

Next.js microCMS GitHub NetlifyでJamstackなブログを公開