Skip to content

Commit ceac7ab

Browse files
patch0patch0
authored
Add workflow for production builds (#176)
 Add Jest GH Action reporter, so test failures are annotated in-line in the PR Add a report-coverage script to post the current coverage back to the PR as a comment Remove CircleCI CI stuff Add reusable workflow for builds and deploy to S3 Add environment config, so the deployment is noted on the PR This also goes with RaspberryPiFoundation/terraform#559 NB this PR assumes separate staging and preview buckets. I think the staging bucket needs creating before merge (or the variable needs changing)
1 parent 11facee commit ceac7ab

8 files changed

Lines changed: 175 additions & 190 deletions

File tree

‎.circleci/config.yml‎

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎.github/workflows/build-and-deploy.yml‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
name: Build and Upload to S3
2+
3+
on:
4+
workflow_call:
5+
inputs:
6+
cookiebot_domain_group_id:
7+
required: false
8+
default: "1e9a6bdd-5870-4d54-8e5f-adcf6b5c5499"
9+
type: string
10+
deploy_dir:
11+
required: true
12+
type: string
13+
environment:
14+
required: true
15+
type: string
16+
public_url:
17+
required: true
18+
type: string
19+
react_app_api_endpoint:
20+
required: false
21+
default: "https://staging-editor-api.raspberrypi.org"
22+
type: string
23+
react_app_authentication_client_id:
24+
required: false
25+
default: editor-api
26+
type: string
27+
react_app_authentication_url:
28+
required: false
29+
default: "https://staging-auth-v1.raspberrypi.org"
30+
type: string
31+
react_app_login_enabled:
32+
required: false
33+
default: "true"
34+
type: string
35+
secrets:
36+
AWS_ACCESS_KEY_ID:
37+
required: true
38+
AWS_REGION:
39+
required: true
40+
AWS_S3_BUCKET:
41+
required: true
42+
AWS_SECRET_ACCESS_KEY:
43+
required: true
44+
45+
jobs:
46+
build-deploy:
47+
runs-on: ubuntu-latest
48+
environment:
49+
name: ${{ inputs.environment }}
50+
url: ${{ inputs.public_url }}
51+
steps:
52+
- name: Checkout
53+
uses: actions/checkout@v1
54+
55+
- name: Cache dependencies
56+
uses: actions/setup-node@v3
57+
with:
58+
node-version: 16
59+
cache: 'yarn'
60+
61+
- name: Configure AWS credentials
62+
uses: aws-actions/configure-aws-credentials@v1
63+
with:
64+
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
65+
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
66+
aws-region: ${{ secrets.AWS_REGION }}
67+
68+
- name: Install code
69+
run: yarn install --frozen-lock-file
70+
71+
- name: Build site and WC bundle
72+
run: |
73+
yarn build
74+
yarn build:wc
75+
env:
76+
COOKIEBOT_DOMAIN_GROUP_ID: ${{ inputs.cookiebot_domain_group_id }}
77+
PUBLIC_URL: ${{ inputs.public_url }}
78+
REACT_APP_API_ENDPOINT: ${{ inputs.react_app_api_endpoint }}
79+
REACT_APP_AUTHENTICATION_CLIENT_ID: ${{ inputs.react_app_authentication_client_id }}
80+
REACT_APP_AUTHENTICATION_URL: ${{ inputs.react_app_authentication_url }}
81+
REACT_APP_LOGIN_ENABLED: ${{ inputs.react_app_login_enabled }}
82+
83+
- name: Deploy site to S3 bucket
84+
run: aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ inputs.deploy_dir }} --delete

‎.github/workflows/main.yml‎

Lines changed: 39 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,14 @@ jobs:
4545
run: yarn install --frozen-lock-file
4646

4747
- name: Run tests
48-
run: yarn test
48+
run: yarn run test --coverage --maxWorkers=4 --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
49+
env:
50+
JEST_JUNIT_OUTPUT_DIR: ./coverage/
51+
52+
- name: Record coverage
53+
run: ./.github/workflows/record_coverage
54+
env:
55+
GITHUB_TOKEN: ${{ github.token }}
4956

