<p>StrapiのAPIの権限周りが分かりづらかったのと、公式のDockerイメージを使ってのStrapiの構築の情報があまりなかったので記事にしました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c4e3a6a177417" src="https://embed.zenn.studio/card#zenn-embedded__c4e3a6a177417" data-content="https%3A%2F%2Fhub.docker.com%2Fr%2Fstrapi%2Fstrapi" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hub.docker.com/r/strapi/strapi" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hub.docker.com/r/strapi/strapi</a></p>
<h2 id="headlesscms%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#headlesscms%E3%81%A8%E3%81%AF" aria-hidden="true"></a> HeadlessCMSとは</h2>
<p>記事を書いたり保存したりのバックエンドの機能だけを持っていて、記事を表示するフロント側の機能を持たないCMSのことです。</p>
<p>APIやGraphQLを用いてフロント側で記事を表示します。</p>
<p>メリットとしては、フロント側の技術は何を使ってもいいのでかなり自由度が高いことだと思います。</p>
<h2 id="strapi%E3%82%92docker%E3%81%A7%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#strapi%E3%82%92docker%E3%81%A7%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B" aria-hidden="true"></a> StrapiをDockerで起動する</h2>
<p>StrapiをDockerで起動する設定について説明していきます。</p>
<h3 id="docker-compose%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#docker-compose%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> docker-composeの設定</h3>
<p>まずはdocker composeの設定からです。</p>
<div class="code-block-container"><pre><code>$ mkdir strapi
$ cd strapi
$ vi docker-compose.yml
</code></pre></div><div class="code-block-container"><pre><code>version: '3'
services:
  strapi:
    image: strapi/strapi
    environment:
      DATABASE_CLIENT: mysql
      DATABASE_HOST: mysql
      DATABASE_PORT: 3306
      DATABASE_NAME: strapi
      DATABASE_USERNAME: strapi
      DATABASE_PASSWORD: strapi
      DATABASE_SSL: 'false'
    volumes:
      - ./app:/srv/app
    ports:
      - '1337:1337'
    depends_on:
      - mysql
    tty: true

  mysql:
    image: mysql
    command: mysqld --default-authentication-plugin=mysql_native_password
    volumes:
      - ./data:/var/lib/mysql
    ports:
    - '3306:3306'
    environment:
      MYSQL_ROOT_PASSWORD: strapi
      MYSQL_DATABASE: strapi
      MYSQL_USER: strapi
      MYSQL_PASSWORD: strapi
    cap_add:
      - SYS_NICE
