Reverse Proxy環境でのStrapiのセットアップ

リバースプロキシでの Strapi

今回のシチュエーション

フロントエンドはPHPに任せて、バックエンドは何かAPIを使って構築するスタイルが最近多いですが、今回は CodeIgniter + Strapi で構築することになり、プロキシの設定で若干はまった部分もあったので、備忘録を兼ねてまとめておきます。

設定の流れ

Strapiのインストールはすでに終了しているとして、以下の流れでプロキシを設定していきます。インストールは簡単なので、以下のページ等を参考にしてください。localhostではポート1337でStrapiを起動していると想定しています。（PM2でプロセスを管理しています）

リバースプロキシ (OpenLiteSpeed)

Webサーバーでリバースプロキシを設定します。プロキシのプロセッサー名は strapi としています。 extprocessor 内の maxConns 以下は適宜設定してください。今回は、サブドメインでの運用のため、トップディレクトリ / にアクセスしてプロキシへ誘導する設定を context に記述しています。 addDefaultCharset 等は適宜設定してください。

extprocessor strapi {
  type                    proxy
  address                 127.0.0.1:1337
  maxConns                10
  pcKeepAliveTimeout      5
  initTimeout             5
  retryTimeout            0
  respBuffer              0
}

context / {
  type                    proxy
  handler                 strapi
  addDefaultCharset       off
}

セキュリティ関連のエラー対処

上記の設定のままStrapiにアクセスすると、ブラウザでセキュリティヘッダーやCORSに関するエラーが噴き出してきますので、これを修正するために、 config にある（ハズ）の middleware.js を以下のように最低限修正します。（ <YOUR_HOST_NAME> は適宜変更してください）

Security Header

module.exports = [
  ...＜中略＞...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'http:', 'https:'],
          'script-src': ["'self'", "'unsafe-inline'"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  ...＜中略＞...
]

CORS

module.exports = [
  ...＜中略＞...
  {
    name: 'strapi::cors',
    config: {
      enabled: true,
      headers: '*',
      origin: ['http://localhost:1337', '<YOUR_HOST_NAME>'],
    }
  },
  ...＜中略＞...
]

URLの設定

.env ファイルを編集して、URL と PUBLIC_URL を設定します。以下の例で、<YOUR_HOST_NAME> は公開URLを、<PATH_TO_STRAPI> はトップディレクトリであれば省略か公開URLと同じURLで大丈夫ですが、サブディレクトリに置いている場合（例えば api ）、そのサブディレクトリ名を代入します。

URL=<PATH_TO_STRAPI>
PUBLIC_URL=<YOUR_HOST_NAME>

Strapiのビルド

以上の設定が終わったら、忘れずに以下のコマンドでビルドしてStrapiを再起動したら完了です。

$ npm run build