---
title: Amazon S3と連携して、Storageにファイルを保存する
category: 外部システム連携
weight: 1
---

Amazon S3との連携方法を解説します。  
Amazon S3と連携することで、Kurocoからアップロードした画像や動画ファイルを、Amazon S3のStorageに格納し利用できます。  

## Amazon S3の設定
### バケットを作成する
[Amazon S3のサイト](https://aws.amazon.com/jp/s3/)へアクセスし、[Simple Storage Service (Amazon S3) の使用を開始する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/49626f199a6c7cc6312ebba11ef0fe89.png)
ルートユーザーでサインインします。  
AWSのアカウントを持っていない場合は[こちら](https://portal.aws.amazon.com/billing/signup)からサインアップしてください。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/00eb9f9bcfc73024acb0803aa888f3a2.png)
[バケットを作成]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0038b186b7e2fccebf45d11f03c2126b.png)
以下のように設定し、[バケットを作成]をクリックします。  

|項目  |値  |
| :--- | :--- |
|バケット名|任意の名称を入力する。(本チュートリアルでは`kuroco-sample`)<br/>※バケット名に`.`(ドット)は使用しないでください。|
|AWSリージョン|アジアパシフィック (東京) ap-northeast-1|
|オブジェクト所有者|[ACL有効]にチェックを入れる。<br/>[希望するバケット所有者]を選択する。|
|このバケットのブロックパブリックアクセス設定|・パブリックアクセスをすべて ブロック：チェックを外す<br/>・新しいアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする：チェックを外す<br/>・任意のアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする：チェックを外す<br/>・新しいパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする：チェックを入れる<br/>・任意のパブリックバケットポリシーまたはアクセスポイントポリシーを介したバケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックする：チェックを入れる|
|パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトが公開される可能性があります。|[現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。]にチェックを入れる|


<a href="https://diverta.gyazo.com/8d33c1a276df94b9b7912c4cb97478f3" className="no-zoom" target="_blank" rel="noopener noreferrer"><img src="https://t.gyazo.com/teams/diverta/8d33c1a276df94b9b7912c4cb97478f3.png" alt="Image from Gyazo" /></a>

### Cross-Origin Resource Sharing (CORS)の設定をする
続いて、Amazon S3のCORSの設定をします。  
Amazon S3のバケットページから先ほど作成したバケット名をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e2e9ceadd2137c21deffa6ef914a187e.png)

[アクセス許可]のタブをクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7fa437f4f0775afb9cab52c4960ae3c5.png)

[Cross-Origin Resource Sharing (CORS)]の[編集]をクリックします。  

<a href="https://diverta.gyazo.com/dca9acdb2f77169a6221e4b3a50f85db" className="no-zoom" target="_blank" rel="noopener noreferrer"><img src="https://t.gyazo.com/teams/diverta/dca9acdb2f77169a6221e4b3a50f85db.png" alt="Image from Gyazo" /></a>

Cross-Origin Resource Sharing (CORS)の編集画面が表示されるので、下記を設定します。  

:::caution
`https://****.g.kuroco-mng.app`の部分はご自身のKuroco管理画面のURLにしてください。  
:::

```json
[
    {
        "AllowedHeaders": [
            "Content-Type",
            "x-amz-acl",
            "x-amz-meta-*",
            "Origin"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://****.g.kuroco-mng.app"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/71ab976bc07851ed801e32103d5733a9.png)
入力が完了したら[変更の保存]をクリックします。

### ポリシーを作成する
次に、ポリシーを作成し、Kurocoに与えるアクセス許可の内容を定義します。  
画面右上のユーザ名から[セキュリティ認証情報]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/86d4cd611b390fd220f060657afca782.png)  
[ポリシー]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a0d648f6500f383f939a5cbb5109fccb.png)
[ポリシーの作成]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ffa28860a7d4754a756fb3d65db289c8.png)
ポリシーの作成画面が表示されるので、JSONのタブを開き、下記を設定します。  
`%%yourbucket%%`の部分は該当バケット名にしてください。(本チュートリアルでは`kuroco-sample`)    

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": "arn:aws:s3:::%%yourbucket%%"
        },
        {
            "Action": [
                "s3:*"
            ],
            "Effect": "Allow",
            "Resource": [
                "arn:aws:s3:::%%yourbucket%%/*"
            ]
        }
    ]
}
```

:::caution
`%%%yourbucket%%`の部分はご自身のバケット名にしてください。
:::

入力が完了したら[次のステップ：タグ]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c821833fa5e747935316ca1ee6bd8b4b.png)  
タグについては設定不要なので、そのまま[次のステップ：確認]をクリックして進みます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f9c9137711755fb801e0f7b18cd89f12.png)
ポリシーの確認ページが表示されるので、名前の項目を入力して[ポリシーの作成]をクリックします。  
今回は`kuroco-s3`という名前を付けました。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0f0bf093a1abe932ad03460574597219.png)
### アクセスキーを作成する
次に、Kurocoと接続するためのアクセスキーを作成しますが、ルートユーザーでのアクセスキー作成は、AWSアカウント全体への無制限アクセスが可能になるため、推奨されていません。  
そこで、制限されたアクセス許可を持つ新しい IAM ユーザーを作成し、そのユーザーのアクセスキーを生成するようにします。  

[ユーザー]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/86ed66650898db6a9f2bcf096315d4e7.png)
[ユーザーを追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9be83b03059fdd787db5f26c8b7e0f9c.png)
ユーザー名を入力し、AWS 認証情報タイプは[アクセスキー - プログラムによるアクセス]を選択し、[次のステップ：アクセス権限]をクリックします。  

|項目  |値  |
| :--- | :--- |
|ユーザー名|kuroco-sample-admin|
|AWS 認証情報タイプを選択|[アクセスキー - プログラムによるアクセス]にチェックを入れる|  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/519fe55b4bc6b223501957ced4c0e6f9.png)
[既存のポリシーを直接アタッチ]を選択し、先ほど作成したポリシーを検索して選択し、[次のステップ：タグ]をクリックします。    

|項目  |値  |
| :--- | :--- |
|アクセス許可の設定|既存のポリシーを直接アタッチ|
|ポリシー名|kuroco-s3 を選択|  
|アクセス権限の境界の設定|アクセス権限の境界を設定せずにuserを作成するを選択|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7f87207872c7674b4fb6cb22d956390a.png)
タグについては設定不要なので、そのまま[次のステップ：確認]をクリックして進みます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/c0ff8d657b0143b2c54dd9076217fb8d.png)
内容を確認し、[ユーザーの作成]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ca26fc2b8a316f22111205c56e7c4607.png)
ユーザーが作成されたら「アクセスキー ID」と「シークレットアクセスキー」が表示されるので、メモをして[閉じる]をクリックします。  

:::caution
シークレットアクセスキーは画面を閉じると再表示できませんので、ご注意ください。  
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4e1e998fa255b9d100d1fd61fd99d52e.png)
## Kurocoの設定

ここからはKurocoの管理画面にて作業をします。  
[外部システム連携]->[Amazon S3]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/505e5e28b7f47b69ebda09bfba90eb79.png)
Amazon S3との連携画面が表示させるので、「バケット名」「アクセスキーID」「シークレットアクセスキー」を入力して[更新する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/dc1211ffcf0a1be4300d49ca13e496bd.png)

## 利用方法
### ファイル
接続完了後、[ファイルマネージャー]をクリックすると、S3の表示が確認でき、ファイルをアップロードできます。    
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0b57e42c37820e1896c8b9e3a77f9ce0.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7987e145471d180ad17c428881f90813.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ab16cd4471744868cd66b2ed0b267ec4.png)

### コンテンツ定義
#### ファイル（S3にアップロード）
Kuroco管理画面の[コンテンツ定義](/ja/docs/management/content-structure-topics-group/)より、設定項目で[ファイル（S3にアップロード）]を選択します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3b638146b86647e735c2a1de6a3e8d7c.png)
コンテンツ編集画面にファイルアップロードフィールドが表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/c77fbd9036d4b4b6053be9111c13d61c.png)
こちらからファイルをアップロードすると、Amazon S3のStorageにファイルがアップロードされるようになります。

#### WYSIWYG
WYSIWYG項目の全般設定で「リソースを指定」にS3のパスを入力すると、WYSIWYGからアップロードしたファイルが指定したS3のフォルダに保存されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/939d61087f02b0566c541c5d30fb39a7.png)