Skip to content

Latest commit

 

History

History
126 lines (99 loc) · 6.13 KB

README.md

File metadata and controls

126 lines (99 loc) · 6.13 KB

Frontend Infrastructure Reusable Workflows

Reusable GitHub workflows which help implementing a CI/CD pipeline described in this repository.

Prerequisites

In order to be compatible with these workflows, your SPA needs to meet a few criteria:

  • if your SPA is deployed to different environments with a varying config (like API keys, urls etc.), it needs to be able to build an environment agnostic deploy bundle, i.e. a bundle which allows injecting a specific environment configuration if necessary. The way to accomplish this will vary depending on the build tooling you use.
  • if your SPA is deployed to different environments, you need to provide a command which can inject the config for the selected environment into the bundle. If provided, the deploy workflow will invoke that command before uploading files to S3. For convenience, the command will be called with SPA_BUNDLE_DIR, SPA_ENV and SPA_TREE_HASH environment variables set to the corresponding workflow input values
  • all the long-cacheable assets like JS/CSS/images need to have a cache buster string in their name and they need to be placed in a ${build_dir}/static directory when the production version is built.

Workflows

Build

Efficiently runs the build script (defined in package.json), bundles and uploads the result to an S3 registry bucket.

Inputs

Name Description Type Default Required
app_name Name of the app, unique for the repo, kebab-cased string n/a yes
bucket_name Name of the S3 registry bucket string n/a yes
build_cmd Command for building the deploy bundle string n/a yes
build_dir Location of the deploy bundle after build string n/a yes
registry_scope Org scope for the GitHub Package Registry string @pleo-io no

Secrets

Use the secrets: inherit options when using the workflow.

Name Description Required
AWS_ACCESS_KEY_ID_FRONTEND_REGISTRY ID of a AWS key that allows r/w access to the registry bucket yes
AWS_SECRET_ACCESS_KEY_FRONTEND_REGISTRY Secret of a AWS key that allows r/w access to the registry bucket yes
GH_REGISTRY_NPM_TOKEN Token for NPM package registry yes

Outputs

Name Description
tree_hash Tree hash of the code built
bundle_uri S3 URI of the bundle in the registry bucket

Example Use

build:
  uses: pleo-io/spa-tools/.github/workflows/build.yml@v6
  secrets: inherit
  with:
    app_name: my-app
    build_cmd: yarn build:app
    build_dir: dist
    bucket_name: my-registry-bucket

Deploy

Copies the output files from the registry to the origin S3 bucket and updates the cursor file for the current branch.

Inputs

Name Description Type Default Required
bucket_name Name of the S3 origin bucket string n/a yes
bundle_uri S3 URI of the bundle in the registry bucket string n/a yes
domain_name Domain name for the app (e.g. app.example.com) string n/a yes
environment Name of the deployment environment string n/a yes
tree_hash Tree hash of the code to deploy string n/a yes
bundle_dir Directory where the bundle should be unpacked string dist no
inject_config_cmd Command to run to inject the environment config string n/a no
registry_scope Org scope for the GitHub Package Registry string @pleo-io no

Secrets

Use the secrets: inherit options when using the workflow.

Name Description Required
AWS_ACCESS_KEY_ID_FRONTEND_REGISTRY ID of a AWS key that allows read access to the registry bucket yes
AWS_SECRET_ACCESS_KEY_FRONTEND_REGISTRY Secret of a AWS key that allows read access to the registry bucket yes
AWS_ACCESS_KEY_ID_ORIGIN ID of a AWS key that allows r/w access to the origin bucket yes
AWS_SECRET_ACCESS_KEY_ORIGIN Secret of a AWS key that allows r/w access to the origin bucket yes

Outputs

Name Description
deployment_url URL where the deployment can be accessed

Example Use

deploy:
  uses: pleo-io/spa-tools/.github/workflows/deploy.yml@v6
  needs: build
  secrets: inherit
  with:
    environment: staging
    bundle_uri: ${{ needs.build.outputs.bundle_uri }}
    tree_hash: ${{ needs.build.outputs.tree_hash }}
    bucket_name: my-origin-bucket
    domain_name: app.staging.example.com
    inject_config_cmd: yarn apply:config