> ## Documentation Index
> Fetch the complete documentation index at: https://developer.upsun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Streamline Your CDN Management with Fastly CDN Plugin App [BETA]

export const PostMeta = ({data = {}}) => {
  const {author, date, image} = data;
  const authors = Array.isArray(author) ? author : author ? [author] : [];
  const resolveAuthor = slug => {
    const entry = AUTHOR_MAP[slug] || ({});
    const name = entry.name || slug;
    const github = entry.github || null;
    const linkedin = entry.linkedin || null;
    const url = github ? `https://github.com/${github}` : linkedin || null;
    const avatarUrl = github ? `https://github.com/${github}.png?size=64` : null;
    return {
      name,
      url,
      avatarUrl
    };
  };
  const formattedDate = date ? new Date(date).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }) : null;
  if (!image && authors.length === 0 && !formattedDate) return null;
  const AUTHOR_MAP = {
    "aaron-collier": {
      "name": "Aaron Collier"
    },
    "aaron-dudenhofer": {
      "name": "Aaron Dudenhofer"
    },
    "aaron-porter": {
      "name": "Aaron Porter"
    },
    "adriaan-odendaal": {
      "name": "Adriaan Odendaal"
    },
    "ajmal": {
      "name": "Ajmal Siddiqui"
    },
    "akalipetis": {
      "name": "Antonis Kalipetis"
    },
    "alexander-varwijk": {
      "name": "Alexander Varwijk"
    },
    "alicia-bevilacqua": {
      "name": "Alicia Bevilacqua"
    },
    "amelie-deguerry": {
      "name": "Amelie Deguerry"
    },
    "anacidre": {
      "name": "Ana Cidre",
      "linkedin": "https://www.linkedin.com/in/ana-cidre"
    },
    "andoni": {
      "name": "Andoni Auzmendi"
    },
    "andrei-taranu": {
      "name": "Andrei (Alex) Taranu",
      "linkedin": "https://www.linkedin.com/in/andrei-alex-taranu/"
    },
    "andrew-baxter": {
      "name": "Andrew Baxter"
    },
    "andrew-melck": {
      "name": "Andrew Melck"
    },
    "antoine-crochet-damais": {
      "name": "Antoine Crochet Damais"
    },
    "augustin-delaporte": {
      "name": "Augustin Delaporte",
      "linkedin": "https://www.linkedin.com/in/augustindelaporte/"
    },
    "branislav-bujisic": {
      "name": "Branislav Bujisic"
    },
    "carl-smith": {
      "name": "Carl Smith"
    },
    "caroline-leroy": {
      "name": "Caroline Leroy"
    },
    "cati-mayer": {
      "name": "Cati Mayer"
    },
    "catplat": {
      "name": "C Trinkwon"
    },
    "ceelolulu": {
      "name": "Celeste van der Watt"
    },
    "chadwcarlson": {
      "name": "Chad Carlson",
      "github": "chadwcarlson",
      "linkedin": "https://www.linkedin.com/in/chadwcarlson"
    },
    "chris-ward": {
      "name": "Chris Ward"
    },
    "chris-yates": {
      "name": "Chris Yates"
    },
    "christian-sieber": {
      "name": "Christian Sieber"
    },
    "christopher-lockheardt": {
      "name": "Christopher Lockheardt"
    },
    "christopher-skene": {
      "name": "Christopher Skene"
    },
    "chuck-morgan": {
      "name": "Chuck Morgan"
    },
    "corey-dockendorf": {
      "name": "Corey Dockendorf"
    },
    "crell": {
      "name": "Crell"
    },
    "damz": {
      "name": "Damz"
    },
    "dan-morrison": {
      "name": "Dan Morrison"
    },
    "davidbonachera": {
      "name": "David Bonachera",
      "github": "davidbonachera",
      "linkedin": "https://www.linkedin.com/in/davidbonachera"
    },
    "dereliahmet1": {
      "name": "Ahmet Faruk Dereli"
    },
    "devicezero": {
      "name": "Jonas Kröger",
      "github": "devicezero",
      "linkedin": "https://www.linkedin.com/in/jonaskroeger/"
    },
    "doug-goldberg": {
      "name": "Doug Goldberg"
    },
    "duncan-naves": {
      "name": "Duncan Naves",
      "github": "duncannaves",
      "linkedin": "https://www.linkedin.com/in/duncan-naves-a94423aa"
    },
    "erika-bustamante": {
      "name": "Erika Bustamante"
    },
    "fabpot": {
      "name": "Fabien Potencier"
    },
    "flovntp": {
      "name": "Florent Huck",
      "github": "flovntp",
      "linkedin": "https://www.linkedin.com/in/florenthuck"
    },
    "fred-plais": {
      "name": "Fred Plais"
    },
    "gauthier-garnier": {
      "name": "Gauthier Garnier"
    },
    "gilzow": {
      "name": "Paul Gilzow"
    },
    "gmoigneu": {
      "name": "Guillaume Moigneu",
      "github": "gmoigneu",
      "linkedin": "https://www.linkedin.com/in/guillaumemoigneu/"
    },
    "gregqualls": {
      "name": "Greg Qualls"
    },
    "guguss": {
      "name": "Augustin Delaporte"
    },
    "haylee-millar": {
      "name": "Haylee Millar"
    },
    "ivana-kotur": {
      "name": "Ivana Kotur"
    },
    "jackrabbithanna": {
      "name": "Mark Hanna"
    },
    "jared-wright": {
      "name": "Jared Wright",
      "github": "jww-sh",
      "linkedin": "https://www.linkedin.com/in/jaredwaynewright"
    },
    "jessica-orozco": {
      "name": "Jessica Orozco"
    },
    "joey-stanford": {
      "name": "Joey Stanford"
    },
    "john-grubb": {
      "name": "John Grubb"
    },
    "jonas-kruger": {
      "name": "Jonas Kruger"
    },
    "kathryn-frazer": {
      "name": "Kathryn Frazer"
    },
    "kemiojo": {
      "name": "Kemi Elizabeth Ojogbede"
    },
    "kieronsambrook-smith": {
      "name": "Kieronsambrook Smith"
    },
    "laurent-arnoud": {
      "name": "Laurent Arnoud"
    },
    "letoya-boyne": {
      "name": "Letoya Boyne"
    },
    "lolautruche": {
      "name": "Jérôme Vieilledent"
    },
    "lyly-lepinay": {
      "name": "Lyly Lepinay"
    },
    "manauwar-alam": {
      "name": "Manauwar Alam"
    },
    "marc-antoine-porri": {
      "name": "Marc Antoine Porri"
    },
    "maria-antinkaapo": {
      "name": "Maria Antinkaapo"
    },
    "maria-de-anton": {
      "name": "Maria De Anton"
    },
    "mark-dorison": {
      "name": "Mark Dorison"
    },
    "markus-hausammann": {
      "name": "Markus Hausammann"
    },
    "mary-thomas": {
      "name": "Mary Thomas"
    },
    "mathias-bolt-lesniak": {
      "name": "Mathias Bolt Lesniak"
    },
    "mathieu-strauch": {
      "name": "Mathieu Strauch"
    },
    "matthias-van-woensel": {
      "name": "Matthias Van Woensel",
      "linkedin": "https://www.linkedin.com/in/matthias-van-woensel-267a069"
    },
    "michael-sharp": {
      "name": "Michael Sharp"
    },
    "mupsi": {
      "name": "Marine Gandy"
    },
    "natalie-harper": {
      "name": "Natalie Harper"
    },
    "ngommenginger": {
      "name": "Nicolas Gommenginger",
      "linkedin": "https://www.linkedin.com/in/nicolas-gommenginger"
    },
    "nicholas-bennison": {
      "name": "Nicholas Bennison"
    },
    "nicholas-vahalik": {
      "name": "Nicholas Vahalik"
    },
    "nick-hardiman": {
      "name": "Nick Hardiman"
    },
    "nickanderegg": {
      "name": "Nickanderegg"
    },
    "nicolas-grekas": {
      "name": "Nicolas Grekas",
      "github": "nicolas-grekas",
      "linkedin": "https://www.linkedin.com/in/nicolasgrekas/"
    },
    "niti-malwade": {
      "name": "Niti Malwade"
    },
    "opensocialteam": {
      "name": "Opensocialteam"
    },
    "ori-pekelman": {
      "name": "Ori Pekelman"
    },
    "otavio-santana": {
      "name": "Otavio Santana"
    },
    "palwandi": {
      "name": "Pawan Alwandi",
      "github": "pawpy",
      "linkedin": "https://www.linkedin.com/in/pawanalwandi"
    },
    "patrick-boest": {
      "name": "Patrick Boest"
    },
    "patrick-dawkins": {
      "name": "Patrick Dawkins",
      "github": "pjcdawkins",
      "linkedin": "https://www.linkedin.com/in/patrickdawkins"
    },
    "patrick-klima": {
      "name": "Patrick Klima"
    },
    "pjcdawkins": {
      "name": "Pjcdawkins"
    },
    "prineet-kaurbhurji": {
      "name": "Prineet Kaurbhurji"
    },
    "quentin-sinig": {
      "name": "Quentin Sinig"
    },
    "ralt": {
      "name": "Florian Margaine",
      "github": "ralt",
      "linkedin": "https://www.linkedin.com/in/florian-margaine-43971136"
    },
    "ramanathanramakrishnamurthy": {
      "name": "Ramanathanramakrishnamurthy"
    },
    "remi-lejeune": {
      "name": "Rémi Lejeune"
    },
    "ribel": {
      "name": "Taras Kruts"
    },
    "robert-douglass": {
      "name": "Robert Douglass"
    },
    "rudy-weber": {
      "name": "Rudy Weber"
    },
    "ryan-hicks": {
      "name": "Ryan Hicks"
    },
    "sabri-helal": {
      "name": "Sabri Helal"
    },
    "savannah-bergeron": {
      "name": "Savannah Bergeron"
    },
    "shannon-vettes": {
      "name": "Shannon Vettes"
    },
    "shawn-ogasawara": {
      "name": "Shawn Ogasawara",
      "linkedin": "https://www.linkedin.com/in/shawn-ogasawara-83a9a0/"
    },
    "shawna-spoor": {
      "name": "Shawna Spoor"
    },
    "shedrack-akintayo": {
      "name": "Shedrack Akintayo"
    },
    "simon-ruggier": {
      "name": "Simon Ruggier"
    },
    "sophie-van-der-kindere": {
      "name": "Sophie Van Der Kindere"
    },
    "stefanos-thampis": {
      "name": "Stefanos Thampis"
    },
    "stephen-weinberg": {
      "name": "Stephen Weinberg"
    },
    "sukhman-virk": {
      "name": "Sukhman Virk"
    },
    "sumaira-nazir": {
      "name": "Sumaira Nazir"
    },
    "sumer": {
      "name": "Sümer Cip"
    },
    "syed-raza": {
      "name": "Syed Raza"
    },
    "tamara-bacchia": {
      "name": "Tamara Bacchia"
    },
    "tara-arnold": {
      "name": "Tara Arnold"
    },
    "theosakamg": {
      "name": "Mickael Gaillard",
      "github": "theosakamg"
    },
    "thomasdiluccio": {
      "name": "Thomas di Luccio"
    },
    "tim-anderson": {
      "name": "Tim Anderson"
    },
    "tom-helmer-hansen": {
      "name": "Tom Helmer Hansen"
    },
    "tylermills": {
      "name": "Tyler Mills"
    },
    "upsun": {
      "name": "Upsun"
    },
    "veronika-tolkachova": {
      "name": "Veronika Tolkachova",
      "linkedin": "https://www.linkedin.com/in/veronika-tolkachova-169167a2"
    },
    "vince-parker": {
      "name": "Vince Parker"
    },
    "vinnie-russo": {
      "name": "Vincenzo Russo"
    },
    "vrobert78": {
      "name": "Vincent Robert",
      "github": "vrobert78",
      "linkedin": "https://www.linkedin.com/in/vincent-robert-498a883"
    },
    "yuriy-babenko": {
      "name": "Yuriy Babenko"
    },
    "yuriy-gerasimov": {
      "name": "Yuriy Gerasimov"
    }
  };
  return <div className="post-meta">
      {(authors.length > 0 || formattedDate) && <div className="post-meta-info">
          {authors.length > 0 && <div className="post-meta-authors">
              {authors.map(slug => {
    const {name, url, avatarUrl} = resolveAuthor(slug);
    const inner = <>
                    {avatarUrl && <img src={avatarUrl} alt={name} className="post-meta-avatar" />}
                    <span className="post-meta-author-name">{name}</span>
                  </>;
    return url ? <a key={slug} href={url} target="_blank" rel="noopener noreferrer" className="post-meta-author">
                    {inner}
                  </a> : <span key={slug} className="post-meta-author">{inner}</span>;
  })}
            </div>}
          {authors.length > 0 && formattedDate && <span className="post-meta-separator" aria-hidden="true">·</span>}
          {formattedDate && <span className="post-meta-date">{formattedDate}</span>}
        </div>}
      {image && <img src={image} alt="" className="post-meta-image" aria-hidden="true" />}
    </div>;
};

