Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve CI #5

Merged
merged 6 commits into from
Nov 3, 2021
Merged

Improve CI #5

merged 6 commits into from
Nov 3, 2021

Conversation

StaleLoafOfBread
Copy link
Owner

No description provided.

@github-learning-lab
Copy link
Contributor

Matrix builds

Great work so far! By targeting specific versions of Node, we've configured a build matrix which allow us to test across multiple operating systems, platforms, and language versions. See Configuring a matrix build in GitHub Help if you'd like to learn more.

I'll respond when you commit the changes in the comment below.

Co-authored-by: github-learning-lab[bot] <37936606+github-learning-lab[bot]@users.noreply.github.com>
@github-learning-lab
Copy link
Contributor

New Job

Great, if you look at the logs now, you'll notice that multiple builds will exist: 4 build to be exact! That's because for each of the 2 operating systems we're running tests against 2 versions so: 2 OS ✖️ 2 Node.js versions = 4 builds.

Our custom workflow now accounts for:

  • test against multiple targets so that we know if our supported operating systems and Node.js versions are working

Step 9: Use multiple jobs

icon of gears indicating relationship between multiple jobs

Let's now try to create a dedicated test job and satisfy the second item in our custom workflow checklist.

This will allow us to separate the build and test functions of our workflow into more than one job that will run when our workflow is triggered.

Activity: Edit your workflow file to separate build and test jobs

  1. Edit your workflow file
  2. Create a new job called "test" as follows (we'll use ellipses ... to only show the parts of the workflow we're interested in, but you should not copy the ellipses directly):
    name: Node CI
    
    on: [push]
    
    jobs:
      build:
        ...
      test:
        ...
  3. In the build job, include the following portions of your existing workflow:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - name: npm install and build webpack
          run: |
            npm install
            npm run build
  4. In the newly created test job, include the following portions of your existing workflow:
    test:
      runs-on: ubuntu-latest
      strategy:
        matrix:
          os: [ubuntu-latest, windows-2016]
          node-version: [12.x, 14.x]
      steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install, and test
        run: |
          npm install
          npm test
        env:
          CI: true
