前回のあらすじ

構成を決めた。

この記事ですること

  • Strapi/mongoDBの導入
  • つなげてブラウザで確認

ローカル環境

macOS Catalina

$ node -v
v12.18.3
$ yarn -v
1.22.4
$ docker -v
Docker version 19.03.12, build 48a66213fe

nodeが使える環境であればどこでもいいです。
mongoのインストール部分は適宜読み替えてください。

開発スタート

https://strapi.io/blog/build-a-static-blog-with-gatsby-and-strapi
素晴らしい記事があるので基本的にはこれの通りにやりましょう。
とはいえ、変更したい部分もあったので順に説明していく。

まずは作業ディレクトリ作成。

mkdir dreamer 
mkdir dreamer/dreamer-strapi 
cd dreamer/dreamer-strapi

名前は今回実際に使ったもの。
自由なので適当にどうぞ。

次にバックエンドの雛形を作る。

yarn create strapi-app app

success Installed "create-strapi-app@3.1.4" with binaries:
      - create-strapi-app
Creating a new Strapi application at /Users/tsukasamurata/test/dreamer-strapi.

? Choose your installation type Custom (manual settings)
? Choose your default database client mongo
? Database name: dreamer-strapi
? Host: 127.0.0.1
? +srv connection: false
? Port (It will be ignored if you enable +srv): 27017
? Username:
? Password:
? Authentication database (Maybe "admin" or blank):
? Enable SSL connection: No

mongoDBを使いたいのでカスタムインストールでDBにmongoを選ぶ。
他はEnterで飛ばしてOK。認証は掛けたほうがいいと思うがどうせ外部からアクセスできない場所に置くことになる。

作成後、GraphQLのプラグイン導入。
Gatsby側との通信でGraphQLを使うのでスキーマの確認などで便利。 

cd app
yarn strapi install graphql

そして起動。

yarn develop

mongoDBが入ってる人は起動するけど、私は起動しなかった。
ここでローカルにmongoDBを入れてもいいのだが、開発にmacのDBを使うというのも気持ち悪い。
ということで、Dockerで開発することに決めた。
設定ファイルは以下の通り。

~/dreamer/dreamer-strapi/docker-compose.dev.yml

version: '3'

services:
  strapi:
    container_name: strapi
    build:
      context: ./app
      dockerfile: Dockerfile.dev
    environment:
      - PORT=1337
      - ADMIN_JWT_SECRET=fdc557d845496da740a345a1e5dfc04e
      - DATABASE_HOST=db
      - DATABASE_PORT=27017
      - DATABASE_NAME=dreamer-strapi
    ports:
      - 1337:1337
    volumes:
      - ./app:/strapi
      - hoge:/strapi/node_modules
    depends_on:
      - db

  db:
    container_name: mongo
    image: mongo
    environment:
      - MONGO_INITDB_DATABASE=dreamer-strapi
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
    restart: always
volumes:
  hoge:

https://github.com/strapi/strapi-docker
まずはdocker-composeなのだが、Dockerfile内でStrapiのイメージを使っているので、上のURLにあるような環境変数が渡せる。
デフォルトの設定だと大体こんな値になって、DBに認証掛けている場合などは項目が増えるはず。
ポートも変更なしで先程作ったapp以下をマウント。
db側はmongoのイメージを使用してこちらも特に変わった設定はなし。
dbディレクトリはカレント直下に作っておこう。

問題はvolumesのhogeってなんだよということ。
これはappをマウントした際、node_modulesもマウントされる。
そしてその中の一つにmacとlinuxで互換性のないものがあるらしく、そのままでは起動しない。
そこでhogeボリュームにnode_modulesをマウントしてapp側ではなかったことにすることで問題なく起動できるようにしている。

~/dreamer/dreamer-strapi/app/Dockerfile.dev

FROM strapi/base:12

WORKDIR /strapi

COPY ./package.json ./
COPY ./yarn.lock ./

RUN yarn install

RUN rm -rf node_modules/sharp
RUN yarn add sharp

EXPOSE 1337

CMD ["yarn", "develop"]

こちらもシンプルで、/strapiにマウントされたものを使って起動しているだけ。
sharpというライブラリが上で話した問題のもの。一度削除してLinux環境下で再度追加している。

この2ファイルを配置した上で ~/dreamer/dreamer-strapi で起動。

docker-compose -f docker-compose.dev.yml up -d

ビルドが始まってコンテナが2つ立ち上がれば成功。

strapi     |  Project information
strapi     |
strapi     | ┌────────────────────┬──────────────────────────────────────────────────┐
strapi     | │ Time               │ Mon Aug 31 2020 15:38:36 GMT+0000 (Coordinated … │
strapi     | │ Launched in        │ 9330 ms                                          │
strapi     | │ Environment        │ development                                      │
strapi     | │ Process PID        │ 36                                               │
strapi     | │ Version            │ 3.1.4 (node v12.18.2)                            │
strapi     | │ Edition            │ Community                                        │
strapi     | └────────────────────┴──────────────────────────────────────────────────┘
strapi     |
strapi     |  Actions available
strapi     |
strapi     | Welcome back!
strapi     | To manage your project 🚀, go to the administration panel at:
strapi     | http://localhost:1337/admin
strapi     |
strapi     | To access the server ⚡️, go to:
strapi     | http://localhost:1337

こんな表示が出てくるので http://localhost:1337にアクセスすると…

間違ってダークモードをオンの状態で撮ったので黒いですが本来は白い。
ここでユーザー登録をすればStrapiの導入は一旦完了となる。
この後に記事のスキーマを決めていくことになるが、Gatsby側との連携になってくるので後で説明していく。

今回はここまで。
次回はフロント担当のGatsbyの導入とStrapiとの連携をしていきたい。

次の記事： Gatsby+Strapiでブログを構築した話（３） ローカル環境構築 - Gatsby

Copyright© 2020 akeno