Zero To One: Github Actions On Cycle.io

Aug 16th, 2022 - Chris Aubuchon, Head of Customer Success

Zero To One: Github Actions On Cycle.io

Github's, “Github Actions” CI/CD tooling is becoming an increasingly popular option for developers. I've personally worked with several Cycle users who are adopting Github Actions as part of their deployment solution and we've found that when pairing GH actions with Cycle it makes for a simple, yet powerful combination.

Today we'll stroll through a basic example of using Github Actions alongside the Cycle platform… which will include:

Setting up a new repo.
Setting up a Cycle Pipeline.
Configuring an Environment on Github to hold secrets.
Going through the getting started guide on Github actions.
Modifying the getting started file to work with Cycle pipelines.

Setting Up

The first thing to do is create a new repository and link it to a local set of files. For this I chose to use create-react-app as the base, because it:

Comes working out of the box.
Is easy to containerize.
Simple to modify, as to verify changes.

In the root of that directory, add the following to a Dockerfile:

FROM node:16-alpine as builder 
RUN mkdir -p /app 
WORKDIR /app 
COPY package.json ./ 
RUN npm install 
COPY ./ ./ 
RUN npm run build 
FROM nginx:alpine 
COPY --from=builder /app/build /usr/share/nginx/html

Commit all the starter files to the repository and then move on to setting up things on the Cycle side. First, create a new Dockerfile Image Source, using the repository you've just set up. If you've created this repository as Private, add whatever type of authentication you might need, otherwise, just enter the url of the remote and leave the rest of the form as the default settings. Import a copy of the new image from the source you've just created.

Next, create a new environment and use the container deploy form to deploy the recently imported image. Start the environment and test your container by visiting the public URL or checking the console for your desired output if it's not publicly networked.

The last thing to do with the initial setup is to create a pipeline. Create a new pipeline and within the first stage add three steps:

Create Image
Import Image
Reimage Container

For the create step, make sure to select the dockerfile image source that was created earlier in the guide and check the “Enable Reference” box at the bottom of the form, filling in a memorable reference like “create-image”.

On the import step select “From Previous Step” and select the created image from step one. Again, select “Enable Reference” using something like “import-image”.

Finally for the reimage container step, select the environment that the existing container is in and then on the second half of the form, select the reference from step 2 “import-image”. Finally save the step and save the pipeline. To test your pipeline is running correctly feel free to trigger the pipeline manually from the pipeline dashboard.

Getting Started With Github Actions

The getting started guide for Github Actions is actually really short and easy to understand. To break it down, you'll need a directory in the root of your repo called `.github` which holds a subdirectory of `workflows`. From there, copy the preconfigured script provided on the getting started page into a new YAML file and commit the changes.

The getting started guide is configured to just show some basic output. If you've configured it correctly, you'll be able to click on the “Actions” tab in the repo you'd created earlier in this guide and see the action run each time you complete a push to the repo.

The example from getting started will output something similar to this.

The main components of the workflow yaml file are name, on, and jobs. Luckily, that's most of the components we'll need for hooking up our pipeline to trigger on push to this repo. Before we restructure our document, let's take a moment to create the secrets we'll need and setting up our Cycle pipeline trigger key.

To create a pipeline trigger key, navigate to your pipeline and click on the “Trigger Keys” tab. Select “Create New” and then fill in a name for the key. On the next page you'll see two things:

The secret (this will only show once so don't navigate away from this page quickly)
The cURL API call.

Now, with the secret and the API call, navigate to your repo and click on “Settings” from here you'll see a sub-navigation that says “Environments”. Click on “Add Environment”, give the environment a name, and add any security configurations you want (keeping in mind that the assets will need to be readable by your repo actor). Add the PIPELINE_SECRET and PIPELINE_URL secrets and save the environment.

Delete the “getting started” workflow yaml files contents and replace it with the following.

name: Pipelines Demo
on: [push]
jobs:
  Trigger-Reimage-Pipeline:
    environment: `REPLACE ME WITH YOUR ENVIRONMENT NAME`
    runs-on: ubuntu-latest
    steps:
      - name: Reimage Pipeline Trigger
        env:
          PIPELINE_SECRET: ${{ secrets.PIPELINE_SECRET}}
          PIPELINE_URL: ${{ secrets.PIPELINE_URL }}
        run: |
          curl $PIPELINE_URL \
            -H "Content-Type: application/json" \
            -d "{ \"secret\": \"$PIPELINE_SECRET\"}" \
            -X POST

You'll notice that we've added something under our job called “environment”, put the name of the Github environment you created here. This will give you access to the secrets you created in that environment.

Putting It All Together

Now that everything is set up, make an arbitrary change to the App.js (or whatever file you can see a change in for your program), commit, and push. Then check the “Actions” tab and make sure that you got a 200 and a job ID back. If so you can head over to the Cycle portal if you want to check in on your pipeline running and then check the webpage or terminal to see your changes.

Congrats, you've just taken the first steps towards using Github Actions alongside Cycle. We'd love to hear from you about how you took this process even further or what great things you found along the way. Come join our Public Slack Channel and leave us a note with your update.

💡 Interested in trying the Cycle platform? Create your account today! Want to drop in and have a chat with the Cycle team? We'd love to have you join our public Cycle Slack community!