Quden Dev Doc

Appearance

ローカル開発環境でCDNへアクセスする設定 ​

これは何？ ​

ローカル開発環境で画像や動画などのCDN上のリソースにアクセスできるようにするための設定方法を説明しています。

背景 ​

Quden では IP アドレス制限 機能を実現するために、CloudFront の前段に Lambda@Edge を配置して IP アドレスをチェックしています。

この仕組みにより、ローカル開発環境からCDN上のリソース（画像、サムネイル、動画など）にアクセスしようとすると、IP アドレスチェックで弾かれてしまい、リソースが表示されなくなります。

そのため、開発者のローカル環境の IP アドレスを AWS AppConfig の許可リストに追加することで、IP アドレスチェックをバイパスする必要があります。

設定手順 ​

1. 自分の IP アドレスを確認 ​

まず、自分の現在の IP アドレスを確認します。以下のようなサービスで確認できます：

2. AWS AppConfig で設定を更新 ​

  1. AWS コンソールにログイン

    • アカウント: toruca-dev
    • サービス: AWS AppConfig を開く

  2. 設定を開く

    • アプリケーション名: app-quden-dev-main
    • 設定プロファイル: config-quden-dev-profile-main

  3. JSON を更新

    既存の JSON の allowedList.trustedIpAddressList に自分の情報を追加します：

    json
    {
  "allowedList": {
    "trustedIpAddressList": [
      {
        "name": "Ota",
        "ipAddress": "123.45.56.890"
      },
      {
        "name": "YourName",
        "ipAddress": "your.ip.address.here"
      }
    ]
  }
}

  4. 設定をデプロイ

    JSON の更新を保存し、デプロイを実行します。デプロイが完了すると、数分以内に設定が反映されます。

TIP

AppConfig の詳しい更新手順については、AppConfig で許可リストを更新する方法 や Feature Flags も参照してください。

3. 動作確認 ​

ローカル開発環境を起動し、画像やサムネイルが正しく表示されることを確認してください。

注意点 ​

  • IP アドレスが変わった場合: 自宅やオフィスのネットワーク環境によっては、IP アドレスが動的に変わる場合があります。その場合は、再度 IP アドレスを確認して AppConfig を更新する必要があります。
  • VPN 使用時: VPN を使用している場合、VPN 経由の IP アドレスを登録する必要があります。
  • 複数の環境: 自宅とオフィスなど、複数の場所で開発する場合は、それぞれの IP アドレスを登録してください。

トラブルシューティング ​

画像が表示されない ​

  1. IP アドレスが正しく登録されているか確認
  2. AppConfig のデプロイが完了しているか確認（数分かかる場合があります）
  3. ブラウザのキャッシュをクリアして再読み込み
  4. ネットワーク環境が変わっていないか確認（IP アドレスが変わっている可能性）

関連ドキュメント ​