目次
目次
この文書はFramerを学ぶ日本国内のユーザーが日本語資料の不足で経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に有用な情報を追加しました。Framerを使う皆様に少しでもお役に立てれば幸いです。
CloudFrontとは？
CloudFrontはAmazonが提供するコンテンツ配送ネットワーク(CDN)です。
Framerは基本的にアセットを提供するためにCloudFrontを使用します。したがって、一般的な場合では別途CloudFrontの設定は必要なく、ホスティング環境についてもっと制御が必要な場合のみ直接設定する必要があります。
いつ直接設定するのか？
セキュリティポリシー、キャッシングルール、トラフィックルーティングを詳細に制御したい場合
複数のオリジン(Origin)を統合管理する必要がある場合
CloudFront設定方法
Framerプロジェクトで設定(Settings) → ドメイン(Domains)に移動します。
サイトに無料のFramerサブドメイン(例:
my-company.framer.website)を追加してください。
続いて同じメニューでCanonical URLオプションを高度(Advanced)に変更し、ユーザー指定のドメイン(例:
my-site.com)を入力した後、ウェブサイトを公開してください。
注意: 必ずmy-company.framer.websiteのようなユーザー指定のFramerサブドメインを使用し、<something>.framer.app形式の基本ドメイン(Base domain)は使用しないでください。
AWS CloudFront配信の作成
AWS Management ConsoleでCloudFrontに移動します。
Create Distributionをクリックします。
Origin DomainにFramerサブドメインを入力してください。重要:
<something>.framer.appではなくmy-company.framer.websiteを使用
基本キャッシュ動作(Cache Behavior)を次のように設定してください。
Viewer protocol policy: HTTPをHTTPSにリダイレクトAllowed HTTP methods: GET, HEAD
（パスワード保護サイトの場合はGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE）Cache policy: CachingOptimizedOrigin request policy: AllViewerExceptHostHeaderResponse headers policy: SecurityHeadersPolicy
オプションを調整したらCreate distributionをクリックしてください。
配布が完了したら、リンクをクリックしてCloudFrontを通じてサイトにアクセスできることを確認してください。
複数オリジンの構成
例えば、/framer-project/パスのみをFramerサイトで提供したい場合
URL | Origin |
|---|---|
my-site.com | https://my-project.vercel.site |
my-site.com/framer-project | https://my-company.framer.website |
既存のCloudFront配布でBehaviors → Create Behaviorを選択します。
Path patternに/framer-project/*を入力してください。そのパスのオリジンとしてFramerプロジェクトを選択します。
前述のキャッシュ・プロトコル・ヘッダーポリシーを同様に適用してください。
保存して配布の完了を待てば、一つのCloudFront配布で二つのオリジンを使用することができます。
ドメイン接続
CloudFront配布にカスタムドメインを追加するにはAlternate Domain Name (CNAME)機能を使用します。注意: エイペックスドメイン(mysite.com)を使用する場合、Route53を使用するのが便利です。
この文はFramer公式ブログの『Hosting with Amazon CloudFront』を翻訳・改編したコンテンツです。
