Livewireの一時ファイルの置き場所をR2にする まず、Livewireの設定ファイルを作ります。phpの前に./vendor/bin/sailを付けてください。
php artisan livewire:publish --configconfig/livewire.phpができるので、'temporary_file_upload'の中の'disk'を、値を'r2'に変えます。
'temporary_file_upload' => [
'disk' => 'r2',こうすると、画像を選んだときの送り先が変わります。
ここで一度デプロイします。
fly deployLivewireの一時ファイルをR2に変えただけでは画像が保存されない デプロイしたら、画像つきで投稿してみます。
Chromeなら、ページの上で右クリックして「検証」を選び、「Console」タブを開きます。
Access to XMLHttpRequest at 'https://<バケット名>.<アカウントID>.r2.cloudflarestorage.com/livewire-tmp/…'
from origin 'https://<アプリ名>.fly.dev' has been blocked by CORS policy: …これはCORSエラーです。
ブラウザからCloudflare R2への送信をCORSで許可する CORS（Cross-Origin Resource Sharing）は、別のオリジンへの通信を、送り先のサーバーが許可するための仕組みです。
ブラウザは、ページのJavaScriptから別のオリジンへ送る通信を、セキュリティのために制限しています。
これまで画像の送り先は、ページと同じhttps://<アプリ名>.fly.devでした。https://<バケット名>.<アカウントID>.r2.cloudflarestorage.comで、別のオリジンです。PUTで送ってよいか」をR2に確認します。この確認をプリフライトと呼びます。
R2のバケットの「Settings」タブを開いて、「CORS Policy」の「Add」を押します。
[
{
"AllowedOrigins": ["https://<アプリ名>.fly.dev", "http://localhost"],
"AllowedMethods": ["GET", "PUT"],
"AllowedHeaders": ["*"],
"MaxAgeSeconds": 3600
}
]項目
意味
AllowedOrigins
送信を許可するページのURL
AllowedMethods
許可する操作。画像を送るのがPUT、読み出すのがGET
AllowedHeaders
送信に付けるヘッダー。*はどれでも許可するという意味
MaxAgeSeconds
ブラウザが確認の結果を覚えておく秒数。3600は1時間
AllowedOriginsには、本番のURLと、ローカルで開いているURLを書きます。http://localhostです。php artisan serveならhttp://localhost:8000のようにポート番号まで書きます。
保存したら、ページを再読み込みして、もう一度画像つきで投稿してください。
R2に残るLivewireの一時ファイルを自動で消す 一時ファイルは、投稿した後もバケットのlivewire-tmpというフォルダに残ります。
そこで、R2の「Object Lifecycle Rules」で、livewire-tmp/で始まるファイルだけを1日後に削除します。store()で指定したposts/などのフォルダに保存されているので、消えません。
バケットの「Settings」タブにある「Object Lifecycle Rules」の「Add」を押して、次のように入力します。
Rule name：livewire-tmp Apply to objects with the following prefix：livewire-tmp/ 「Delete uploaded objects after」にチェックを入れて、1 Day 「Save changes」を押して、一覧にlivewire-tmpのルールが「Enabled」で表示されれば完了です。
Fly.ioのサーバーの台数を増やして確認する 準備ができたら、台数を増やします。
fly scale count 2fly statusでサーバーが2行になっていることを確認し、画像つきで投稿と編集をしてみてください。
Laravelで動画もR2にアップロードするときの注意点 動画も、画像と同じようにstore()でR2に保存できます。
1つ目は、入力チェックと表示です。imageやmax:2048のようなルールを書いている場合は、動画に合わせて変えます。<img>ではなく<video>タグを使います。
Livewireの一時ファイルをサーバーに置く設定では、初期設定で12MBまでです。config/livewire.phpの'temporary_file_upload'で上限を変えます。maxの単位はKBなので、次の例は100MBです。max_upload_time（単位は分）も合わせて延ばします。
'temporary_file_upload' => [
'rules' => ['required', 'file', 'max:102400'],
'max_upload_time' => 30,2つ目は、容量です。
3つ目は、配信です。r2.devのURLは本番向けではなく、転送速度が制限されることもあります。
Cloudflare R2の費用とバケットの削除方法 R2は、保存できる容量が毎月10GBまで、ファイルを書き込む操作が毎月100万回まで、読み出す操作が毎月1,000万回まで無料です。
使わなくなったときは、バケットの「Settings」タブの一番下にある「Danger Zone」で、「Empty Bucket」の「Empty」を押して中身を空にしてから、「Delete bucket」の「Delete」で削除できます。
AIプログラミングスクール「SiiD」について AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。
SiiDの特徴
現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜 学割あり（35%オフ） こんな方におすすめ
未経験・文系・社会人からITエンジニア転職を本気で目指したい方 独学に限界を感じている方 費用を抑えながら実務スキルと転職サポートを両立したい方 「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。
