DEV Community

Cover image for Como criar um projeto com Nestjs do zero com deploy no Heroku usando Github Actions
William Koller
William Koller

Posted on

Como criar um projeto com Nestjs do zero com deploy no Heroku usando Github Actions

Ola devs e devas!

Porque iremos usar Nestjs?!
Nestjs é um framework Nodejs que conseguimos escalar muito rapidamente usando POO e é meu framework favorito.

Em primeiro lugar precisa ter instalados node e o cli do nestjs, para instalarmos o cli rodamos esse comando npm i -g @nesjs/cli

Agora iremos criar o projeto com cli do nest: nest new api-example-dev.to-ci-cd

O cli do nest é muito poderoso e cria toda uma estrutura inicial para nós.

Image description

Para acessar digitaremos: cd api-example-dev.to-ci-cd && code .

Essa é a estrutura de pasta que temos:

Image description

Agora iremos rodar o projeto com o comando: yarn start:dev

Aplicação de pé:

Image description

Agora iremos criar o projeto no heroku:

Image description

Antes disso, precisamos instalar o cli do heroku e fazer o login:

sudo snap install heroku --classic
heroku login
Enter fullscreen mode Exit fullscreen mode

Iremos adicionar o remote do heroku no nosso projeto: heroku git:remote -a api-example-dev-to-ci-cd

Image description

Agora criaremos o arquivo Procfile que sera lido pelo heroku na hora que fizermos o push:

Procfile:

web: npm run start:prod
Enter fullscreen mode Exit fullscreen mode

Agora iremos preparar para fazer o push:

git add .
git commit -m "chore: add setup"
git push heroku main
Enter fullscreen mode Exit fullscreen mode

Image description

Iremos criar o nosso projeto no Github:

Image description

Precisamos adicionar a porta do projeto no heroku:

Image description

Iremos acessar a nossa aplicação:

Image description

Tudo ok com nossa aplicação, agora iremos implementar nosso CI/CD para automatizar nossos deploy.

Criaremos o arquivo ci-cd.yml:

name: 'CI/CD'

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

jobs:
  continuous-integration:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.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: Install dependencies
        run: yarn install

  continuos-delivery:
    runs-on: ubuntu-latest

    needs: [continuous-integration]

    steps:
      - uses: actions/checkout@v2

      - name: Deploy to heroku
        if: ${{ github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'}}
        uses: akhileshns/heroku-deploy@v3.12.12
        with:
          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
          heroku_app_name: ${{ secrets.HEROKU_APP_NAME }}
          heroku_email: ${{ secrets.HEROKU_EMAIL }}
Enter fullscreen mode Exit fullscreen mode

Agora iremos adicionar as secrets no Github:

Image description
Iremos preparar para fazer o push, mas agora no github:

git add .
git commit -m "chore: add ci/cd workflow"
git push origin main
Enter fullscreen mode Exit fullscreen mode

Rodando o Actions:

Image description

Agora iremos mudar o retorno para vermos o CI/CD funcionando:

export class AppService {
  getHello(): { message: string } {
    return {
      message: `welcome to the @dev.to example api with CI/CD Heroku`,
    };
  }
}
Enter fullscreen mode Exit fullscreen mode

Precisamos alterar o retorno na nossa controller também:

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): { message: string } {
    return this.appService.getHello();
  }
}

Enter fullscreen mode Exit fullscreen mode

Preparando o push:

git add .
git commit -m "feat: add new return"
git push origen main
Enter fullscreen mode Exit fullscreen mode

Rodando a Action com a nova alteração:

Image description

Iremos acessar a aplicação novamente:

Image description

Pronto, implementamos CI/CD no Github Actions com deploy no Heroku

Top comments (1)

Collapse
 
sidneisimeao profile image
Sidnei Simeão

Gostei da objetividade e simplicidade com que explicou. Parabéns !