</code></pre></div><p>以上でdockerの準備は終わりです。</p>
<h3 id="strapi%E3%82%92docker%E3%81%A7%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B-1">
<a class="header-anchor-link" href="#strapi%E3%82%92docker%E3%81%A7%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B-1" aria-hidden="true"></a> StrapiをDockerで起動する</h3>
<p>次にDockerでStrapiを起動していきます。</p>
<div class="code-block-container"><pre><code>$ docker-compose up
</code></pre></div><p>これで起動は完了です。</p>
<p>注意点としては、以下の場所で10~15分程度止まります。<br>
裏側で実行自体はされているので、終了などせずに待ってください。</p>
<div class="code-block-container"><pre><code>strapi_1  | Starting your app...
</code></pre></div><h3 id="strapi%E3%81%AE%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#strapi%E3%81%AE%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> Strapiの起動</h3>
<p>以下が表示されたらStrapiの起動は完了です。</p>
<div class="code-block-container"><pre><code>strapi_1  | Welcome back!
strapi_1  | To manage your project 🚀, go to the administration panel at:
strapi_1  | http://localhost:1337/admin
strapi_1  |
strapi_1  | To access the server ⚡️, go to:
strapi_1  | http://localhost:1337
</code></pre></div><h2 id="strapi%E3%81%A7%E3%81%AE%E8%A8%98%E4%BA%8B%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#strapi%E3%81%A7%E3%81%AE%E8%A8%98%E4%BA%8B%E4%BD%9C%E6%88%90" aria-hidden="true"></a> Strapiでの記事作成</h2>
<p>Strapiの記事作成までの使い方を説明していきます。</p>
<h3 id="%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> アカウントの作成</h3>
<p>まずは <a href="http://localhost:1337/admin" target="_blank" rel="nofollow noopener noreferrer">http://localhost:1337/admin</a> にアクセスします。</p>
<p>以下のようにアカウントの作成画面になるので、情報を入力してきます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--ytcFqX1D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/3b5e1f5d-f3b6-0099-4d87-841d6fcb1b13.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>パスワードは大文字を含めないとアカウント作成できないので注意しましょう。</p>
<h3 id="strapi%E3%81%A7%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%AE%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#strapi%E3%81%A7%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%AE%E6%BA%96%E5%82%99" aria-hidden="true"></a> Strapiでの記事の作成の準備</h3>
<p>Strapiでの記事の作成の準備をしていきます。</p>
<h4 id="1.%E5%B7%A6%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AEcontent-types-builder-%E3%82%92%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#1.%E5%B7%A6%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AEcontent-types-builder-%E3%82%92%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 1.左のサイドバーの<code>Content-Types Builder</code> を選択</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--o--E8-zX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/5ec58afe-b511-d79f-553b-33ef6b25f28e.png" alt="image.png" loading="lazy" class="md-img"></p>
<h4 id="2.create-new-collection-type-%E3%82%92%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#2.create-new-collection-type-%E3%82%92%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> 2.<code>Create new collection type</code> を選択</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--9dB4gcz7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/061ec1ec-e096-2314-0dcb-cde43f7c6514.png" alt="image.png" loading="lazy" class="md-img"></p>
<h4 id="3.%E5%90%8D%E5%89%8D%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%80%81%E3%80%8C%E7%B6%9A%E3%81%91%E3%82%8B%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B">
<a class="header-anchor-link" href="#3.%E5%90%8D%E5%89%8D%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%80%81%E3%80%8C%E7%B6%9A%E3%81%91%E3%82%8B%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B" aria-hidden="true"></a> 3.名前を入力して、「続ける」を押下</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--5oL3B25---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/a761ac0d-29af-1a4f-4900-78fa5ba004b8.png" alt="image.png" loading="lazy" class="md-img"></p>
<h4 id="4.title-%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#4.title-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 4.Title の設定</h4>
<p>Textを選択します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--MaYypnG---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/ee1b58c1-8aaa-2fca-c771-5d343700c0a9.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>Nameは <code>Title</code> と打ち込んで <code>Add another field</code> を押下します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--rUFfC2nl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/464543c2-5466-ba78-a1de-014c5d3861b7.png" alt="image.png" loading="lazy" class="md-img"></p>
<h4 id="5.%E6%AC%A1%E3%81%AB%E5%85%88%E7%A8%8B%E3%81%A8%E5%90%8C%E3%81%98%E8%A6%81%E9%A0%98%E3%81%A7-rich-text-%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%80%81name%E3%81%AB%E3%81%AF-text-%E3%81%A8%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6-%E3%80%8C%E7%B5%82%E4%BA%86%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#5.%E6%AC%A1%E3%81%AB%E5%85%88%E7%A8%8B%E3%81%A8%E5%90%8C%E3%81%98%E8%A6%81%E9%A0%98%E3%81%A7-rich-text-%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%80%81name%E3%81%AB%E3%81%AF-text-%E3%81%A8%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6-%E3%80%8C%E7%B5%82%E4%BA%86%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> 5.次に先程と同じ要領で <code>Rich Text</code> を選択し、Nameには <code>Text</code> と入力して 「終了」を押下します</h4>
<h4 id="6.%E5%8F%B3%E4%B8%8A%E3%81%AE%E3%80%8C%E4%BF%9D%E5%AD%98%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B">
<a class="header-anchor-link" href="#6.%E5%8F%B3%E4%B8%8A%E3%81%AE%E3%80%8C%E4%BF%9D%E5%AD%98%E3%80%8D%E3%82%92%E6%8A%BC%E4%B8%8B" aria-hidden="true"></a> 6.右上の「保存」を押下</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--Zv-YDBYr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/c2d75eb1-8a29-cca1-8251-0a21daf12ed6.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>サーバーのリスタートが始まるので、ターミナルで以下のように出たらページリロードしてください。</p>
<div class="code-block-container"><pre><code>strapi_1  | Welcome back!
strapi_1  | To manage your project 🚀, go to the administration panel at:
strapi_1  | http://localhost:1337/admin
strapi_1  |
strapi_1  | To access the server ⚡️, go to:
strapi_1  | http://localhost:1337
</code></pre></div><h3 id="%E8%A8%98%E4%BA%8B%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E8%A8%98%E4%BA%8B%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 記事の作成</h3>
<p>記事の作成していきましょう。</p>
<h4 id="1.%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F-articles%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#1.%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F-articles%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> 1.サイドバーで作成した <code>Articles</code>を選択します</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--rRrfEnYW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/a4a5c243-fa8c-3a90-2dcc-3b787b7887c0.png" alt="image.png" loading="lazy" class="md-img"></p>
<h4 id="2.articles%E3%82%92%E8%BF%BD%E5%8A%A0%E3%82%92%E6%8A%BC%E4%B8%8B">
<a class="header-anchor-link" href="#2.articles%E3%82%92%E8%BF%BD%E5%8A%A0%E3%82%92%E6%8A%BC%E4%B8%8B" aria-hidden="true"></a> 2.<code>Articlesを追加</code>を押下</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--RmE4-gpr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/a2fab52e-4b30-2d32-1324-531ca425cb19.png" alt="image.png" loading="lazy" class="md-img"></p>
<h4 id="3.%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%8F">
<a class="header-anchor-link" href="#3.%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> 3.記事を書く</h4>
<p>以下のように記事を書けます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--KaVq9KeT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/b8da8188-7aed-6e4b-a8bd-aa8d995f7a3c.png" alt="image.png" loading="lazy" class="md-img"></p>
<p><code>Title</code> は先程追加したTextフィールド<br>
<code>Text</code> はRich Textフィールドです。</p>
<p>Rich Textフィールドに関してはマークダウンで書いていくことができます。<br>
他にも日付などのフィールドがあるので、必要なら使ってみてください。</p>
<h4 id="4.%E4%BF%9D%E5%AD%98%E3%82%92%E3%81%97%E3%81%A6%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#4.%E4%BF%9D%E5%AD%98%E3%82%92%E3%81%97%E3%81%A6%E5%85%AC%E9%96%8B" aria-hidden="true"></a> 4.保存をして公開</h4>
<p>公開したらAPIで記事を配信できるようになります。</p>
<h2 id="strapi%E3%81%AEapi%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#strapi%E3%81%AEapi%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> StrapiのAPIの使い方</h2>
<p>StrapiでのAPIの使い方を説明してきます。</p>
<p>デフォルトだとAPIを叩いても以下のように権限で引っかかってしまったりするので少し設定が必要です。</p>
<div class="code-block-container"><pre><code>GET http://localhost:1337/articles
</code></pre></div><p><img src="https://res.cloudinary.com/zenn/image/fetch/s--UAnBBwiN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/c60ff321-9aa1-e0bd-2dc6-1a4adb8fb984.png" alt="image.png" loading="lazy" class="md-img"></p>
<h3 id="%E6%A8%A9%E9%99%90%E8%A8%AD%E5%AE%9A%E3%81%AE%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E6%A8%A9%E9%99%90%E8%A8%AD%E5%AE%9A%E3%81%AE%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 権限設定の方法</h3>
<p>サイドバーの設定 &gt; ロールと権限 &gt; Public の順に選択していきます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--bHEJna4N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/aa1d358f-c1cf-833a-f28c-24a80e07b1f2.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>以下のようにAPIで使いたい権限を選択します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--zECP3ZBo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/f0d413cc-4ee9-5d3a-4969-45b233b54068.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>今回は記事の閲覧のみをしたいので <code>find</code> <code>findone</code> の2つにチェックを入れます。</p>
<p>右上の<code>Save</code> を選択して設定終了です。</p>
<h3 id="api%E3%82%92%E5%8F%A9%E3%81%8F">
<a class="header-anchor-link" href="#api%E3%82%92%E5%8F%A9%E3%81%8F" aria-hidden="true"></a> APIを叩く</h3>
<p>先程のAPIを叩くとちゃんと結果が返ってきます。</p>
<div class="code-block-container"><pre><code>GET http://localhost:1337/articles
</code></pre></div><p><img src="https://res.cloudinary.com/zenn/image/fetch/s--O0ykjvDb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/52c88acd-e6d3-a27b-5dd7-fc5ba48ddf3a.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>記事の詳細についても以下のようにAPIを叩けば返ってきます。</p>
<div class="code-block-container"><pre><code>GET http://localhost:1337/articles/1
</code></pre></div><p><img src="https://res.cloudinary.com/zenn/image/fetch/s--_YZ-Qm0g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386018/d1184d84-a396-8bcd-04e3-1b8d1e3991b7.png" alt="image.png" loading="lazy" class="md-img"></p>
<h2 id="strapi%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#strapi%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> Strapiについてのまとめ</h2>
<p>StrapiのDockerでの立ち上げ方と記事の作成方法、APIの設定の方法を説明しました。</p>
<p>簡単に記事の作成までをすることができるのでかなり便利なので試してみてください。</p>
<p>おかしなところや疑問点などありましたら、是非コメント下さい。</p>
<h2 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__73523d25b1fb8" src="https://embed.zenn.studio/card#zenn-embedded__73523d25b1fb8" data-content="https%3A%2F%2Fstrapi.io%2Fdocumentation%2Fdeveloper-docs%2Flatest%2Finstallation%2Fdocker.html%23step-1-create-a-docker-compose-yaml-file" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://strapi.io/documentation/developer-docs/latest/installation/docker.html#step-1-create-a-docker-compose-yaml-file" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://strapi.io/documentation/developer-docs/latest/installation/docker.html#step-1-create-a-docker-compose-yaml-file</a></p>


HeadlessCMSの「Strapi」をDockerで爆速で立ち上げる

Discussion