Session 2: Enterprise-Scale CI/CD and Utilising APIs

As depicted in figure below, besides hosting your project source code on Github or Bitbucket, we need every project to be deployed on Heroku where we can access your project via a public or protected URL. Please watch this video where we have demonstrated how to continually integrate your project source code and continually deploy it to a production environment.

To automate this process and deploy your site you need a couple of things:

Deploying a static website to Heroku

If you have just structured your project interface using HTML, CSS, and JavaScript, follow these steps:

• Let's create a basic HTML file where we will structure the layout of your application interface (Client or Service Consumer)
• If you are happy with the HTML file - create index.php file. We can trick Heroku to deploy a static site (index.html) by including 1 dynamic file (index.php). The index.php file will be served by Heroku before your index.html file. We need to make the browser redirect from index.php to index.html. We only need to include one line of PHP code into index.php file: <?php header('location: /index.html'); ?> Make sure there's no space before the <?php or else it won't work.
• Download Attach:pipelines.txt file and add it to your project folder on your computer.
  • Rename it to bitbucket-pipelines.yml if you are using Bitbucket
  • And if you are using Github then rename to php.yml and add it to your_repositor/.github/workflows
• Sign Up for Herok at https://signup.heroku.com/ , it's free
• Download the Heroku CLI - a command line application for managing your Heroku account. https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli
• If you've already logged in on a browser window, you still need to login to command prompt by executing heroku login. It will ask you to press any key to open the browser window. Once the browser window is opened, just press the Login button and switch back to command prompt and see if you get a login confirmation message
• Now you need to create your site on Heroku. You can issue this command in the command prompt to create your heroku app. heroku apps:create your-app-name Insert your desired name instead of your-app-name. If the name is not taken then your application will create.
• In order to deploy our application code to Heroku, we need to authenticate first. Therefore, we need to create API toke. In computer systems, an access token contains the security credentials for a login session and identifies the user, the user's groups, the user's privileges, and, in some cases, a particular application. In some instances, one may be asked to enter an access token rather than the usual password.
• Now we need to get our Heroku API token by issuing this command in terminal: heroku authorizations:create and it will create an Access Toke and you should copy it.
• Add your Heroku API token and app name as an environment variables.
  • Go to Bitbucket -> Select Your Repository (pos) -> On the left sidebar click Repository settings -> On the left sidebar click Repository variables
  • To connect a Heroku app with a GitHub repo, login to Heroku, select your application, go to the app's "Deploy" tab on Heroku Dashboard and select the GitHub pane. Connect to your Github account, search and select your Github repository, and Enable Automatic Deploys.
• Define two variables in your settings for your Heroku repository: HEROKU_API_KEY (name) API token generated from Heroku and you have copied in the previous step (Value). HEROKU_APP_NAME (name) Heroku app name (value)
• In terminal, please execute git add . command to add all changes from your working directory to Staging Environment. A staging environment is the last step before something goes into production and is visible on the live site.
• The we should commit or save all the changes for our pos site. With a message describing what we have done. git commit -am 'My site ready for deployment'
• Now you should push changes git push and it will integrate your code into Bitbucket and then execute the pipeline to deploy your application to Heroku.

Deploying Spring Boot Application (Gradle) to Heroku

• Create system.properties file in project root folder:
  • Add Java runtime version and save it: java.runtime.version=11
• Create Procfile in project root folder:
  • Add the web process type and save it: web: java -jar build/libs/Your-Project-Name-0.0.1-SNAPSHOT.jar
• Add default port number:
  • Open Your-Project-Name/src/main/resources/application.properties and add server.port=${PORT:5000}.
• Build your Spring Boot App:
  • gradle build
• Create a Github action and add the following pipeline (heroku-deployment.yml):

name: Spring APP

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
      with:
        fetch-depth: 0

    - name: Deploy to Heroku
      env:
        HEROKU_API_TOKEN: ${{ secrets.HEROKU_API_TOKEN }}
        HEROKU_APP_NAME: ${{ secrets.HEROKU_APP_NAME }}
      run: |
        git remote add heroku https://heroku:$HEROKU_API_TOKEN@git.heroku.com/$HEROKU_APP_NAME.git
        git push heroku HEAD:master -f

• Attach a PostgreSQL database to your Heroku app
  • heroku addons:create heroku-postgresql
• Get the database credentials
  • heroku config
• Customize the database configuration in your application.properties using the above database credentials
• Start deployment

git add .
git commit -m "Your Message"
git push

Deploying Vue.js App to Heroku

As you are going to use VueJS for the client-side development, you will need to deploy it to Heroku as well. It's recommended to separate your client app from your server using two separated Heroku applications.

Make sure that you have installed the following prerequisites:

• NodeJS: sudo apt install nodejs
  • Please note that @vue/cli requires Node v14 or higher, so you would need to upgrade Node
    • sudo npm cache clean -f
    • sudo npm install -g n
    • sudo n stable
• Install npm package manager: sudo apt install npm@latest
• Install Vue CLI: sudo npm install -g @vue/cli
• Create a VueJS Project: vue create vuerest
• Navigate to your VueJS Project: cd vuerest
• Create a new Git repository: git init
• Test the project:
  • Run the server: sudo npm run serve
  • View the project: http://localhost:8080/
• Create a file called static.json in the root of your project repo. Add this content to it:

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

• Commit changes: git add . && git commit -m "Heroku config"
• Create a production build: sudo npm run build
• Login to Heroku: heroku login
• Create a new Heroku app: heroku apps:create Your_Team_Name-vuerest
• Run these two commmands:
  • heroku buildpacks:add heroku/nodejs
  • heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
• Deploy: git push heroku master
• Visit App: https://Your_Team_Name-vuerest.herokuapp.com/