Git Product home page Git Product logo

vue-cli-plugin-s3-deploy's Introduction

s3-deploy for vue-cli

npm version

This vue-cli plugin aims to make it easier to deploy a built Vue.js app to an S3 bucket.

Supports:

  • Custom AWS regions
  • Support for AWS credential profiles
  • Concurrent uploads for improved deploy times
  • CloudFront distribution invalidation
  • Correct Cache-Control metadata for use with PWAs and Service Workers
  • Configurable paths for multiple Vue apps in a single bucket

Prerequisites

You must have a set of valid AWS credentials set up on your system.

Installation

yarn add vue-cli-plugin-s3-deploy

Usage

After installation, invoke the plugin with vue invoke s3-deploy.

Answer the configuration prompts. This will inject a deploy script command into your package.json file.

Deploy your app with yarn deploy.

Options

Options are set in vue.config.js and overridden on a per-environment basis by .env, .env.staging, .env.production, etc.

{
    region: "AWS region for the specified bucket (default: us-east-1)",
    bucket: "The S3 bucket name (required)",
    assetPath: "The path to the built assets (default: dist)",
    deployPath: "Path to deploy the app in the bucket (default: /)",
    uploadConcurrency: "The number of concurrent uploads to S3 (default: 3)",
    pwa: "Sets max-age=0 for the PWA-related files specified",
    enableCloudfront: "Enables support for Cloudfront distribution invalidation",
    cloudfrontId: "The ID of the distribution to invalidate",
    cloudfrontMatchers: "A comma-separated list of paths to invalidate (default: /*)"
    publicReadFiles: "Apply public-read permissions to all dist files (default: true)"
}

The pwa option is meant to help make deploying progressive web apps a little easier. Due to the way service workers interact with caching, this option alone will tell the browser to not cache the service-worker.js file by default. This ensures that changes made to the service worker are reflected as quickly as possible.

You can specify which files aren't cached by setting a value for the pwaFiles option:

{
    pwaFiles: "index.html,dont-cache.css,not-this.js"
}

Per-Environment Overrides

Deployment options can be overridden with .env files to support development, staging, and production deployment environments.

The .env file options are, with examples:

VUE_APP_S3D_AWS_PROFILE=stagingadmin
VUE_APP_S3D_BUCKET=staging-bucket
VUE_APP_S3D_ASSET_PATH=dist/staging
VUE_APP_S3D_deploy_PATH=/app-staging
VUE_APP_S3D_REGION=staging-aws-east-1
VUE_APP_S3D_PWA=service-worker-stage.js,index.html
VUE_APP_S3D_UPLOAD_CONCURRENCY=5
VUE_APP_S3D_ENABLE_CLOUDFRONT=true
VUE_APP_S3D_CLOUDFRONT_ID=AIXXXXXXXX
VUE_APP_S3D_CLOUDFRONT_MATCHERS=/index.html,/styles/*.css,/*.png
VUE_APP_S3D_CLOUDFRONT_MATCHERS=/index.html,/styles/*.css,/*.png
VUE_APP_S3D_PUBLIC_READ_FILES=true

These options OVERRIDE the config options set in vue.config.js and should be used to customize a default set of options. A common use case is only overriding VUE_APP_S3D_BUCKET for production deployment.

Specifying AWS Credentials

The AWS SDK will pick up the default credentials from your ~/.aws/credentials file and from the environment variables AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, and AWS_SESSION_TOKEN.

To specify credentials other than default in ~/.aws/credentials, change the command in package.json to:

  "deploy": "AWS_PROFILE=other-profile-name vue-cli-service s3-deploy"

Changelog

2.1.2

  • Add option to write public-read permissions on all dist/ files.

2.1.1

  • Rollback crendential selection via awsProfile. The SDK supports this via the AWS_PROFILE environment variable.

2.1

  • Added deployPath option. Allows you to deploy to folder in the bucket, not always to the root. Fixes #15.
  • Added awsProfile for using AWS credentials other than default. Fixes #19.
  • Fixed #12: paths were built naively and broke deployment on Windows platforms.

v2.0.2

  • Fixed bug where deployment crashes if you declined Cloudfront on initial invocation.

v2.0.0

  • Added support for invalidating Cloudfront distributions on deploy.
  • Refactored how the configuration is stored and brought it more inline with vue cli standards. All config is in vue.config.js now.
  • Updated the dependency on vue-cli to 3.0.0-rc3
  • Squashed a few bugs along the way

v1.3

  • Added support for .env files and per-environment options

v1.2

  • Added parallel uploading

v1.1

  • Initial Release

Contributing

Contributions welcome. Just open a pull request.

vue-cli-plugin-s3-deploy's People

Contributors

andreasvirkus avatar bjrnt avatar multiplegeorges avatar nicekiwi avatar urbany avatar vongkim avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.