StrapiでCSPのエラーが発生した際の対処法

概要 Strapiと以下のプラグインを使って、メディアをS3に格納する構成としました。 https://www.npmjs.com/package/@liashchynskyi/strapi-provider-upload-s3-cloudfront その際、以下のエラーが発生し、画像が表示されませんでした。 R e f u s e d t o l o a d t h e i m a g e ' h t t p s : / / x x x / u p l o a d s / y y y . j p g ' b e c a u s e i t v i o l a t e s t h e f o l l o w i n g C o n t e n t S e c u r i t y P o l i c y d i r e c t i v e : " i m g - s r c ' s e l f ' d a t a : b l o b : d l . a i r t a b l e . c o m " . この課題に対して、以下の記事で述べられている通り、./config/middleware.jsを修正することで、この問題を解決することができました。 ...

2024年6月12日 · 1 分 · Nakamura

StrapiのData transferを試す

概要 Strapiにおいて、ローカル環境のデータを公開環境に反映させる機会があり、以下のData transferを使ってみました。 https://docs.strapi.io/dev-docs/data-management/transfer 手順 公開環境側 公開環境側で、Transfer Tokensを発行します。 ローカル環境 公開サイトをhttps://strapi.example.org、tokenをxxxとします。 この時、以下のコマンドにより、ローカル環境のデータを公開環境に反映することができました。 s t r a p i t r a n s f e r - t o h t t p s : / / s t r a p i . e x a m p l e . o r g / a d m i n - t o - t o k e n x x x 既存のデータが上書きされるため、その点はご注意ください。 ...

2024年6月12日 · 2 分 · Nakamura

Strapi v4のGraphQLのソートやページネーション

Strapi v4のGraphQLのソートやページネーションの方法を調べました。以下に記載がありました。 https://docs.strapi.io/dev-docs/api/graphql 具体的には、以下のような形で記述することで、ページネーションやソートを行うことができました。 q } u e b } r l y o m } d } g e a { P t p } t i a } o a a a d t s g t t c t { i o { r r s n t i e ( a a b a p t l u t a i t e g o e d i n s A n t a { { t i o n : { p a g e : 1 , p a g e S i z e : 1 0 } , s o r t : " c r e a t e d A t : d e s c " ) { 参考になりましたら幸いです。 ...

2023年6月16日 · 1 分 · Nakamura

StrapiとAmazon OpenSearchを連携する

概要 StrapiとElasticsearchとの連携にあたり、以下の記事が参考になりました。 https://punits.dev/blog/integrating-elasticsearch-with-strapi/ ソースコードも公開されています。 https://github.com/geeky-biz/strapi-integrate-elasticsearch ここでは、上記の記事を参考にして、Amazon OpenSearchと連携するなど、一部カスタマイズした内容についてメモします。 カスタマイズしたソースコードは以下です。 https://github.com/nakamura196/strapi-integrate-opensearch 修正点 以下について、記事ではindexing_typeとなっていますが、indexing_request_typeとする必要がありました。 https://github.com/nakamura196/strapi-integrate-opensearch/blob/006c533d4d7882fc9779552db31a7b0e2ada5e57/elastic/cron-search-indexing.js#L16 またElasticsearchではなく、Amazon OpenSearchを使用するにあたり、以下のライブラリをインストールする必要があります。 n n p p m m i i n n s s t t a a l l l l @ @ o a p w e s n - s s e d a k r / c c h r - e p d r e o n j t e i c a t l / - o p p r e o n v s i e d a e r r c s h 認証の方法はいくつかあると思いますが、ここでは以下のように変更しました。 ...

2023年5月26日 · 1 分 · Nakamura

StrapiのREST APIの設定など

概要 StrapiのREST APIの一部設定に関する備忘録です。 検索結果の上限を変更する 以下に記載がありました。 https://docs.strapi.io/dev-docs/api/rest/sort-pagination#pagination 具体的には、以下です。 The default and maximum values for pagination[limit] can be configured in the ./config/api.js file with the api.rest.defaultLimit and api.rest.maxLimit keys. m } o ; d r } u e , l s d m w e t e a i . : f x t e a L h x { u i C p l m o o t i u r L t n t i : t s m : i 1 = t 0 t : 0 r { 0 u 2 , e 5 , , 1 0 0 , STATEがDraftのものも含めて取得する デフォルトではSTATEがDraftのものは取得できませんでした。以下の記事が参考になりました。 ...

2023年5月26日 · 1 分 · Nakamura

Auth0 プロバイダーと Strapi のチュートリアル

概要 Auth0 を使用して Strapi を認証する方法を試しました。以下の記事の通りに進めることで、実現することができました。 https://strapi.io/blog/auth0-provider-and-strapi-tutorial-1 ただし、Allowed Callback URLsを指定する箇所で、http://localhost:1337/connect/auth0/callbackとなっている箇所を、http://localhost:1337/api/connect/auth0/callbackに修正する必要がありました。 (参考)github 上記手順を参考に、githubをプロパイダーとして使用する方法もうまく設定できました。

2023年4月24日 · 1 分 · Nakamura

Strapi: 深くネストされたフィールドで結果をフィルタリングする方法

概要 以下での記事で、深くネストされたフィールドで結果をフィルタリングする方法が紹介されています。 https://strapi.io/blog/deep-filtering-alpha-26 上記の通り、コンテンツタイプやフィールドを用意することで、意図した結果を得ることができました。 注意点 上記の記事のコメントにもありますが、本文中で「\」が含まれていますが、これは不要なようです。 誤 G E T / a p i / b o o k s ? f i l t e r s \ [ a u t h o r s \ ] [ h o b b y ] [ $ c o n t a i n s ] = d a n c e 以下のように、「\」なしのクエリにより、意図した結果が得られました。 ...

2023年4月22日 · 1 分 · Nakamura

StrapiにGraphQLを追加する

概要 以下の記事で、StrapiをAmazon Lightsail上に立ち上げました。 今回は、GraphQLを追加して、使用してみます。 GraphQLプラグインのインストール 以下を実行しました。backendなどのパスは適宜読み替えてください。 c y d a r n o p a t d / d b i @ t s n t a r m a i p / i a / p p a l c u h g e i 2 n / - h g t r d a o p c h s q / l b a c k e n d そして、アプリを起動します。 ...

2023年4月12日 · 2 分 · Nakamura

Amazon LightsailでStrapiを動かす(SSL, 独自ドメイン)

概要 Amazon LightsailでStrapiを動かす機会がありましたので、その備忘録です。以下の記事を参考にしました。 https://zenn.dev/holykzm/articles/1e54cc25207657 インスタンス Node.jsを選択します。 メモリは1GB以上のものを選択してください。Lightsail上でビルドする場合、メモリ不足でエラーが発生します。 SSL、独自ドメイン 以下を参考にしてください。 /ja/posts/5772d6c918508a/#独自ドメインの付与 Static IPを付与して、Route 53で独自ドメインを設定し、以下を実行します。 s u d o o p t / b i t n a m i / b n c e r t - t o o l ProxyPassの設定 (より適切な記述箇所があるかと思いますが、)以下を追記します。 # P P r r 末 o o 尾 x x に y y 以 P P 下 a a を s s 追 s s 加 R / e v h e t r t s p e : / l h o t c t a p l : h / s l t o : c 1 a 3 l 3 h 7 s t : 1 3 3 7 / apacheの再起動 ...

2023年4月11日 · 4 分 · Nakamura