Uploading into Amazon AWS images and Sitemaps on Spree 2.2 or Rails Apps

Hello guys I want to share with all of you a way to set up your Spree 2.2 or Rails app to upload your product images and the sitemap file into a cloud storage service, like Amazon AWS.

Spree uses Paperclip for upload purposes, so if you are working in a Rails app (without Spree) you have to add the Paperclip gem:

# in our Gemfile
gem "paperclip"

Besides that, I will be using the following gems:

spree_sitemap: guess what this one does? Do the following to install it.

gem 'spree_sitemap', github: 'jdutil/spree_sitemap'

Fog: to manage cloud services, like Amazon’s AWS. Install by adding this to your gem file:

# https://github.com/fog/fog
# in our Gemfile
gem 'fog', '~> 1.22.0'

Figaro: to manage environment variables. Add this to your gem file and you’ll have it!

# https://github.com/laserlemon/figaro
# in our Gemfile
gem 'figaro'

Now, In your config/environments/production.rb file you have to use the following code to specify where the images or sitemap will be uploaded:

config.paperclip_defaults = {
  :storage => :fog,
  :fog_credentials => {
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    provider: ENV['FOG_PROVIDER']
  },
  fog_directory: ENV['FOG_DIRECTORY']
}

To configure Figaro you have to put all your credentials inside config/application.yml:

development:
  VARIABLE_Y: 'heriberto.perez@magmalabs.io'
  VARIABLE_X: 'magmalabs.io'
  AWS_ACCESS_KEY_ID: youraccesskeyidgeneratedinaws
  AWS_SECRET_ACCESS_KEY: yoursecretaccesskeygeneratedonamazon
  FOG_PROVIDER: 'AWS'
  FOG_DIRECTORY: 'yourbucketname'
production:
  VARIABLE_Y: 'heriberto.perez@magmalabs.io'
  VARIABLE_X: 'magmalabs.io'
  AWS_ACCESS_KEY_ID: youraccesskeyidgeneratedinaws
  AWS_SECRET_ACCESS_KEY: yoursecretaccesskeygeneratedonamazon
  FOG_PROVIDER: 'AWS'
  FOG_DIRECTORY: 'yourbucketname'
test:
  VARIABLE_Y: ''
  VARIABLE_X: ''
  AWS_ACCESS_KEY_ID: ''
  AWS_SECRET_ACCESS_KEY: ''
  FOG_PROVIDER: 'AWS'
  FOG_DIRECTORY: 'yourbucketname'

In your Spree initializer file make sure you have something like this to specify the custom paths and file sizes for your images.

# We want to upload into amazon only in production mode, 
# In development mode we are using the public local folder
# config/initializers/spree.rb.

if Rails.env.production?
  Spree::Image.attachment_definitions[:attachment][:path] = 'spree/products/:id/:style/:basename.:extension'
  Spree::Image.attachment_definitions[:attachment][:url] = 'spree/products/:id/:style/:basename.:extension'
end

And now, regarding sitemaps, you need to set up a config/sitemap.rb file, in order to upload to the right path. This is my example:

SitemapGenerator::Sitemap.default_host = "http://#{Spree::Config[:site_url]}"

## Store on S3 using Fog - Note must add fog to your Gemfile.
 SitemapGenerator::Sitemap.adapter = SitemapGenerator::S3Adapter.new(
                                      {
                                         aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
                                         aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
                                         fog_provider:          ENV['FOG_PROVIDER'],
                                         fog_directory:         ENV['FOG_DIRECTORY']
                                      }
                                   )

## Inform the map cross-linking where to find the other maps.
SitemapGenerator::Sitemap.sitemaps_host = "http://#{ ENV['FOG_DIRECTORY'] }.s3.amazonaws.com/"

SitemapGenerator::Sitemap.add_links do
  add_login
  add_signup
  add_account
  add_password_reset
  add_taxons
  add_products
end

And that’s it, now when we create a new product with images they will be saved into our Amazon bucket (only on production mode), if you want to test it in development mode you have to add the same configuration used in ‘config/envionments/production.rb’ into config/environment/development.rb, and remove the conditional in the Spree initializer which restricts its use to production mode only 🙂

if you like gist files you can find the code inside this one:
Uploading into amazon AWS images and …

If we want to generate the sitemap run this Rake task:

rake sitemap:refresh

Then we should be able to download the sitemap from Amazon going to a URL like: mybucket.s3.amazonaws.com/sitemap.xml.gz

I hope you found this tutorial useful, thanks for reading.

H.