<PostMeta data={{ author: ["duncan-naves", "theosakamg"], date: "2025-10-07T15:30:12+07:00", image: "/images/posts/how-tos/fastlycdn-pluginapp-activation/hero-image.svg" }} />

Managing Content Delivery Network (CDN) configurations alongside your application deployments can be a complex task, often requiring developers to switch between multiple interfaces and tools. The Fastly CDN plugin app bridges this gap by bringing Fastly CDN management directly into your Upsun console, creating a seamless workflow for developers who want to manage their CDN configurations without leaving their primary development environment.

*This plugin represents the ongoing commitment of the Upsun community to create tools that improve developer experience and workflow efficiency. While experimental, it demonstrates the potential for deeper integrations between platform services and CDN management.*

## Key Features of Fastly CDN plugin \[BETA]

The Fastly CDN plugin offers a comprehensive set of features that make CDN management intuitive and efficient:

### 📊 Service Overview & Monitoring

* View CDN service details and configuration summaries
* Monitor real-time statistics and performance metrics
* Track service activity and recent events history
* View current VCL (Varnish Configuration Language) version and service status

### 🛡️ Access Control Lists (ACLs) Management

* View and manage Access Control Lists for your service
* Browse ACL entries including IP addresses and CIDR blocks
* Update ACL configurations to control traffic access
* Manage security rules and restrictions

