SPACES : how to make "delivery static assets of Rails app" WORK

Question

Sometimes I wonder if Spaces is a low cost product … with only the cons. I spent all days trying to use spaces to delivery static assets.

https://bibwild.wordpress.com/2021/06/23/notes-on-cloudfront-in-front-of-rails-assets-on-heroku-with-cors/ https://medium.com/@tranduchanh.ms/optimize-rails-app-performance-with-rails-amazon-cloudfront-e3b305f1e86c

And it took me only 5 minutes to make it work on Cloudfront without any configuration except the domain name … (l).

{
    "ETag": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "Distribution": {
        "Id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "ARN": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "Status": "Deployed",
        "LastModifiedTime": "2021-12-18T16:45:54.406000+00:00",
        "InProgressInvalidationBatches": 0,
        "DomainName": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cloudfront.net",
        "ActiveTrustedSigners": {
            "Enabled": false,
            "Quantity": 0
        },
        "ActiveTrustedKeyGroups": {
            "Enabled": false,
            "Quantity": 0
        },
        "DistributionConfig": {
            "CallerReference": "9670d28a-cfff-4dd5-9d98-0d377018507b",
            "Aliases": {
                "Quantity": 0
            },
            "DefaultRootObject": "",
            "Origins": {
                "Quantity": 1,
                "Items": [
                    {
                        "Id": "tiredoftrying - staging",
                        "DomainName": "tiredoftrying.digitaloceanspaces.com",
                        "OriginPath": "",
                        "CustomHeaders": {
                            "Quantity": 0
                        },
                        "CustomOriginConfig": {
                            "HTTPPort": 80,
                            "HTTPSPort": 443,
                            "OriginProtocolPolicy": "https-only",
                            "OriginSslProtocols": {
                                "Quantity": 3,
                                "Items": [
                                    "TLSv1",
                                    "TLSv1.1",
                                    "TLSv1.2"
                                ]
                            },
                            "OriginReadTimeout": 30,
                            "OriginKeepaliveTimeout": 5
                        },
                        "ConnectionAttempts": 3,
                        "ConnectionTimeout": 10,
                        "OriginShield": {
                            "Enabled": false
                        }
                    }
                ]
            },
            "OriginGroups": {
                "Quantity": 0
            },
            "DefaultCacheBehavior": {
                "TargetOriginId": "tiredoftrying - staging",
                "TrustedSigners": {
                    "Enabled": false,
                    "Quantity": 0
                },
                "TrustedKeyGroups": {
                    "Enabled": false,
                    "Quantity": 0
                },
                "ViewerProtocolPolicy": "allow-all",
                "AllowedMethods": {
                    "Quantity": 2,
                    "Items": [
                        "HEAD",
                        "GET"
                    ],
                    "CachedMethods": {
                        "Quantity": 2,
                        "Items": [
                            "HEAD",
                            "GET"
                        ]
                    }
                },
                "SmoothStreaming": false,
                "Compress": true,
                "LambdaFunctionAssociations": {
                    "Quantity": 0
                },
                "FunctionAssociations": {
                    "Quantity": 0
                },
                "FieldLevelEncryptionId": "",
                "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6"
            },
            "CacheBehaviors": {
                "Quantity": 0
            },
            "CustomErrorResponses": {
                "Quantity": 0
            },
            "Comment": "",
            "Logging": {
                "Enabled": false,
                "IncludeCookies": false,
                "Bucket": "",
                "Prefix": ""
            },
            "PriceClass": "PriceClass_All",
            "Enabled": true,
            "ViewerCertificate": {
                "CloudFrontDefaultCertificate": true,
                "MinimumProtocolVersion": "TLSv1",
                "CertificateSource": "cloudfront"
            },
            "Restrictions": {
                "GeoRestriction": {
                    "RestrictionType": "none",
                    "Quantity": 0
                }
            },
            "WebACLId": "",
            "HttpVersion": "http2",
            "IsIPV6Enabled": true
        }
    }
}

Basically: one domain name (https), two AllowedMethods (“HEAD”, “GET”). that’s it.

How to accomplish the same on SPACES ?

Help

Bobby · Answer

Hey!

To serve static assets for your Rails application using DigitalOcean Spaces, you’ll need to configure your Rails application and set up Spaces to store and serve these assets. The goal is to have a setup where your Rails app references assets stored on Spaces, similar to how you might use Amazon S3 or CloudFront.

Prepare Your Rails Application:
- Ensure your Rails application is set up to use Active Storage if you’re planning to use it for handling uploads.
- Configure your environment files (like production.rb) to use Spaces for asset storage. You’ll need to set up your storage provider as S3 (since Spaces is S3-compatible) and provide your Spaces endpoint, bucket name, access key, and secret key.
  
  Example configuration snippet in production.rb:
```
config.active_storage.service = :amazon
config.active_storage.service = :local
```
  And in your storage.yml:
```
amazon:
  service: S3
  access_key_id: your-access-key-id
  secret_access_key: your-secret-access-key
  region: nyc3
  bucket: your-bucket-name
  endpoint: 'https://nyc3.digitaloceanspaces.com'
```
Upload Your Assets to Spaces:
- During your asset compilation step (e.g., during deployment or CI/CD pipeline), ensure that your assets are being uploaded to your designated Spaces bucket. This typically involves running rake assets:precompile and ensuring the compiled assets are synced to Spaces.
- You can use the s3cmd tool or AWS CLI to sync your assets folder with your Spaces bucket.
Configure Your Rails App to Reference Assets from Spaces:
- Modify your asset host configuration in Rails to point to your Spaces URL. In production.rb, set the config.asset_host to your Spaces URL or CDN endpoint if you’re using a CDN in front of Spaces.
```
config.action_controller.asset_host = 'https://your-bucket-name.nyc3.digitaloceanspaces.com'
```

With the above configuration, your Rails application will generate URLs for assets that point directly to your Spaces bucket. This means that when a user accesses your site, their browser will fetch assets directly from Spaces, reducing the load on your Rails server and potentially improving load times for your users.

For even faster asset delivery, you can use a CDN in front of Spaces. DigitalOcean offers a CDN option with Spaces, or you can use a third-party CDN. Configure the CDN to point to your Spaces bucket, and then update config.action_controller.asset_host in your Rails application to use the CDN URL.

Once everything is set up, verify that your assets are being served from Spaces by inspecting the network requests in your browser’s developer tools. If you encounter issues, check your Rails logs and ensure that your Spaces bucket is publicly accessible and properly configured.

Best,

Bobby

Report this

SPACES : how to make "delivery static assets of Rails app" WORK

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

Get our newsletter

The developer cloud

Get started for free