Auto-visualizing CI results with Hugo and Amplify Console

CI results visualizing automatically after building using Hugo and AWS Amplify Console

TL;DR;

1. As Pre-condition, already made one process for building an application with AWS Amplify Console.
2. In the process, there are test actions.
3. Wants to visualize those results after testing automatically.
4. Puts a trigger to build an application and make tests for pushing code to a target application that I made before.
   https://github.com/kojiisd/cognito-user-manager
5. In the building, testing results uploaded to test result repository as Hugo posting code (Markdown). The website code is below.
   https://github.com/kojiisd/hugo-test-result-management
6. Puts a trigger to build the test result page to deploy.

Flow of triggers and build actions

The detail flow what I want to do:

1. Makes a process for building and testing with Amplify Console.
   * Cognito management web service
   In this building process, testing with Karate and unittest are executed.
2. Push the testing results to Github as test results.
   * https://github.com/kojiisd/hugo-test-result-management
   This is a website to show test result built by Hugo.
3. Building process for the website by pushing test result.

For above processes, we can confirm the build results as web-site automatically and keep the history of test results.

1. Makes a process for building and testing with Amplify Console

I already posted about this topic below.
CI for AWS Amplify Console with Python unittest and Karate
* Now Amplify Console was upgraded so there are several different points (like Python default version) but overview and processing are same.

2. Push the testing results to Github as test results

As pre-condition, need to prepare one web-site based on Hugo.
https://github.com/kojiisd/hugo-test-result-management
In this page, I just put new test results page as Markdown text and list-up in main page.

Test result page view

For each pages (Karate and unittest), we just put same test result page as below.

test result page of unittest

test result page of Karate

I need to set build in Amplify Console to deploy. But in Amplify Console, it can be realized as Hugo web page and no need to put any additional configurations. Following build.yml only needed (auto-generated).

version: 0.1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

2–1. Push script preparing

In the main application (Cognito management web service), I need to prepare following processes to push the test results to Github repository of test result page (hugo).

1. Execute unittest and Karate.
2. Hugo test result page source code clone from Github.
3. New page adding with hugo command and adding to write Krate and unittest result to the new page (Markdown).
4. Commit/Push the code to Github.
5. Start the build of hugo test result page in Amplify Console automatically.
6. Deploy the test result page.

2–1–1. Execute unittest and Karate

This is already made in previous applicationt (Cognito management web service). The target yaml part is below.

    - python3 tests/test_user_handler.py
：
：
    - cd cognito-manager-client/
    - npm install -g forever
    - forever start node_modules/@angular/cli/bin/ng serve
    - yum install -y java-1.8.0-openjdk-devel.x86_64
    - java -version
    - yum install -y apache-maven
    - mvn --version
    - cd e2e_karate/manager
    - mvn clean test

2–2–2. Clones a code of Hugo test result page from Github

After testing with Karate and unittest, clone the test result page from Github. In this time, I used AWS Systems Manager parameter store for account management.

    - yum -y install git
    - yum -y install jq
    - touch ~/.netrc
    - echo "machine github.com" >> ~/.netrc
    - echo "login `aws ssm get-parameters --names ${SSM_USER_KEY} --region us-east-1  --profile ${SLS_AWS_ACCOUNT_ID} | jq -r '.Parameters[].Value'`" >> ~/.netrc
    - echo "password `aws ssm get-parameters --names ${SSM_PASS_KEY} --with-decryption --region us-east-1  --profile ${SLS_AWS_ACCOUNT_ID} | jq -r '.Parameters[].Value'`" >> ~/.netrc
    - git clone ${GIT_URL}
    - cd ${REPO_NAME}

2–2–3. New page adding with hugo command for test result pages by Karete and unittest

After cloning the code, I create a new page with Markdown for Hugo. In this time, I want to put HTML code in Markdown for efficiency, I used “Shortcodes” in Hugo web-site.

Shortcodes

In the build YAML file, it will contain HTML tags so because of YAML syntax, I collected those processing scripts in a shell file.

# for karate
hugo new karate/`cat now.txt`.md
echo "{{<rawhtml>}}" >> content/karate/`cat now.txt`.md
echo "`cat ../result_karate.html`" >> content/karate/`cat now.txt`.md
echo "{{</rawhtml>}}" >> content/karate/`cat now.txt`.md

# for unittest
hugo new unittest/`cat now.txt`.md
echo "{{<rawhtml>}}" >> content/unittest/`cat now.txt`.md
echo "`cat ../result_unittest.html`" >> content/unittest/`cat now.txt`.md
echo "{{</rawhtml>}}" >> content/unittest/`cat now.txt`.md

2–2–4. Commit/Push new pages to Github

With following scripts, commit and push those new pages to Github.

git config --global user.email ${GIT_EMAIL}
git config --global user.name ${GIT_NAME}
git add *
git commit -a -m "`cat ../now.txt` commit."
git push origin master

2–2–5. Start build process

According to previous commit/push process, Hugo web-site Amplify Console build process will be started automatically.

2–2–6. Deploy a test result page

As a result, we can see the new test result page as web-site.

Conclusion

By using Nest Amplify Console build process, I could get the test results as a web-site and store history of testing. It is easy to build them with Amplify Console.