Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

github actions
github

How to set up continuous deployment using Github Actions

Talha Ashar

Continuous deployment refers to the practice of automatically deploying code to production. Therefore, changes to an application can be sent into production faster than manual deployment.

Continuous deployment can actually result in safer deployments because you make small changes to the application with each deployment. As a result, you can easily identify which deployment may be responsible for any bugs in the application.

The process to set up a continuous deployment pipeline is illustrated below:

Continuous deployment set up walkthrough

To demonstrate the process of setting up a continuous deployment pipeline, let’s build and deploy a simple Node.js application.

To set up the pipeline, you will need to take the following steps:

  1. Create a Node.js application.
  2. Add automated tests.
  3. Push changes to Github.
  4. Set up continuous integration through Github Actions.
  5. Set up continuous delivery through Github Actions.
  6. Deploy the code.

Create the Node.js application

Before you can actually create the Node.js application, you must ensure that the Node.js and npm packages are installed in your system. You can use this link to find and install the package versions that suit your operating system.

With the packages installed, you can now create the application using the npm init -y command, as shown below:

mkdir simple_app
cd simple_app
npm init -y

Once the application is created, you should see a package.json file in your working directory.

The next step is to use the command prompt to install the dependencies needed to make the Node.js application work, as shown below:

npm install --save-dev nodemon
npm install --save express

With the dependencies installed, you need to specify how the application should start for the production and development stages. For this purpose, you need to amend the package.json file so that the “scripts” entry resembles the following:

"scripts":{
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node index.js",
  "dev": "nodemon index.js"
}

Finally, you can create an index.js file that will display a simple message upon a GET request from a browser, as shown below:

const express = require('express');
const port = process.env.port || 5000;
const app = express();

// response to send for GET request from browser
app.get('/', (req, res) => {
    res.send('App Working!');
});

// listening for connections to app
app.listen(port, () => { console.log('The App is running!'); });
module.exports = app

You can use the npm run dev command in the command prompt to confirm if the app is working. The message output in line 99 in the code above should also be visible in the command prompt.

Add automated tests

Automated tests are used to ensure that the changes made to the code perform as expected before deployment.

Before the test file can be created, you need to install the mocha and supertest dependencies, as shown below:

npm install mocha supertest --save-dev

Next, you should create a sub-directory within your current working directory. The sub-directory will contain the test.js file, as shown below:

const request = require("supertest");
const app = require("../index");

// making a GET request to the app
describe("GET /", () => {
    it("App working correctly", (done) => {
        request(app).get("/").expect("App Working!", done);
    })
});

The test.js file, as shown above, makes a simple GET request to the application. If the expected response, “App Working!”, is received, the test will pass.

To ensure that the test file runs, you will need to alter the entry for “test” under the “scripts” object in the package.json file, as shown below:

"scripts": {
  "test": "mocha ./test/* --exit", 
... // remaining code remains the same
}

Finally, you can now upload the files to a Github repository.

Note: For information on how to upload a project to Github, please visit this link.

Set up continuous integration

Continuous integration creates a build for the new code that is pushed to the repository.

To create the continuous integration pipeline, you must perform the following steps:

  1. Navigate to the “Actions” option from the toolbar in your project’s Github repository.
  2. Choose the new workflow option. If this is the first time you create an Action, you can ignore this step and move on to step 33.
  3. Choose the Node.js template from the options for continuous integration workflows, as shown below:
widget
  1. Github will create a node.js.yml file for your repository. Choose the start commit option and commit the new file to your repository. This starts the workflow run and completes the continuous integration setup.

Note: Remember to pull the changes from your Github repository into your local repository.

Set up continuous delivery

To set up continuous delivery, the code needs to be deployed. For this walkthrough, we’ll use Heroku.

Once you have created an account on Heroku, you will need to take the following steps to enable continuous delivery:

  1. Choose the Account Settings option from your dashboard.
  2. Navigate to the API Key key section and click on Reveal.
  3. Copy the revealed API Key.
  4. Return to your Github repository and choose the Settings option from the toolbar.
  5. Choose the Secrets option from the sidebar and add a new repository secret.
  6. To add a new repository secret, you must provide a name and a value. You can use HEROKU_API_KEY for the name field and paste the API Key you copied from Heroku into the value field.

Once the continuous delivery pipeline has been created, the final step is to deploy the code to Heroku.

Deploy code

First, you will need to install the Heroku CLI on your local system. Once it has been installed, you can deploy your app to Heroku using the following commands:

heroku apps:create simple-app
git push heroku main

In the above command, simple-app can be any name you wish. Unfortunately, Heroku requires app names to be unique, so you may need to alter your app’s name until it is acceptable.

Now that the app has been manually deployed, you only need to make a few changes to the node.js.yml file so that the changes are automatically deployed to Heroku when you push them to the main branch of your Github repository.

You will need to alter the node.js.yml file so that it resembles the file below:

name: Node.js CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test
  # These are the changes you need to add
  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: akhileshns/heroku-deploy@v3.12.12
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "simple-app"
          heroku_email: "example@emal.com"

First, you will need to change line 11 of your original node.js.yml file to include the option CI/CD instead of just CI.

Next, you will need to add lines 293929-39 to the original node.js.yml file. These lines contain instructions for the deploy job responsible for automatically deploying the changes you push to your Github repository.

Remember to add the name of your deployed app against heroku_app_name in line 3838, as well as the email address you used to create your Heroku account against heroku_email in line 3939.

Finally, you can push the new node.js.yml file to your Github repository’s main branch.

Conclusion

With the continuous deployment pipeline set up completely, any code that you push to your Github repository’s main branch will automatically be deployed and reflected on your web application.

Each deployment appears as a separate category under the “Actions” option in your Github repository.

RELATED TAGS

github actions
github

CONTRIBUTOR

Talha Ashar
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring