tag:crieit.net,2005:https://crieit.net/tags/S3/feed 「S3」の記事 - Crieit Crieitでタグ「S3」に投稿された最近の記事 2021-02-08T12:55:11+09:00 https://crieit.net/tags/S3/feed tag:crieit.net,2005:PublicArticle/16483 2021-01-03T18:28:53+09:00 2021-02-08T12:55:11+09:00 https://crieit.net/posts/S3-Moodle-S3-HTTP-Referer-Moodle 【S3】【Moodle】S3のバケットポリシーで 特定の HTTP Referer へのアクセスの制限 を導入したら、Moodle でリンクした動画が再生できずにハマった <p>Moodleのコンテンツとして<strong>S3に保管しているファイル</strong>をURLモジュールでリンクしているのですが、S3のバケットポリシーを <a target="_blank" rel="nofollow noopener" href="https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-2">匿名ユーザーへの読み取り専用アクセス許可の付与</a> で設定していたため、<br /> ファイルを直リンクできる状態になっていました<br /> あまりよろしい状態とは言えないので、 <a target="_blank" rel="nofollow noopener" href="https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-4">特定の HTTP Referer へのアクセスの制限</a> を導入してみたところ、Moodleの挙動でちょっとハマったので備忘メモしておきます</p> <h1 id="確認済み環境"><a href="#%E7%A2%BA%E8%AA%8D%E6%B8%88%E3%81%BF%E7%92%B0%E5%A2%83">確認済み環境</a></h1> <ul> <li>Moodle (bitnami-moodle-3.8.2)</li> </ul> <h1 id="S3のバケットポリシー"><a href="#S3%E3%81%AE%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC">S3のバケットポリシー</a></h1> <p>こんな感じで、MoodleのURLからのみS3のファイルにアクセスできるようにしてみました</p> <pre><code class="json">{ "Version": "2012-10-17", "Statement": [ { "Sid": "Allow get requests originating from moodle.aroha.test and moodle-staging.aroha.test", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::arohatest/*", "Condition": { "StringLike": { "aws:Referer": [ "http://moodle-staging.aroha.test/*", "https://moodle.aroha.test/*" ] } } } ] } </code></pre> <h1 id="バケットポリシーを変更したら、動画ファイルのリンクで問題発生!"><a href="#%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%82%89%E3%80%81%E5%8B%95%E7%94%BB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E5%95%8F%E9%A1%8C%E7%99%BA%E7%94%9F%EF%BC%81">バケットポリシーを変更したら、動画ファイルのリンクで問題発生!</a></h1> <p>バケットポリシーを変えたところ、以下のようにリンクしている動画ファイルが再生できなくなりました(T T)<br /> PDFファイルへのリンクは問題無く動くので、Moodle側に問題がありそうです</p> <p><a href="https://crieit.now.sh/upload_images/f0fb8c89b9ce6ba32ccbccfdca1230185ff18d543be65.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f0fb8c89b9ce6ba32ccbccfdca1230185ff18d543be65.jpg?mw=700" alt="b7fe208ec86544c2a734fd55e131b643.jpg" /></a></p> <h1 id="問題の回避策"><a href="#%E5%95%8F%E9%A1%8C%E3%81%AE%E5%9B%9E%E9%81%BF%E7%AD%96">問題の回避策</a></h1> <p>URLモジュールでアピアランスをポップアップに設定した動画ファイルは全てNGなので、<strong>自動</strong> or <strong>埋め込み</strong> に変更してみました<br /> (詳しく調べていませんが、ポップアップだと <strong>HTTP Referer</strong> が送られないのかな?)</p> <p><a href="https://crieit.now.sh/upload_images/3c149cd73623ba78add965501b31584a5ff18d7680970.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/3c149cd73623ba78add965501b31584a5ff18d7680970.png?mw=700" alt="9bf1918ab705e6bf7fbd4d02f95692fc.png" /></a></p> <h1 id="回避後の様子"><a href="#%E5%9B%9E%E9%81%BF%E5%BE%8C%E3%81%AE%E6%A7%98%E5%AD%90">回避後の様子</a></h1> <p>Moodleのページ内に動画が埋め込まれますが、ちゃんと再生できました<br /> しかし、これじゃ動画のサイズが小さく固定されて見にくい(T T)</p> <p><a href="https://crieit.now.sh/upload_images/10f715ef6ed37daa534ee74f630432305ff18d94ddf65.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/10f715ef6ed37daa534ee74f630432305ff18d94ddf65.jpg?mw=700" alt="48cab808d912677c2ac3a681fe643787.jpg" /></a></p> <h1 id="埋め込まれた動画のサイズを変える方法"><a href="#%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BE%E3%82%8C%E3%81%9F%E5%8B%95%E7%94%BB%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E6%96%B9%E6%B3%95">埋め込まれた動画のサイズを変える方法</a></h1> <ol> <li><p>メディアプレイヤのプラグインから、VideoJSプレイヤの設定を開く</p> <p><a href="https://crieit.now.sh/upload_images/c2bac5494028ed049b5f99034bd55c7a5ff18dac82212.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c2bac5494028ed049b5f99034bd55c7a5ff18dac82212.jpg?mw=700" alt="fc5ed9d8423a6e807bd8193fc0604b88.jpg" /></a></p></li> <li><p>サイズを制限するのチェックを外して、変更を保存する</p> <p><a href="https://crieit.now.sh/upload_images/70b5d5db05ae01cfba2fdbfe18b7624b5ff18dbee5c89.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/70b5d5db05ae01cfba2fdbfe18b7624b5ff18dbee5c89.jpg?mw=700" alt="2147762179d355b0f77a4fb0275d4d8e.jpg" /></a></p></li> </ol> <h1 id="VideoJSプレイヤの設定変更後の様子"><a href="#VideoJS%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A4%E3%81%AE%E8%A8%AD%E5%AE%9A%E5%A4%89%E6%9B%B4%E5%BE%8C%E3%81%AE%E6%A7%98%E5%AD%90">VideoJSプレイヤの設定変更後の様子</a></h1> <p>ブラウザのウインドウサイズに合わせた動画サイズになり、見やすくなりました (^^)</p> <p><a href="https://crieit.now.sh/upload_images/9812d246d3c3101dcb3c7975a2c514c45ff18dd38fab9.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/9812d246d3c3101dcb3c7975a2c514c45ff18dd38fab9.jpg?mw=700" alt="6c4718708264783637151a3f79ad4c69.jpg" /></a></p> <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <p>moodleでHTTP Refererのアクセス制限をしたS3の動画ファイルをリンクをする場合、アピアランスを<strong>ポップアップ</strong>にすると動画は再生できない。<br /> アピアランスは自動か埋め込みを選択しましょう。</p> arohajiro tag:crieit.net,2005:PublicArticle/14565 2018-10-10T19:35:48+09:00 2018-10-26T08:28:47+09:00 https://crieit.net/posts/Wordpress-S3-SendGrid-Heroku-Composer Wordpressを無料でS3、SendGrid、Heroku、Composerでデプロイする <p><a href="https://crieit.now.sh/upload_images/3e0a99d4c9d3bf6999aa40837f8a26475bbdd5cd82288.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/3e0a99d4c9d3bf6999aa40837f8a26475bbdd5cd82288.png?mw=700" alt="logo-composer-transparent5.png" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/PhilippHeuer/wordpress-heroku">https://github.com/PhilippHeuer/wordpress-heroku</a></p> <p>こちらのGithubにある「Deploy to heroku」ボタンをクリックすることでも構築できるのですが、画像やプラグインを永続的に維持するためにはローカルに構築してcomposer updateしてから差分をgit pushし、同じソースコードをherokuにデプロイする必要があるのでした。</p> <p>いろいろいじってやってみたところ、なんとかできたので、この後もいろいろ試したいと思う。</p> <p>一番苦労した点は、英語版Wordpressを日本語化する方法だった。</p> <p>ローカルでWP CLIを使って日本語化ファイルをダウンロードし、git pushしたらできた。</p> <p><code>wp core language install ja --activate</code></p> <p>参考URL<br /> <a target="_blank" rel="nofollow noopener" href="https://upd.world/wordpress-cloud9/">https://upd.world/wordpress-cloud9/</a><br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/miya0001/items/96a684e2f819f9d8b4a4">https://qiita.com/miya0001/items/96a684e2f819f9d8b4a4</a><br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/fuwamaki/items/8684003bb47197336645">https://qiita.com/fuwamaki/items/8684003bb47197336645</a></p> fk2000