5057
test-cypress:
5158
runs-on: ubuntu-latest
@@ -82,68 +89,37 @@ jobs:
8289
cypress/screenshots
8390
cypress/videos
8491
85-
build-deploy:
92+
93+
build-and-deploy-release:
94+
if: github.ref_type == 'tag'
8695
needs:
8796
- test
88-
# Disabling test-cypress while it is flaky
89-
# - test-cypress
90-
runs-on: ubuntu-latest
91-
steps:
92-
- name: Checkout
93-
uses: actions/checkout@v1
94-
95-
- name: Cache dependencies
96-
uses: actions/setup-node@v3
97-
with:
98-
node-version: 16
99-
cache: 'yarn'
100-
101-
- name: Configure AWS credentials
102-
uses: aws-actions/configure-aws-credentials@v1
103-
with:
104-
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
105-
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
106-
aws-region: eu-west-2
107-
108-
- name: Set bucket
109-
run: |
110-
if [ ${{ github.ref_type }} == 'tag' ]; then
111-
echo "Deploying to production bucket"
112-
echo "bucket=python-editor-dist-test" >> $GITHUB_ENV
113-
else
114-
echo "Deploying to staging/preview bucket"
115-
echo "bucket=python-editor-dist-test" >> $GITHUB_ENV
116-
fi
117-
shell: bash
118-
119-
- name: Set deploy directory
120-
run: |
121-
if [ ${{ github.ref_type }} == 'tag' ]; then
122-
echo "Deploying tagged release ${{ github.ref_name }}"
123-
echo "deploy_dir=${{ github.ref_name }}" >> $GITHUB_ENV
124-
elif [ ${{ github.ref }} == 'refs/head/main' ]; then
125-
echo "Deploying staging release"
126-
echo "deploy_dir=staging" >> $GITHUB_ENV
127-
else
128-
echo "Deploying preview release ${{ github.ref_name }}"
129-
echo "deploy_dir=previews/${{ github.ref_name }}" >> $GITHUB_ENV
130-
fi
131-
shell: bash
132-
133-
- name: Set PUBLIC_URL
134-
run: |
135-
public_url=https://${{ env.bucket }}.s3.eu-west-2.amazonaws.com/${{ env.deploy_dir }}
136-
echo "Setting PUBLIC_URL to $public_url"
137-
echo PUBLIC_URL=$public_url >> $GITHUB_ENV
138-
shell: bash
139-
140-
- name: Install code
141-
run: yarn install --frozen-lock-file
142-
143-
- name: Build site and WC bundle
144-
run: |
145-
yarn build
146-
yarn build:wc
97+
uses: ./.github/workflows/build-and-deploy.yml
98+
with:
99+
deploy_dir: ${{ github.ref_name }}
100+
environment: production
101+
public_url: https://editor.raspberrypi.org/${{ github.ref_name }}
102+
react_app_api_endpoint: https://editor-api.raspberrypi.org
103+
react_app_authentication_url: https://auth-v1.raspberrypi.org
104+
secrets: inherit
105+
106+
build-and-deploy-staging:
107+
if: github.ref == 'refs/heads/main'
108+
needs:
109+
- test
110+
uses: ./.github/workflows/build-and-deploy.yml
111+
with:
112+
deploy_dir: ${{ github.ref_name }}
113+
environment: staging
114+
public_url: https://staging-editor.raspberrypi.org/${{ github.ref_name }}
115+
secrets: inherit
116+
117+
build-and-deploy-preview:
118+
if: github.ref_type == 'branch' && github.ref != 'refs/heads/main'
119+
uses: ./.github/workflows/build-and-deploy.yml
120+
with:
121+
deploy_dir: previews/${{ github.ref_name }}
122+
environment: previews/${{ github.ref_name }}
123+
public_url: http://python-editor-dist-test.s3-website.eu-west-2.amazonaws.com/previews/${{ github.ref_name }}
124+
secrets: inherit
147125

148-
- name: Deploy site to S3 bucket
149-
run: aws s3 sync ./build/ s3://${{ env.bucket }}/${{ env.deploy_dir }} --delete

.circleci/record_coverage renamed to .github/workflows/record_coverage

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
1-
#!/bin/bash -ueo pipefail
1+
#!/bin/bash -eu
22

