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:
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:
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:
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.
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 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:
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.
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!