{"id":27137715,"url":"https://github.com/gabriel-dev-c/devops-projeto","last_synced_at":"2026-04-06T01:33:02.328Z","repository":{"id":286697570,"uuid":"946935066","full_name":"Gabriel-Dev-C/DevOps-Projeto","owner":"Gabriel-Dev-C","description":"Projeto construído para aprendizado do processo completo de Dev-Ops, desde a criação do projeto até seu release.","archived":false,"fork":false,"pushed_at":"2025-05-08T13:17:23.000Z","size":71,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-08T13:45:07.513Z","etag":null,"topics":["continuous-delivery","continuous-integration","css","cypress","deploy","devops","git","github","html","javascript","node","sass","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gabriel-Dev-C.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-11T22:53:09.000Z","updated_at":"2025-05-08T13:17:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"89be494d-c64f-4fbc-9904-d31f62dbdb2c","html_url":"https://github.com/Gabriel-Dev-C/DevOps-Projeto","commit_stats":null,"previous_names":["gabriel-dev-c/devops-projeto"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gabriel-Dev-C/DevOps-Projeto","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Dev-C%2FDevOps-Projeto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Dev-C%2FDevOps-Projeto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Dev-C%2FDevOps-Projeto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Dev-C%2FDevOps-Projeto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gabriel-Dev-C","download_url":"https://codeload.github.com/Gabriel-Dev-C/DevOps-Projeto/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Dev-C%2FDevOps-Projeto/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259905419,"owners_count":22929916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["continuous-delivery","continuous-integration","css","cypress","deploy","devops","git","github","html","javascript","node","sass","typescript"],"created_at":"2025-04-08T04:07:11.373Z","updated_at":"2025-12-30T18:59:58.511Z","avatar_url":"https://github.com/Gabriel-Dev-C.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FrontEnd DevOps\n\n\u003cbr\u003e \u003cdiv align=center\u003e\n\n![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge\u0026logo=githubactions\u0026logoColor=white) ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge\u0026logo=git\u0026logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E) ![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge\u0026logo=cypress\u0026logoColor=058a5e) ![Azure](https://img.shields.io/badge/azure-%230072C6.svg?style=for-the-badge\u0026logo=microsoftazure\u0026logoColor=white) ![SonarQube](https://img.shields.io/badge/SonarQube-black?style=for-the-badge\u0026logo=sonarqube\u0026logoColor=4E9BCD) ![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge\u0026logo=docker\u0026logoColor=white) ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white)\n\n\u003c/div\u003e\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./src/images/capaRM.png\" alt=\"Protótipo do projeto.\"\u003e\n\u003c/p\u003e\n\n## 📂 Menu\n\n\u003cul\u003e\n    \u003cli\u003e\u003ca href=\"#descricao\"\u003eMeta e Descrição\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#funcionamento\"\u003eFuncionamento\u003c/a\u003e\u003c/li\u003e\n    \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#ci\"\u003eFuncionamento do CI\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#cd\"\u003eFuncionamento do CD\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cli\u003e\u003ca href=\"#perfil\"\u003ePerfil\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#mapa\"\u003eMapa do Projeto\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp id=\"descricao\"\u003e\u003c/p\u003e\n\n## 🎯 Meta e Descrição\n\n*Projeto desenvolvido em equipe.*\n\u003e Página web desenvolvida para estudos de CI e CD, abordando o ciclo completo de DevOps até o lançamento.\nO foco do projeto é desenvolver um website responsivo com frameworks como o DataTables, para desenvolvimento completo do projeto, até seu deploy na fase final. Além disso é utilizado cypress para automação de testes de uso da página.\n\n\u003cp id=\"funcionamento\"\u003e\u003c/p\u003e\n\n## ⚙️ Funcionamento\n\nO site “Front End DevOps” tem como objetivo educar sobre os conceitos e práticas DevOps, com foco em CI/CD (Integração Contínua e Entrega Contínua). Ele é composto por quatro páginas principais (HTMLs distintos), com navegação interna entre elas via barra de menu (navbar). Todas compartilham uma estrutura comum: cabeçalho, navegação, conteúdo principal e rodapé.\n\nindex.html (Página Inicial):\nConteúdo principal: Introdução ao tema Front End DevOps. Possui um título, subtítulo e uma breve explicação sobre CI/CD. Um botão leva o usuário para a página \"Sobre\". Simples, com foco em boas-vindas e navegação inicial.\n\nSobre.html:\nExplica detalhadamente o que é DevOps, com ênfase em cultura, automação e agilidade. Contém uma tabela interativa com DataTables listando tecnologias e conhecimentos importantes para DevOps, como linguagens, ferramentas, CI/CD, monitoramento, etc. Usa Bootstrap 5 e DataTables para estilização e interatividade (paginação automática da tabela). Apresenta conteúdo mais denso e técnico.\n\nCICD.html:\nExplica as diferenças e objetivos de CI (Continuous Integration) e CD (Continuous Delivery/Deployment). Traz um conteúdo textual descritivo e educativo. Não tem elementos interativos, mas é bem detalhado conceitualmente.\n\nContato.html:\nPágina com formulário simples de contato solicitando e-mail. Objetivo: permitir que o usuário envie seus dados de contato. \n\n\u003cp id=\"ci\"\u003e\u003c/p\u003e\n\n### 🔁 Funcionamento do CI\n\nUm workflow do GitHub Actions chamado Build, com o nome de execução Continuous Integration.\n\nO workflow é ativado quando, há um push para a branch master ou quando usuário executa manualmente pelo GitHub através de workflow_dispatch.\n\nO job Build and analyze roda em uma máquina virtual com Ubuntu (ubuntu-latest).\n\nCheckout do repositório, usa a ação actions/checkout@v4, que baixa o código-fonte do repositório. O parâmetro fetch-depth: 0 garante que todo o histórico de commits seja obtido, útil para análises mais relevantes no SonarQube.\n\nAnálise de código com SonarQube, usa a ação SonarSource/sonarqube-scan-action@v5 para escanear o código com SonarQube. Configura as variáveis SONAR_TOKEN e SONAR_HOST_URL, armazenadas de forma segura nos GitHub Secrets. Os parâmetros do projeto no SonarQube são:\n\n```.\nsonar.projectKey=FrontEnd-DevOps\n```\nDefine um identificador único para o projeto dentro do SonarQube. Esse projectKey permite que o SonarQube diferencie projetos diferentes na mesma instância.\n\n```.\nsonar.projectName=FrontEnd-DevOps\n```\nNome amigável do projeto dentro do SonarQube. Este nome aparece na interface do SonarQube, facilitando a identificação dos relatórios de análise.\n\n```.\nsonar.projectVersion=1.0.0\n```\nDefine a versão do projeto sendo analisado. Útil para rastrear melhorias ou mudanças de qualidade ao longo do tempo.\n\n```.\nsonar.sources=.\n```\nEspecifica o diretório que contém os arquivos que devem ser analisados. O valor . significa \"analisar todo o código-fonte do repositório\", ou seja, todos os arquivos do projeto.\n\nEsses parâmetros são fundamentais para o SonarQube identificar, nomear e organizar as análises do código do seu projeto. Eles garantem que a qualidade do código seja rastreada corretamente ao longo das versões.\n\nSendo assim, o workflow automatiza a integração contínua (CI) do projeto. Sempre que houver um push na branch master, o código será analisado automaticamente pelo SonarQube, garantindo que possíveis problemas de qualidade sejam identificados. Além disso, o usuário pode rodá-lo manualmente via GitHub.\n\n\u003cp id=\"cd\"\u003e\u003c/p\u003e\n\n### 🚀 Funcionamento do CD\n\nEste é um fluxo de trabalho do GitHub Actions para um processo de Continuous Delivery (CD). Ele automatiza a entrega de uma aplicação quando há uma pull request na branch master, ou quando o fluxo é acionado manualmente via workflow_dispatch.\n\nDefinições iniciais, name: CD → Nome do workflow. run-name: Continuous Deliverance → Nome de execução. on: → Define os gatilhos: pull_request para a branch master → Executa quando há um pull request. workflow_dispatch → Permite execução manual.\n\nConfiguração do Job deploy, runs-on: ubuntu-latest → Executa o workflow em um ambiente Ubuntu. Checkout do código (actions/checkout@v4): Obtém o código do repositório para executar ações sobre ele. fetch-depth: 0 → Obtém todo o histórico de commits.\n\nLogin no Docker Hub (docker/login-action@v3.4.0): Usa credenciais armazenadas em GitHub Secrets (DOCKER_USER e DOCKER_PASSWORD). Construção e Push da Imagem Docker (docker/build-push-action@v6.15.0): context: . → Usa o diretório atual como contexto. file: ./Dockerfile → Especifica o Dockerfile. push: true → Envia a imagem para o Docker Hub. tags: gabrielchabaribery/devops-projeto:latest → Nomeia e marca a imagem. \n\nImplantação no Azure WebApp (Azure/webapps-deploy@v3.0.1): app-name: chabaribery-devops → Nome da aplicação no Azure. publish-profile: ${{ secrets.PUBLISH_PROFILE }} → Usa credenciais armazenadas para autenticação. images: gabrielchabaribery/devops-projeto:latest → Utiliza a imagem Docker recém-enviada para o deploy.\n\nSimplificando, um pull request na master ou uma execução manual inicia o workflow. O código é baixado. Autenticação no Docker Hub para permitir publicação de imagem. O Docker Image é construído e enviado para o Docker Hub. A aplicação é implantada no Azure WebApp com a nova imagem Docker. \n\nIsso garante que qualquer alteração enviada seja automaticamente preparada para produção com CI/CD, otimizando processos de desenvolvimento e entrega.\n\n\u003cp id=\"perfil\"\u003e\u003c/p\u003e\n\n## 👥 Perfil\n\n[Meu perfil do Github](https://github.com/Gabriel-Dev-C/)\n\n\u003cp id=\"mapa\"\u003e\u003c/p\u003e\n\n## 🗺️  Mapa do Projeto\n\n```.\n├───.github\\workflows       //Pasta com os arquivos yml para a execução do CI e do CD\n└───cypress        //Pasta com os arquivos de configuração do cypress\n└───src            //Pasta com os arquivos do site\n    └───images      //Pasta com as imagens do README.md\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabriel-dev-c%2Fdevops-projeto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabriel-dev-c%2Fdevops-projeto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabriel-dev-c%2Fdevops-projeto/lists"}