Integrating and storing files with Amazon S3

Overview

This tutorial explains how to work with Amazon Simple Storage Service (Amazon S3). Integration with this service enables images and video files uploaded from Kuroco to be stored and used in the cloud.

Amazon S3 settings

Create buckets

Go to the Amazon S3 landing page and click [Get Started with Amazon S3].

Image from Gyazo

Sign in as a root user.
If you do not have an AWS account, sign up here.

Image from Gyazo

On the landing page, click [Create bucket].

Image from Gyazo

Input the following on the settings page and click [Create bucket] at the bottom.

FieldValue
Bucket nameEnter your desired name (for this tutorial, we are using kuroco-sample).
AWS RegionSelect "Asia Pacific (Tokyo) ap-northeast-1".
Object OwnershipSelect "ACLs enabled" and "Bucket owner preferred".
Block Public Access settings for this bucketSelect only the following options:
  • Block public access to buckets and objects granted through new public bucket or access point policies
  • Block public and cross-account access to buckets and objects through any public bucket or access point policies
Turning off all public access blocks might result in this bucket and the objects within becoming publicSelect [I acknowledge that the current settings might result in this bucket and the objects within becoming public].
Bucket VersioningDisable
Default encryptionDisable

Image from Gyazo

Cross-origin resource sharing (CORS) settings

The next step is to configure the CORS settings for Amazon S3. On the "Buckets" page, click the name of the bucket you created earlier.

Image from Gyazo

Click the [Permissions] tab.

Image from Gyazo

Under "Cross-origin resource sharing (CORS)", click [Edit].

Image from Gyazo Image from Gyazo

Input the code below on the "Edit cross-origin resource sharing (CORS)" page:

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

Make sure to substitute https://****.g.kuroco-mng.app with your own Kuroco admin panel URL.

Image from Gyazo

Click [Save changes] when you are done.

Create your policy

Now, create a policy and specify the permissions you want to grant Kuroco.

Click your name in the upper right corner and select [Security credentials] in the dropdown menu.

Image from Gyazo

In the left sidebar menu, select [Policies].

Image from Gyazo

Click [Create policy].

Image from Gyazo

On the "Create policy" page, enter the following code in the JSON tab:

{
    "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%%/*"
            ]
        }
    ]
}

Substitute %%%yourbucket%% in the code above with your own bucket name (kuroco-sample in this tutorial).

When you are done, click [Next: Tags].

Image from Gyazo

Since you do not need any tags, click [Next: Review] to proceed directly to the next page.

Image from Gyazo

On the "Review policy" page, enter your desired name and click [Create policy]. For this tutorial, we will name the policy kuroco-s3.

Image from Gyazo

Generate an access key

To integrate AWS with Kuroco, you need an access key. However, we do not recommend creating an access key as a root user, as it could enable unrestricted access to your entire AWS account. Instead, you can sign up for an Identity and Access Management (IAM) user account with restricted permissions and generate an access key using the new account.

Select [Users] in the sidebar menu.

Image from Gyazo

Click [Add users].

Image from Gyazo

On the "Add user" page, enter your desired user name (for this tutorial, we will use kuroco-sample-admin) and select [Access key - Programmatic Access] for the AWS credential type. Then, click [Next: Permissions].

Image from Gyazo

Select [Attach existing policies directly]. Attach the policy you created earlier (i.e., kuroco-s3), and click [Next: Tags].

Image from Gyazo

Since you do not need any tags, click [Next: Review] to proceed directly to the next page.

Image from Gyazo

Verify that all the user information is correct and click [Create user].

Image from Gyazo

The next page will display your access key ID and secret access key. Note them down for later use and click [Close].

The secret access key cannot be retrieved after you close this page, so make sure to copy it.

Image from Gyazo

Kuroco settings

From here onwards, we will configure the Kuroco admin panel. In the left sidebar menu, select [External system integration] -> [Amazon S3].

Image from Gyazo

On the Amazon S3 integration screen, enter the bucket name, access key ID, and secret access key. Then, click [Update].

Image from Gyazo

Upload files

After integration, you can upload files to your Amazon S3 account in one of two ways.

From File manager

In the sidebar menu, select [File manager] to access the S3 folder and upload your file.

Image from Gyazo

Image from Gyazo

From Content editor

On the content structure screen, select [File (S3)] as an additional field.

Image from Gyazo

This creates the file upload field below in the corresponding content editor. Click [Select file] to upload a file from your local drive.

Image from Gyazo

If you have any other questions, please use our contact form or Slack workspace.