Phased migration from Resizer v1 to v2

Phased migration is an optional strategy that you can use if you want to take a safer approach while migrating your images from Resizer v1 to Resizer v2.

Why do a phased migration?

When upgrading to Resizer v2, you want to make sure that your custom front-end code is correctly resizing images at scale in Production. This is important because resizing errors result in failovers that deliver full-size images on every request. This can greatly impact your organization’s bandwidth consumption and costs.

Rather than changing all of your website’s image requests to Resizer v2 at the same time, you can test the Resizer v2 implementation on a limited segment of traffic first, and roll it out to more traffic over time.

Technical approach

Currently, PageBuilder requires that you designate one code bundle to be live at any given time. All website traffic is routed to this live bundle.

Therefore, you must incorporate business logic into your live bundle to decide which Resizer to use. One possible approach is to allow only articles in an approved list of sections to use Resizer v2, while all other image requests use Resizer v1.

At a very high level, the technical approach is:

Keep existing code that uses Resizer v1
Add new code that uses Resizer v2
Add business logic to choose whether to use Resizer v1 or Resizer v2 based on what section the story is published in. The business logic is:
1. Detect which primary section the article is assigned to (for example, /politics)
```
if (
  (!shouldUsev1 && shouldUsev2) ||
    isAllowSection({
      section:get(data, 'taxonomy.primary_section._id')
  })
)
```
2. Keep a list of the sections that are allowed to use Resizer v2 (for example, only /lifestyle and /food are allowed to use Resizer v2)
```
export const isAllowSection = ({ section = ''}) => {
  const allowList = [
    /lifestyle,
    /food
  ];
}
```
3. If the primary section is in the allow list, use the Resizer v2 code to resize the image.
4. If the primary section is not in the allow list, use the Resizer v1 code to resize the image.
  1. (in this example, /politics is not in the allow list, so it would use Resizer v1)
When you’re satisfied with the Resizer v2 implementation:
1. Remove the business logic to choose between Resizer v1 and v2 to instead always use Resizer v2.
2. Remove the code that uses Resizer v1 (since it’s no longer being used).