<img src="https://mintcdn.com/upsun-c9761871/eXV27YLeu5lESGxN/images/posts/how-tos/fastlycdn-pluginapp-activation/fastly-cdn-plugin-acl.webp?fit=max&auto=format&n=eXV27YLeu5lESGxN&q=85&s=c354f614c34f4b52105c00dd10c4c312" alt="fastly cdn acl panel" width="2648" height="738" data-path="images/posts/how-tos/fastlycdn-pluginapp-activation/fastly-cdn-plugin-acl.webp" />

### 🔧 VCL Configuration

* Browse VCL versions and configurations
* View generated VCL content
* Monitor configuration changes

### 🧹 Cache Purging

* **Purge All**: Clear entire CDN cache with one click
* **Selective Purging**: Purge specific URLs or content
* Real-time purge status and confirmation
* Currently supports read-only operations and purging all application URLs

### 🔐 Security & Credentials

* Secure credential storage (stored locally in browser only)
* Encrypted token management for enhanced security
* No third-party credential sharing

### 📈 Real-time Analytics

* Access real-time CDN performance data
* Monitor traffic patterns and cache hit rates
* Track bandwidth usage and request metrics

<img src="https://mintcdn.com/upsun-c9761871/eXV27YLeu5lESGxN/images/posts/how-tos/fastlycdn-pluginapp-activation/fastly-cdn-plugin-history-diagram.webp?fit=max&auto=format&n=eXV27YLeu5lESGxN&q=85&s=b8582bf528e1b2933048cc2262004fac" alt="fastly cdn history diagram panel" width="2582" height="1118" data-path="images/posts/how-tos/fastlycdn-pluginapp-activation/fastly-cdn-plugin-history-diagram.webp" />

