How to save images on Heroku to S3 on AWS

Introduction

AWS is an abbreviation for Amazon Web Servises, which is a cloud server service provided by Amazon. It is a service used by many people and companies, and it can be used completely free of charge depending on the capacity and period of use.

Why save images on Heroku to AWS

Images saved on Heroku are designed to be reset once every 24 hours. By saving the image on an external server, you can prevent the phenomenon that the image disappears, so this time we will use AWS as an external server.

What is S3

One of the AWS services, you can use up to 5GB of storage for free for 12 months, and you can save images and so on.

This procedure

We will proceed on the assumption that you have already registered with AWS. (If you have not registered, please search on AWS and register a new one.)

• Create an IAM user
• Prepare an image save destination in S3
• Change the save destination of the image to S3 in the local environment
• Change the save destination of the image to S3 in the production environment

Create an IAM user

What is IAM

IAM is one of the AWS services. An account created on AWS becomes a root user with all privileges, and there is a risk that it will be misused if information is leaked. Therefore, create a user with limited privileges and let that user do the normal work. IAM has the ability to create users with that limited privileges.

Creating an IAM user

Users created in IAM are called IAM users. First, search for IAM with AWS service search and move to the IAM page. From Users in the sidebar, click Add User. Then enter an arbitrary user name, check Programmatic Access, and click "Next Step". Select Attach existing policy directly, enter amazons3 in the policy filter, check "Amazon S3 Full Access", and click "Next Steps". Add tags only to those who want to, and click "Next Steps". A confirmation screen for the settings will appear. If there are no problems, click "Create User". Don't forget to download the ".csv" that appears at this time. (To use later.)

Set password for IAM user

Among the IAM users on AWS created above, if you click the Credentials tab, you will find the password field on the console. On the page that appears after clicking Manage here, enable console access and select and apply an auto-generated password for password settings. This will generate a password. Don't forget to download the ".csv" that appears at this time. (To use later.)

Prepare an image save destination in S3

Creating a bucket

The place where data is actually stored in S3 is called a bucket. After logging in to AWS, when you move to the S3 page by service search, the word bucket will appear. There is a button called "Create bucket" in the item called bucket in the sidebar, so click that button.

Bucket name and region settings

To move to the bucket name and region input screen, enter the bucket name you thought of yourself.

• The bucket name cannot be the same as the bucket of someone who uses AWS.

Region means region, but here it represents the location of the server. If you are Japanese, you can choose Asia Pacific (Tokyo).

Setting options

If you want to set options, set them here. Click Next when you are done.

Permission settings

By default, "Block all public access" is checked. If you uncheck this, you can set your favorite settings for public access. Click Next when you are done.

Confirmation

The confirmation page will display a list of the settings you have made so far, so if you are satisfied, click "Create Bucket".

Bucket policy settings

Bucket policy is a mechanism to decide what kind of access is allowed to save to S3 and read data. This time, allow access from the IAM user created earlier.

First, copy the IAM user's ARN and make a note of it somewhere.

From the bucket you created, click Permissions, click Bucket Policy, and write the following:

{
   "Version": "2012-10-17",
   "Id": "Policy1544152951996",
   "Statement": [
       {
           "Sid": "Stmt1544152948221",
           "Effect": "Allow",
           "Principal": {
               "AWS": "ARN of the copied IAM user"
           },
           "Action": "s3:*",
           "Resource": "arn:aws:s3:::Bucket name"
       }
   ]
}

Save it and you're done.

Change the save destination of the image to S3 in the local environment

Install Gem

Install a gem called aws-sdk-sm to use S3 with ruby.

Gemfile

Add the following at the bottom
gem "aws-sdk-s3", require: false

Then type bundle install in the terminal.

Specify the save destination

config/environments/development.rb

config.active_storage.service = :local

Changed the above description to the following

config.active_storage.service = :amazon

config/storage.yml

Add the following code

amazon:
 service: S3
 access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
 secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
 region: ap-northeast-1
 bucket:Your bucket name

• Region ap-northease-1 is the number of Asia Pacific (Tokyo)

Setting environment variables

Terminal

% vim ~/.zshrc

Press i and add the following

export AWS_ACCESS_KEY_ID="Copy the value of Access key ID in the CSV file here"
export AWS_SECRET_ACCESS_KEY="Copy the value of Secret access key in the CSV file here"
(The CSV file is the file downloaded when the IAM user was created.)

:Save with wq

If you post the image from the application in the local environment and confirm that it is saved in S3 without any problem, change the save destination of the image to S3 in the production environment as well.

Change the save destination of the image to S3 in the production environment

Specify the save destination

Do the same as in the local environment.

config/environments/production.rb

config.active_storage.service = :local

Changed the above description to the following

config.active_storage.service = :amazon

Setting environment variables

Since Heroku is used for the production environment, set environment variables on Heroku. You can set environment variables with the heroku config: set command.

Terminal

% heroku config:set AWS_ACCESS_KEY_ID="Copy the value of "Access key ID" in the CSV file here"
% heroku config:set AWS_SECRET_ACCESS_KEY="Copy the value of "Secret access key" in the CSV file here"

When checking if the environment variable has been set
% heroku config

Reflect your edits on Heroku

Terminal

% git push heroku master

reference

Tech camp curriculum "Upload images to AWS"

Finally

We hope that this post will help beginners review.