2
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【AWS S3 Cloud Front】Laravel からS3に画像を保存する

Last updated at Posted at 2019-10-16

概要

S3バケットを作成し、Laravelから使えるようにするためのメモです

参考記事

一番参考にした記事
[Route53とCloudFrontとS3で静的コンテンツをホスティングするメモ] (https://qiita.com/buta/items/06a7e147d865fb862783)

S3バケットの作成

AWSマネジメントコンソールからS3を開き、「バケットを作成する」を押す

スクリーンショット (143)_LI.jpg

「バケット名」と「リージョン」のみ入力し次に進む

スクリーンショット (146)_LI.jpg

「パブリックアクセスを全てブロック」にチェックを入れる

また、「システムのアクセス許可」を無効にしておきます

スクリーンショット (147)_LI.jpg

設定の内容を確認して「バケットを作成」を押します

スクリーンショット (148)_LI.jpg

スクリーンショット (149)_LI.jpg

これでS3バケットの作成が完了しました

AWSのアクセスキーを準備する

こちらの記事でIAMを使ったマネジメントコンソールへのアクセス制御を行っているのが前提です。

AWSのマネジメントコンソールのIAMを選択し以下の表示になったら

1 ユーザを選択
2 「認証情報」
3 「アクセスキーの作成」

の順に進むと以下の画面になる

スクリーンショット (152)_LI.jpg

csvのダウンのロードを行っておく

スクリーンショット (151)_LI.jpg

S3とLaravelを結びつける

filesystemを入れます

cd /var/www/{プロジェクト名} && composer require league/flysystem-aws-s3-v3

.envを編集

以下を足します

AWS_ACCESS_KEY_ID={上で取得したアクセスキー}
AWS_SECRET_ACCESS_KEY={上で取得したシークレットアクセスキー}
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET={上で作ったバケット名}

具体的な使い方

使いたいControler

使いたいコントローラに以下を足す


use Illuminate\Support\Facades\Storage;

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

// S3に格納する処理
public function store(Request $request) {

//リクエストから画像を受ける
$image = $request->file('image');

// 第一引数:保存場所(バケット内)のパス
// 第二引数:保存したい画像
// 第三引数: 外部からアクセスするのに必要らしい
Storage::disk('s3')->putFile('/',$image,'public');
}

AWS S3のバケット内を確認して画像が保存されていれば成功です

スクリーンショット (153)_LI.jpg

CloudFront経由でのアクセス設定

マネジメントコンソールから「Cloud Front」を選択し以下の画面へ
Create Distributionを押下

スクリーンショット (185)_LI.jpg

以下の画面でWEBの方のGet Startedを押下

スクリーンショット (186)_LI.jpg

「Origin Domain Name」で上で作ったs3を選択し
それ以外はそのままで下にスクロールし、次に進みます

スクリーンショット (187)_LI.jpg

画像では「status」がIn Progressとなっていますが、
Deployedとなれば完了です

スクリーンショット (188)_LI.jpg

Cloud Front のサブドメイン設定

Route53 でs3(cloud front)用のサブドメインを設定します

【前提】ドメインの設定は終わっている

###cloud front 用SSL発行しなおす

スクリーンショット (239)_LI.jpg

スクリーンショット (240)_LI.jpg

スクリーンショット (242)_LI.jpg

スクリーンショット (247)_LI.jpg

そのまま右下の「確認」を押下

スクリーンショット (213)_LI.jpg

右下の「確認とリクエスト」を押下

スクリーンショット (214)_LI.jpg

ドメインの「▶」押すと出てくる、「Route53でのレコードの作成」の青いボタンを押し、

その後「続行」を押下

スクリーンショット (215)_LI.jpg

直後は画像のように検証保留中となっていますが、この部分が「発行済み」に変わると完了です

スクリーンショット (217)_LI.jpg

再びCloud Front の Distrubution のEditに戻るとCustom SSL Certificateが選択可能になっています。チェックを入れた後、先ほど取得したSSL証明書を選択し、編集を終了します。

スクリーンショット (244)_LI.jpg

その後、DistributionのDomain Nameをコピーしておきます

スクリーンショット (241)_LI.jpg

Route53でサブドメイン設定

Route53で既に作成してあるホストゾーンを選択し以下の画面に入り、

①「レコードセットの作成」を選択。
②右側に現れるフォームの「名前」の部分でサブドメインを設定し、値にコピーしたDomain Nameをペーストする。タイプを「CNAME - 正規名」を選択
③作成ボタンを押す

これで、今設定したサブドメイン/ファイルパスで画像にアクセスすることができます

スクリーンショット (249)_LI.jpg

2
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?