## Installing Fastly CDN plugin app in Your Upsun Console

Getting started with Fastly CDN is straightforward.

### Upsun Console Integration

Here is how to install the Fastly CDN plugin directly into your Upsun console

1. **One-Click Installation**: Use this [installation link](https://console.upsun.com/-/add-plugin?manifest=https%253A%252F%252Ffastsun.plugins.pltfrm.sh%252Fmanifest.json) to add Fastly CDN plugin to your Upsun console
2. **Access via Console**: Once installed, our plugin will appear as a plugin within your Upsun console interface
3. **Unified Experience**: Manage your CDN alongside your application deployments in a single interface

## Prerequisites and Setup

Before using Fastly CDN plugin, ensure you have:

* **Fastly Account**: An active [Fastly account](https://www.fastly.com/signup) with CDN services configured
* **Service ID**: Your Fastly Service ID (found in your Fastly dashboard)
* **API Token**: A Fastly API token with appropriate permissions for your service

To obtain your Fastly API credentials if you have your own subscription:

1. Log into your Fastly account
2. Navigate to Account → Personal API Tokens
3. Create a new token with the necessary permissions for your CDN service
4. Note your Service ID from your service configuration

## Getting Started with Fastly CDN plugin

Once you have it installed and your credentials ready:

1. **Launch the Plugin**: Access the plugin through your Upsun console or directly via the web interface
   <img src="https://mintcdn.com/upsun-c9761871/eXV27YLeu5lESGxN/images/posts/how-tos/fastlycdn-pluginapp-activation/fastly-cdn-plugin-console.webp?fit=max&auto=format&n=eXV27YLeu5lESGxN&q=85&s=99d8787763d7efcbcffd661fbf64abd5" alt="fastly cdn history plugin console" width="2848" height="1032" data-path="images/posts/how-tos/fastlycdn-pluginapp-activation/fastly-cdn-plugin-console.webp" />
2. **Enter Credentials**: Input your Fastly Service ID and API Token
3. **Explore Your Service**: Use the service overview to familiarize yourself with your current CDN configuration
4. **Manage Your CDN**: Begin using the various features to monitor and manage your Fastly service

## Use Cases and Benefits

This plugin is particularly valuable for development teams who:

* **Deploy frequently** and need quick cache purging capabilities
* **Manage multiple environments** and want consistent CDN management workflows
* **Prefer consolidated interfaces** rather than switching between multiple tools
* **Need real-time monitoring** of CDN performance alongside application metrics
* **Want to integrate CDN management** into their existing Upsun-based development workflow

## Technical Architecture

It is built with modern web technologies:

* **Frontend**: [Vue.js](https://vuejs.org/) with TypeScript for type safety
* **Build Tool**: [Vite](https://vite.dev/) for fast development and building
* **Testing**: [Vitest](https://vitest.dev/) for unit testing
* **Linting**: [ESLint](https://www.npmjs.com/package/eslint) for code quality
* **API Integration**: Direct integration with [Fastly's official API](https://www.fastly.com/documentation/reference/api/)

The plugin follows security best practices by storing all credentials locally in your browser and never sharing them with third parties.

## Community and Support

As an open-source project, our Fastly CDN plugin welcomes community contributions and feedback. You can:

* **View the source code** on [GitHub](https://github.com/upsun/fastsun)
* **Report issues** or suggest features through GitHub Issues
* **Join the discussion** on the [Upsun Discord](https://discord.gg/upsun)
* **Contribute** to the project development

## Getting Started Today

Ready to streamline your CDN management workflow? Install the Fastly CDN plugin  in your Upsun console and experience the convenience of managing your Fastly CDN alongside your application deployments.

Remember to always test any CDN changes in a non-production environment first, and keep your API credentials secure.

***