Strapiのランニングコスト

利用サービス① heroku

• 合計 70USD(980円)

  • コンテナ - Hobby ($7/dyno/月)
  • DB(Postgresql) - Hobby Dev Basic (無料)

    • 10000行まで無料
    • 同時接続20

利用サービス② AWS-S3

• 前提 画像保存量 5GB／月の読取回数 100万回／月の書込回数 1000回
• 合計 0.50USD （70円）

  • 毎月の保存金額　0.13 USD（5GB * 0.025USD/GB ）
  • 画像読取 0.37 USD (1,000,000回 * 0.00000037USD/回 )
  • 画像書込 0.0047 USD (1000回 * 0.00000037USD/回 )

できるようになること

• Dockerを使って、ローカルでStrapiV4の開発(設定)ができる。
• HerokuにStrapiをデプロイする。
• HerokuにStrapiを本番モードで起動する。
• AWS-S3にStrapiのストレージを設定できる。
• StrapiV4でGraphQLを利用できるようにする。

やらないこと

• Strapiに接続するフロントエンドの開発

最終完成図

ローカル開発環境

• Docker環境

  • Strapiコンテナー

    • nodeコンテナーをベースに作られている。nodeでstrapiが起動しているコンテナー
  • Postgresql コンテナー

    • Strapiから接続するDBコンテナー
• AWS S3（設置は任意）

  • Strapiからアップロードしたメディアを保存する。
  • 設置は任意。開発環境で設置しなくてもいいが、本番と近しい環境にしておいた方が何かと便利なので設置。（エラー等があった場合気軽にローカルで検証できるため）

本番環境

• heroku

  • Dyno
  • heroku PostgreSQL
• AWS S3

必要な事前準備

Dockerのインストール

• https://www.docker.com/products/docker-desktop
• 開発環境の設定に必要です

AWS S3のBucket作成と、アクセス権限の発行

• AWSのS3にアクセスし、開発用のbucketと、本番用のbucketを作成します、
• StrapiからアクセスするIAMを作成します。

  • 開発用bucketにアクセスできる、ACCESS_KEYとACCESS_SECRETを控えます。
  • 本番用のbucketにアクセスできる、ACCESS_KEYとACCESS_SECRETを控えます。
• 具体的なやり方は下記記事等をご参考ください

  • https://morizyun.github.io/infrastructure/aws-s3-with-iam-policy.html

Herokuの契約

• https://jp.heroku.com/
• アカウントを作成し、ブラウザでログインしておきます。

AWSのS3設定する

# app/配下で実行すること 
yarn add @strapi/provider-upload-aws-s3

module.exports = ({ env }) => ({
  upload: {
    provider: 'aws-s3',
    providerOptions: {
      accessKeyId: env('AWS_ACCESS_KEY_ID'),
      secretAccessKey: env('AWS_ACCESS_SECRET'),
      region: env('AWS_REGION'),
      params: {
        Bucket: env('AWS_BUCKET_NAME'),
      },
    },
  },
}); 

module.exports = ({ env }) => [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", `${env("CDN_BASE_URL")}`],
          "media-src": ["'self'", "data:", "blob:", `${env("CDN_BASE_URL")}`],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::favicon",
  "strapi::public",
];

version: "3"
services:
  strapi:
    image: strapi/strapi
    environment:
      DATABASE_CLIENT: postgres
      DATABASE_NAME: strapi
      DATABASE_HOST: postgres
      DATABASE_PORT: 5432
      DATABASE_USERNAME: strapi
      DATABASE_PASSWORD: strapi
      AWS_ACCESS_KEY_ID: # 開発用BucketにアクセスできるIAMのKEY
      AWS_ACCESS_SECRET: # 開発用BucketにアクセスできるIAMのSECRET
      AWS_REGION: # AWSのREGION
      AWS_BUCKET: # 開発用Bucket名
      CDN_BASE_URL: # S3ベースURL 例：https://s3.ap-northeast-1.amazonaws.com/example-example/

# ctrl + cで既存のプロセスを終了後、下記コマンド入力でもう一度起動
docker-compose up

設定が正しいかを確認

GraphQLを設定する

@strapi/plugin-graphqlのインストール

docker-compose run strapi bash

yarn add @strapi/plugin-graphql

GraphQLの読取権限の付与

GraphQLの実行をテスト

クライアントからアクセスするエンドポイント

以上がローカル開発環境の解説でした。

ここまででやったことの復習

• Docker-imageを作り、Strapiを起動する
• 最初のテーブルを作りレコードを追加する
• AWSのS3設定する
• GraphQLを設定する

ローカルで開発をすすめていきましょう

本番デプロイ

git add .
git commit -m "Update database config"

git push heroku main

heroku open

heroku logs --tail

GraphQLの公開権限の設定

本番起動時の確認事項

S3にアップロードできるかを確認

レコード作成できるかの確認

本番環境の課金について

終わりに