How to deploy Vue app to AWS Amplify

npm install -g @aws-amplify/cli

# Configure Amplify
amplify configure

# Navigate to your Vue project
cd my-vue-app

# Initialize Amplify
amplify init

# Follow prompts:
# ? Enter a name for the project: myvueapp
# ? Enter a name for the environment: dev
# ? Choose your default editor: Visual Studio Code
# ? Choose the type of app: javascript
# ? What javascript framework: vue
# ? Source Directory Path: src
# ? Distribution Directory Path: dist
# ? Build Command: npm run build
# ? Start Command: npm run serve

# Add hosting with Amplify Console
amplify add hosting

# Select:
# ? Select the plugin module to execute: Hosting with Amplify Console
# ? Choose a type: Manual deployment

# Or for CI/CD
# ? Choose a type: Continuous deployment (Git-based deployments)

# Build and deploy
npm run build
amplify publish

# Your app will be deployed to:
# https://dev.d1234abcd5678.amplifyapp.com

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

// Use in components
const apiUrl = import.meta.env.VITE_API_URL
const apiKey = import.meta.env.VITE_API_KEY

# Add custom domain via CLI
amplify add domain

# Or in Amplify Console:
# 1. Go to Domain management
# 2. Add domain
# 3. Configure DNS records

# Add REST API
amplify add api

# Select:
# ? Please select from one of the below: REST
# ? Provide a friendly name: myapi
# ? Provide a path: /items
# ? Choose a Lambda source: Create a new Lambda function

# Deploy API
amplify push

<script setup>
import { Amplify, API } from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

const fetchItems = async () => {
  try {
    const response = await API.get('myapi', '/items')
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}
</script>

# Add Cognito authentication
amplify add auth

# Select:
# ? Do you want to use default configuration? Default
# ? How do you want users to sign in? Email
# ? Do you want to configure advanced settings? No

# Deploy auth
amplify push

<script setup>
import { Amplify, Auth } from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

const signUp = async (email, password) => {
  try {
    const user = await Auth.signUp({
      username: email,
      password,
      attributes: { email }
    })
    console.log('User signed up:', user)
  } catch (error) {
    console.error('Sign up error:', error)
  }
}

const signIn = async (email, password) => {
  try {
    const user = await Auth.signIn(email, password)
    console.log('User signed in:', user)
  } catch (error) {
    console.error('Sign in error:', error)
  }
}
</script>

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
customHeaders:
  - pattern: '**/*'
    headers:
      - key: 'Cache-Control'
        value: 'public, max-age=31536000, immutable'
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'

amplify env checkout production
amplify pull
amplify publish

# Create alarm for 5xx errors
aws cloudwatch put-metric-alarm \
  --alarm-name high-error-rate \
  --alarm-description "Alert when 5xx errors exceed threshold" \
  --metric-name 5xxErrors \
  --namespace AWS/Amplify