Deploy a Vue App

Deploy a Vue application to Bunny Storage with global CDN delivery

This guide walks through deploying a Vue application to Bunny Storage with a Pull Zone for global CDN delivery. This works with Vue CLI, Vite, and Nuxt (static export).

Deploy Your App

1. Build your app

   Run the build command for your Vue project:

   Vite (Vue 3)

   npm run build
   

   This creates a dist folder with your production files.

   Vue CLI

   npm run build
   

   This creates a dist folder with your production files.

   Nuxt (Static)

   npm run generate
   

   This creates a .output/public folder with your static files.

2. Create a Storage Zone

   1. In the Bunny dashboard, go to Storage → Add Storage Zone
   2. Enter a name for your zone (e.g., my-vue-app)
   3. Select a main storage region closest to your primary audience
   4. Click Add Storage Zone

   Take note of your Storage Zone Password from the FTP & API Access section—you’ll need this for uploads.

3. Upload your files

   Open your Storage Zone and upload the contents of your build folder to the root of your storage zone:

   • Vite/Vue CLI: Upload contents of dist
   • Nuxt: Upload contents of .output/public

   Automate uploads with the Storage API

   For CI/CD pipelines, use the Storage API:

   #!/bin/bash
   STORAGE_ZONE="my-vue-app"
   ACCESS_KEY="YOUR_STORAGE_ZONE_PASSWORD"
   BUILD_DIR="dist"  # Use ".output/public" for Nuxt
   
   find $BUILD_DIR -type f | while read file; do
     remote_path="${file#$BUILD_DIR/}"
     curl -X PUT "https://storage.bunnycdn.com/$STORAGE_ZONE/$remote_path" \
       -H "AccessKey: $ACCESS_KEY" \
       --data-binary "@$file"
   done
   
4. Create a Pull Zone

   1. Go to CDN → Add Pull Zone
   2. Enter a name for your Pull Zone
   3. Set Origin Type to Storage Zone
   4. Select the Storage Zone you created earlier
   5. Click Add Pull Zone

   Your app is now available at https://your-pullzone-name.b-cdn.net.

Configure Vue Router (History Mode)

Vue apps using Vue Router in history mode need all routes to serve index.html so the client-side router can handle navigation. Configure this using your Storage Zone’s error handling settings.

If you’re using Nuxt with nuxt generate, each route generates its own HTML file, so you may not need this configuration unless you have dynamic routes.

1. Navigate to your storage zone

   Log in to your Bunny dashboard, go to Storage in the left navigation, and select your storage zone.

2. Open Error handling settings

   Open the Error handling page.

3. Set the 404 file path

   Enter /index.html in the 404 File path field.

4. Enable 404 to 200 rewrite

   Check the box for Rewrite 404 to 200 status code and click Save.

5. Test

   Navigate directly to a route in your app (e.g., /about) to confirm it loads correctly.

Without this configuration, refreshing or directly accessing routes like /about or /products/123 will return a 404 error.

Add a Custom Domain

To serve your Vue app from your own domain, follow the Custom Hostname guide.

Environment Variables

If your Vue app uses environment variables for API endpoints, ensure they’re set correctly for production:

Vite

Create a .env.production file:

VITE_API_URL=https://api.example.com

Access in your code:

const apiUrl = import.meta.env.VITE_API_URL

Vue CLI

Create a .env.production file:

VUE_APP_API_URL=https://api.example.com

Access in your code:

const apiUrl = process.env.VUE_APP_API_URL

Nuxt

Configure in nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: process.env.API_URL || 'https://api.example.com'
    }
  }
})

Environment variables are embedded at build time. Rebuild and redeploy after changing them.

Summary

1. Build

   Run your build command to generate production files.

2. Upload

   Upload your build folder contents to a Storage Zone.

3. Connect

   Create a Pull Zone pointing to your Storage Zone.
4. Configure routing

   Set up error handling to serve index.html for Vue Router history mode.

Your Vue app is now served globally through Bunny’s CDN.