If you'd like to copy and paste the full workflow file instead, click here to see it in its entirety.
name: Node CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: npm install and build webpack
        run: |
          npm install
          npm run build

  test:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        os: [ubuntu-latest, windows-2016]
        node-version: [12.x, 14.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, and test
      run: |
        npm install
        npm test
      env:
        CI: true

When you commit to this branch, the workflow should run again. I'll respond when it is finished running.


Actions workflow not running? Click here

When a GitHub Actions workflow is running, you should see some checks in progress, like the screenshot below.

checks in progress in a merge box

If the checks don't appear or if the checks are stuck in progress, there's a few things you can do to try and trigger them:

  • Refresh the page, it's possible the workflow ran and the page just hasn't been updated with that change
  • Try making a commit on this branch. Our workflow is triggered with a push event, and committing to this branch will result in a new push
  • Edit the workflow file on GitHub and ensure there are no red lines indicating a syntax problem

@github-learning-lab
Copy link
Contributor

Waiting on tests

Great! We've now got two nicely separated build and test jobs. Our custom workflow now accounts for:

  • test against multiple targets so that we know if our supported operating systems and Node.js versions are working
  • dedicated test job so that we can separate out build from test details

If you'd like to learn more about jobs, see:

Step 10: Run multiple jobs

⌨️ Activity: Wait for the result of multiple jobs in your workflow

No action required in this step - just waiting. I'll respond when the workflow runs your jobs.


Actions workflow not running? Click here

When a GitHub Actions workflow is running, you should see some checks in progress, like the screenshot below.

checks in progress in a merge box

If the checks don't appear or if the checks are stuck in progress, there's a few things you can do to try and trigger them:

  • Refresh the page, it's possible the workflow ran and the page just hasn't been updated with that change
  • Try making a commit on this branch. Our workflow is triggered with a push event, and committing to this branch will result in a new push
  • Edit the workflow file on GitHub and ensure there are no red lines indicating a syntax problem

@github-learning-lab
Copy link
Contributor

Use the upload

The workflow has finished running!

You may notice build succeeded, but each of the test jobs failed. That's because the build artifacts created in build aren't available to the test job. Each job executes in a fresh instance of the virtual environment. This is due to the design of the virtual environments themselves.

So what do we do when we need the work product of one job in another? We can use the built-in artifact storage to save artifacts created from one job to be used in another job within the same workflow.

Step 11: Upload a job's build artifacts

icon of a binary file

Artifacts allow you to persist data after a job has completed, and share that data with another job in the same workflow. An artifact is a file or collection of files produced during a workflow run.

To upload artifacts to the artifact storage, we can use an action built by GitHub: actions/upload-artifacts.

⌨️ Activity: Use the upload action in your workflow file to save a job's build artifacts

You can follow the manual steps below, or accept the suggestion in the following comment.

  1. Edit your workflow file
  2. Add a step to your build job that uses the upload-artifacts action.
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - name: npm install and build webpack
            run: |
              npm install
              npm run build
          - uses: actions/upload-artifact@main
            with:
              name: webpack artifacts
              path: public/
  3. Commit your change to this branch

I'll respond when you commit to this branch.

Co-authored-by: github-learning-lab[bot] <37936606+github-learning-lab[bot]@users.noreply.github.com>
@github-learning-lab
Copy link
Contributor

Use the download

Great! The build artifacts will now be uploaded to the artifact storage. If you wait for the workflow to finish, you'll notice the test job still fails. This is for a number of reasons:

  • jobs run in parallel, unless configured otherwise
  • each job runs in its own virtual environment, so although we've pushed our artifacts to storage, the test job needs to retrieve them.

Step 12: Download a job's build artifacts

icon of a binary file

To remedy this, we'll run test only after build is finished so the artifacts are available.

Similar to the upload action to send artifacts to the storage, we'll use another action built by GitHub to download these previously uploaded artifacts from the build job: actions/download-artifact.

⌨️ Activity: Use the download action in your workflow file to access a prior job's build artifacts

You can follow the manual steps below, or accept the suggestions in the following comments.

  1. Edit your workflow file
  2. Configure the test job to run only after the build job is completed (we'll use ellipses ... to only show the parts of the workflow we're interested in, but you should not copy the ellipses directly):
      test:
        needs: build
        runs-on: ubuntu-latest
        ...
  3. Add a step to your test job that uses the download-artifacts action.
      test:
        needs: build
        runs-on: ubuntu-latest
        ...
        steps:
        - uses: actions/checkout@v2
        - uses: actions/download-artifact@main
          with: 
            name: webpack artifacts
            path: public
        - name: Use Node.js ${{ matrix.node-version }}
          uses: actions/setup-node@v1
          with:
            node-version: ${{ matrix.node-version }}
        - name: npm install, and test
          run: |
            npm install
            npm test
          env:
            CI: true

I'll respond when you've edited your workflow file.

Co-authored-by: github-learning-lab[bot] <37936606+github-learning-lab[bot]@users.noreply.github.com>
Copy link
Contributor

@github-learning-lab github-learning-lab bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge the CI

Awesome work!

Our custom workflow now accounts for:

  • test against multiple targets so that we know if our supported operating systems and Node.js versions are working
  • dedicated test job so that we can separate out build from test details
  • access to build artifacts so that we can deploy them to a target environment

Step 13: Share the improved CI workflow with the team

⌨️ Activity: Merge the pull request with the improved workflow

  1. Merge this pull request so our new CI workflow is available to the entire team

In the next few steps, we'll finish supporting our team's workflow:

  • branch protections so that the main branch can't be deleted or inadvertently broken
  • required reviews so that any pull requests are double checked by teammates
  • obvious approvals so we can merge quickly and potentially automate merges and deployments

I'll respond when you merge this pull request.

Co-authored-by: github-learning-lab[bot] <37936606+github-learning-lab[bot]@users.noreply.github.com>
@StaleLoafOfBread StaleLoafOfBread merged commit 2403c0c into main Nov 3, 2021
@github-learning-lab
Copy link
Contributor

Let's go to the next step.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant