Strapiを使って簡単にブログ作成 #1

作成日：

next.js

やりたいこと

自分でブログを作りたい

概要

フロントエンドを Next.js で ISR を実現し、Strapi を使ってバックエンドのことをあまり考えずにブログを作成します。デプロイ場所は Heroku でデータの保存場所は Heroku の PostgreSQL と Cloudinary を利用します。

環境

macOS Big Sur バージョン 11.5.2

使用技術

  • Next.js
  • Strapi
  • Cloudinary
  • heroku

strapi とは

ヘッドレス CMS と呼ばれるコンテンツの作成と管理を行うバックエンドの機能を備えているものです。そして、Strapi はコマンドで簡単に実装から運用をすることができます。しかし、ヘッドレス CMS である strapi は CMS と違いフロントエンド側は別で運用する必要があります。

strapi の準備

  1. Heroku CLI のインストール ※heroku のアカウントは既に作成済みであることを想定しています。
$ brew tap heroku/brew && brew install heroku

Mac 以外のインストール方法は、こちらを参考にしてください

  1. Heroku へのログイン
$ heroku login
  1. strapi のプロジェクトを作成 --quickstrat を入れると、ローカル環境で SQLite のデータベースが使われます。この SQLite のデータベースは Heroku とは互換性がないので注意が必要です。
$ npx create-strapi-app@latest [アプリ名] --quickstart

strapi のアプリが起動するので、一旦停止させます。 そして、作成した strapi のフォルダに移動しましょう。そして、git を作成します。

$ cd [アプリ名]
$ git init
$ git add .
$ git commit -m "first commit"
  1. Heroku プロジェクトの作成 新しく Heroku プロジェクトを作成します。
$ heroku create [新しく作成するプロジェクト名]
$ heroku git:remote -a [新しく作成するプロジェクト名]
  1. Heroku で PostgreSQL を利用できるように設定 下記のコマンドで heroku で postgresql を利用できるようになります。"hobby-dev"は無料プランでの利用になります。容量などの制限があるので、データ量が増えたら有料プランに変更するのを検討する必要があるかもしれません。
$ heroku addons:create heroku-postgresql:hobby-dev

下記のコマンドを入力して、"DATABASE_URL"に url がが表示されたら、データベースが作成されています。この url は"postgres:// USERNAME : PASSWORD @ HOST : PORT / DATABASE_NAME"で構成されています。

$ heroku config
  1. Heroku で PostgreSQL を利用するための準備 下記でインストールするライブラリは、5.で説明した url から USERNAME や PASSWORD などを分割するためのものです。
$ yarn add pg pg-connection-string

pg-connection-string をインストールしたら、config 直下に env/production ディレクトリを作成してください。そして、./config/env/production/database.js を作成してください。

database.js

const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = () => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});

次に、コマンドラインから下記のコマンドを入力してください。これは、作成したデータベースが本番環境で使用されるように設定しています。

$ heroku config:set NODE_ENV=production
  1. 本番環境の Strapi サーバー構成を作成 ./config/env/production/server.js を作成してください。
server.js

module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});

次に、下記のコマンドを入力してください。環境変数に本番環境の url をセットします。

$ heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)

次に、./config/middlewares.js を下記のように修正してください。これで、Strapi 上で

middlewares.js

module.exports = [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          "media-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::favicon",
  "strapi::public",
];
  1. Heroku へのデプロイ
$ git add .
$ git commit -m "Update database config"
$ git push heroku HEAD:main

これでデプロイができました。下記のコマンドで strapi のアプリを開いてみましょう。画像を取り扱わない場合は、ここまでの準備で strapi を利用することができます。

$ heroku open

スクリーンショット 2022-03-11 17.24.23.png

次に、url に"/admin"を追加して、アクセスしてください。するとアカウントの登録をするページに遷移します。アカウントを作成してください。メールアドレスとパスワードは次回ログイン時に必要になります。

heroku にデプロイした strapi で画像保存

heroku に strapi をデプロイして、strapi で画像を取り扱おうとすると、heroku の無料サーバーではサーバーがスリープするたびに画像が消えてしまいます。異なるサービスに画像を保存して、strapi で扱うようにします。そのサービスとして、本記事ではCloudinaryというサービスを使わせていただきます。Cloudinary とは簡単に説明すると、画像や動画を保存することができるストレージサービスです。本記事ではフリープランを利用します。それでは、Cloudinary と heroku を連携させましょう。

  1. Cloudinary のアカウント登録 アカウント登録はこちらのサイトを参考にしてください。
  2. ライブラリのインストール strapi と Cloudinary を連携させるためのツールをインストールします。
$ yarn add @strapi/provider-upload-cloudinary
  1. 環境変数のセット 下記の画像のように Cloudinary のマイページに"Cloud Name"、"API Key","API Secret"が書かれているのでそれを環境変数にセットします。

cloudinary_key.png

$ heroku config:set CLOUDINARY_NAME="~~~"
$ heroku config:set CLOUDINARY_KEY="~~~~"
$ heroku config:set CLOUDINARY_SECRET="~"
  1. ファイル作成 ./config/env/production/plugins.js を作成してください。
plugins.js

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
    },
  },
});
  1. Heroku へ push
    変更を heroku へ push します。
$ git add .
$ git commit -m "Cloudinaryへの画像追加機能の実装"
$ git push heroku master
  1. 画像の追加ができるか確認 Strapi の Media Library で何か画像を追加してみましょう。

スクリーンショット 2022-03-11 19.01.29.png
Strapi で下記のように画像を追加しました。

スクリーンショット 2022-03-11 19.01.55.png すると、Cloudinary のストレージを確認すると、strapi で保存した画像が追加されていることが確認できます。 スクリーンショット 2022-03-11 19.03.00.png これで、Strapi で保存した画像が消えずに済みます。

終わりに

本記事では、Strapi を Heroku へのデプロイ、Cloudinary の連携までを行いました。次回の記事では、ブログ作成のためのデータを作成していきます。

参考資料

By kiyo

© 2022 ki-log