How we increase the cybersecurity of our customers’ platforms, CI/CD workflows and applications
Learn about how our Cloud, SRE & Cybersecurity team utilize some best practices to enhance cybersecurity in our client’s products.
Financial services
Expertise in core banking, BaaS integrations, payments, and GenAI-enhanced financial solutions.
Healthcare
People-centric healthcare design and solutions, from virtual care, integrations, to smart devices.
Insurance
Modern solutions including self-service, on-demand, and algorithm-driven personalization.
We’re purposefully shaping the digital future across a range of industries.
Discover some of our specific industry services.
Discover moreJune 26, 2019
Learn how to set up a Google CDN for serving images for your next project.
Images are an integral part of many websites’ user experience, but storing and serving images can be a deceptively challenging problem. If you store your images on a server filesystem, the server and codebase need to be optimized for rapid file reads. If you store your images in a database, space can rapidly become an issue.
What’s more, if you try to send images to the UI via the standard “data on the wire” approach used for most UI-server data exchanges, you likely have to deal with image encoding, are going to load up your server bandwidth, and will find that the UI can rapidly slow down as it decodes and loads all of the images being sent. Surely there must be a better way.
Enter the CDN: your handy dandy globe-spanning network of servers whose whole job is to serve files rapidly. If you would like to learn more about CDNs, Cloudflare has an excellent overview, and SolarWinds as a great practical explainer of CDN considerations. Cloudflare also has an awesome CDN, but we won’t be talking about their CDN today.
Today we will go through the process of setting up a Google Cloud CDN. We are using Google’s CDN for several reasons.
Let’s dive in!
First let’s set up a Google Cloud account. If you have already done this, move on to the next step.
Google handles a lot of network management for you. This is a blessing and a curse, because the purpose of some of the abstractions they’ve created can be unclear.
You now need to do 4 things to create your load balancer: give your load balancer a name, create a backend, create host/path mappings, and create a frontend.
Make the name whatever you want – I will simply name mine “assets.”
The backend will be our bucket where we dump our image files.
The host and path are the components of URLs that map to your various backends. For our purposes we are going to keep it simple and map all traffic to our “image-bucket” backend. The UI should have auto-selected your new “image-bucket” backend automatically. If it didn’t do so now.
The frontend is the portion of the load balancer that faces the outside world. It consists of an IP address and SSL cert.
You can transfer files to your new bucket via the gsutil that Google provides, or do so directly through their UI. Let’s do the latter.
Wait for the status of your certificate to be “VALID” – once it is you can see your files by visiting your.cdn.domain/path/to/file.jpg.
Now that you have a CDN for serving images (and anything else you want) you can do some pretty neat stuff like send images in emails without having to attach those images and load multiple images in parallel in your UIs via <img> tags. Next steps could include creating a Node service to manage writing files to your CDN via Google’s gsutil npm package, too!
Here at Qubika we love building elegant, maintainable, scalable software, which requires mastering an ever-changing set of technologies. CDNs are far from the only technology we need to understand, but they are an important one. I hope that this walkthrough helped you become a little more conversant in Google Cloud’s vernacular and UI, as well as the concepts underpinning CDNs.
If you’re a developer looking for an exciting new opportunity to do varied work at a company that values learning and growing, or are someone searching for a team of passionate developers to help turn your vision into a reality, you know where to find us.
Until next time!
Sources
By Jared Selcoe
Senior Software Developer II
Receive regular updates about our latest work
Learn about how our Cloud, SRE & Cybersecurity team utilize some best practices to enhance cybersecurity in our client’s products.
Get the 101 on programming for Web Apps and learn about the importance of choosing the right Web & App development services.
One of our developers guides you on how to use SSL Certificate Hardening with NGINX.
Receive regular updates about our latest work
Get in touch with our experts to review your idea or product, and discuss options for the best approach
Get in touch