How to deploy Vue to AWS

Deploy a Vue application built with Vite to S3 and deliver it through CloudFront.

Prerequisites

A Git repository containing your application and its production build command.
A Ravion account with your AWS account connected. Start free at Ravion signup.
The Ravion CLI installed and authenticated. See CLI installation.

The examples use my-org/my-app as a placeholder. Replace it with your repository before applying the config.

Set up this Vue app for Ravion static hosting.

Configure the deployment

The default production output directory is dist. This example uses Railpack for the build. Use build_source: dockerfile instead when you need a custom Dockerfile.

ravion.yaml

project:
  givenId: vue-site
  name: Vue site
environments:
  - givenId: production
    name: Production
    moduleInstances:
      - givenId: static-site
        name: Vue site
        type: rvn-aws-static
        version: 1.0.0
        input:
          aws_account_id: ravion-prod
          aws_region: us-east-1
          name: vue-site-production
          build_source: railpack
          source_repo: my-org/my-vue-app
          railpack_build_cmd: npm run build

Run npm run build, which invokes Vite and writes to dist. Use VITE_* variables for values embedded into browser code.

Apply and connect your domain

ravion project create --given-id vue-site --name "Vue site"
ravion project config apply vue-site --file ravion.yaml --dry-run
ravion project config apply vue-site --file ravion.yaml

Follow custom domains to connect your domain to CloudFront.

Next steps

Custom domains

Point a domain at your deployed service and manage its certificate.

Project config

Preview and apply Ravion configuration from source control.

Pipelines

Add approvals, migrations, and deployment automation.

Logs and metrics

Inspect deploy output and production health in Ravion.

⌘I

​Prerequisites

​Configure the deployment

​Apply and connect your domain

​Next steps