S3로 올린 이미지가 "403 (Forbidden)"오류로 표시되지 않음

목적

Laravel에서 S3에 올린 이미지를 사이트에서 표시한다.

이미지 업 처리

패키지를 Composer로 설치

"aws/aws-sdk-php": "~3.0",
"league/flysystem-aws-s3-v3": "~1.0",

성능을 높이기 위해 절대적으로 필요한 것은 캐시 어댑터
"league/flysystem-cached-adapter": "~1.0",

S3 드라이버 설정

S3 드라이버의 설정 정보는 config/filesystems.php 설정 파일로 설정

// Default Filesystem Disk
'default' => env('FILESYSTEM_DRIVER', 'local'),

// Default Cloud Filesystem Disk
'cloud' => env('FILESYSTEM_CLOUD', 's3'),

// Filesystem Disks
'disks' => [

    'local' => [
        'driver' => 'local',
        'root' => storage_path('app'),
    ],

    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL') . '/storage',
        'visibility' => 'public',
    ],

    's3' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
    ],
]

env 파일

AWS_ACCESS_KEY_ID=アクセスキーID
AWS_SECRET_ACCESS_KEY=シークレットアクセスキー
AWS_DEFAULT_REGION=ap-northeast-1
AWS_BUCKET=バケット名
AWS_URL=https://s3-ap-northeast-1.amazonaws.com/バケット名/
FILESYSTEM_DRIVER=s3

Laravel의 Controller

//디스크 인스턴스 획득
use Illuminate\Support\Facades\Storage;

//이미지 업로드
저장할 파일의 경로를 지정하고 store 메소드로 업로드
$path = request()->file('file')->store('tmp');
업로드한 이미지를 임시 영역('tmp')에 저장

//url 메소드를 사용하여 지정된 파일의 URL을 가져옵니다.
'url' => Storage::url($path),
s3 드라이버를 사용하는 경우 전체 원격 URL을 반환합니다.

기타 파일 관련 메소드

//파일 검색
$contents = Storage::get('file.jpg');

//파일이 있는지 확인
$exists = Storage::disk('s3')->exists('file.jpg');

//파일 다운로드
return Storage::download('file.jpg', $name, $headers);

이미지 표시

아래 URL로 이미지 표시

img src="https://app-develop.s3.ap-northeast-1.amazonaws.com/Image/H5o2hmClZdGfH5s0d8DNxlkZs6Y8L1xUL0.jpeg

버킷 이름(app-develop)
Amazon 리소스 이름(ARN)(arn:aws:s3:::app-develop)

이미지 표시에 "403 (Forbidden)"오류로 표시되지 않음
원인은 버킷 정책이 공개 상태가 아니기 때문입니다.

버킷 정책 게시 설정

아래의 Policy Generator를 사용하여 json 형식의 정책 정의 작성
ㅡㅡㅡㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ s3. 아마조나 ws. 코 m/포우 cy 겐. HTML



입력 내용은 다음과 같습니다.

・Principal ：　*
特定のアカウントに対して参照可能にする場合は下記：
・Principal ：　権限付与するAWSアカウントID

・AWS Service： Amazon S3

・Actions: s3:GetObject

・ARN:  arn:aws:s3:::app-develop/*

とし、Add Statementを押下。続けて

・Principal ：　*
特定のアカウントに対して参照可能にする場合は下記：
・Principal ：　権限付与するAWSアカウントID

・AWS Service： Amazon S3

・Actions: s3:ListBucket

・ARN:  arn:aws:s3:::app-develop

Statement가 2개 있는 것은 GetObject는 버킷 아래의 객체에 대한 정의이고 ListBucket은 버킷 자체에 대한 정의가 되기 때문입니다.

{
  "Id": "Policy1604544585920",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1604544465312",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::app-develop/*",
      "Principal": "*"
    },
    {
      "Sid": "Stmt1604544535477",
      "Action": [
        "s3:ListBucket"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::app-develop",
      "Principal": "*"
    }
  ]
}

Generate Policy를 누르면, 정책 정의한 json 기술이 표시되므로 카피한다.

S3의 화면에서 버킷의 속성을 표시하고 Permissions-> Edit bucket policy에서 위의 json을 붙여 넣습니다.

이미지 표시 확인

아래 URL로 이미지 확인

img src="https://app-develop.s3.ap-northeast-1.amazonaws.com/Image/H5o2hmClZdGfH5s0d8DNxlkZs6Y8L1xUL0.jpeg

에러 없이 무사 화상 표시되는~~