33
# Record coverage
44
#
5-
# This script uses the Circle and Github APIs to poke a comment into a PR about test coverage.
5+
# This script uses the Github APIs to poke a comment into a PR about test coverage.
66
#
7-
# To work, the GITHUB_TOKEN and CIRCLE_TOKEN vars must be in the environment,
8-
# with appropriate API tokens from GH and Circle.
7+
# To work, the GITHUB_TOKEN var must be in the environment
98
#
10-
# Also to get the magic link to your test coverage, you'll want to store the
11-
# `coverage/` directory.
12-
#```
13-
# - store_artifacts:
14-
# path: coverage
15-
#```
169

1710
CURL_ARGS="-s -S -f"
1811

@@ -43,9 +36,10 @@ fi
4336
sudo apt update -qq
4437
sudo apt install -qq --no-install-recommends -y xmlstarlet
4538
which jq > /dev/null || sudo apt-get install -y jq
39+
which curl > /dev/null || sudo apt-get install -y curl
4640

4741
# This is the message that makes it into github
48-
msg="* CircleCI build [#${CIRCLE_BUILD_NUM}](${CIRCLE_BUILD_URL})\n"
42+
msg="* Github [Run ${GITHUB_RUN_ID}]($GITHUB_SERVER_URL/$GITHUB_REPOSITORY/actions/runs/$GITHUB_RUN_ID)\n"
4943
msg="$msg* Test coverage: "
5044

5145
statements=$(xmlstarlet sel -t -v '/coverage/project[@name="All files"]/metrics/@statements' $clover_xml)
@@ -58,21 +52,13 @@ if [ "${coverage}" = "null" ] ; then
5852
exit 0
5953
fi
6054

61-
artifacts_response=$(curl $CURL_ARGS -H "Circle-Token: $CIRCLE_TOKEN" https://circleci.com/api/v1.1/project/gh/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/${CIRCLE_BUILD_NUM}/artifacts)
62-
coverage_url=$(echo ${artifacts_response} | jq -r '. | map(select(.path == "coverage/lcov-report/index.html"))[0].url')
63-
64-
if ! [ "${coverage_url}" = "null" ] ; then
65-
msg="$msg [$coverage%]($coverage_url)\n\n"
66-
else
67-
msg="$msg $coverage%\n\n"
68-
msg="$msg > CircleCI didn't store the coverage index (maybe the store_artifacts step is missing?)"
69-
fi
55+
msg="$msg $coverage%\n\n"
7056

7157
# Find associated PR. *NB* we're assuming that the first, open PR is the one
7258
# to comment on.
7359
q="query {
74-
repository(name: \"${CIRCLE_PROJECT_REPONAME}\", owner: \"${CIRCLE_PROJECT_USERNAME}\") {
75-
ref(qualifiedName: \"${CIRCLE_BRANCH}\") {
60+
repository(name: \"${GITHUB_REPOSITORY##*/}\", owner: \"${GITHUB_REPOSITORY%%/*}\") {
61+
ref(qualifiedName: \"${GITHUB_REF_NAME}\") {
7662
associatedPullRequests(first: 1) {
7763
nodes {
7864
id

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55

66
## [Unreleased]
77

8+
### Changed
9+
- Update build workflow with a reusable job to update preview, staging, and prod (#176)
10+
811
## [0.3.0]
912

1013
### Added

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@ It is possible to add query strings to control how the web component is configur
6565

6666
For example, to load the page with the Sense Hat always showing, add [`?sense_hat_always_enabled` to the URL](http://localhost:3001?sense_hat_always_enabled)
6767

68-
## Review apps
68+
## Deployment
69+
70+
Deployment is managed through Giithub actions. The UI is deployed to staging and production environments via an S3 bucket. This requires the following environment variables to be set
71+
72+
* `AWS_ACCESS_KEY_ID`
73+
* `AWS_REGION`
74+
* `AWS_S3_BUCKET`
75+
* `AWS_SECRET_ACCESS_KEY`
76+
77+
Other variables that pertain to the app, rather than its deployment are set with defaults in the [build-and-deploy workflow](./.github/workflows/build-and-deploy.yml). These are also in `.env.example`.
78+
79+
### Review apps
6980

7081
Currently the build is deployed to both S3 and Heroku. The PR should get updated with the Heroku URL, and the web component demo is at `/web-component.html` on the Heroku review app domain.
82+

0 commit comments

Comments
 (0)