Blog | Azure Container Apps
_{^{(BLOG-CONTAINER-APPS)}}

Este projeto é um blog simples desenvolvido para demonstrar o uso de containers no Azure Container Apps. Ele permite criar, listar e visualizar posts, além de adicionar comentários. O projeto utiliza tecnologias modernas como HTML, CSS, JavaScript e Docker, com deploy na nuvem utilizando o Azure.

This project is a simple blog developed to demonstrate the use of containers in Azure Container Apps. It allows creating, listing, and viewing posts, as well as adding comments. The project uses modern technologies such as HTML, CSS, JavaScript, and Docker, with deployment in the cloud using Azure.

---

🇧🇷 Detalhes do Projeto (Português)

Estrutura

Páginas Principais

• index.html: Página inicial que lista todos os posts criados.
• create-post.html: Página para criar novos posts.
• post-detail.html: Página para visualizar os detalhes de um post e adicionar comentários.

Estrutura de Pastas

root
├── Blog
│   ├── html
│   │   ├── index.html
│   │   ├── create-post.html
│   │   └── post-detail.html
├── assets
│   ├── images
│   │   └── icons
├── dockerfile
└── scripts.ps1

Funcionalidades

• Criação de Posts: Permite criar novos posts com título e conteúdo.
• Listagem de Posts: Exibe todos os posts criados na página inicial.
• Visualização de Detalhes: Permite visualizar o conteúdo completo de um post.
• Comentários: Adicione comentários aos posts diretamente na página de detalhes.
• Persistência Local: Os dados são armazenados no localStorage do navegador.
• Deploy em Containers: O projeto é empacotado em um container Docker e pode ser executado localmente ou na nuvem.

Tecnologias e Ferramentas Utilizadas

• HTML5: Estrutura das páginas.
• CSS3: Estilização das páginas com Bootstrap.
• JavaScript: Funcionalidades interativas, como manipulação de posts e comentários.
• Docker: Empacotamento do projeto em containers.
• Azure Container Apps: Deploy do projeto na nuvem.
• PowerShell: Scripts para automação do build e deploy.

melhorias a Serem Implementadas

• Implementar autenticação para usuários do blog.
• Adicionar suporte a banco de dados para persistência de dados em vez de localStorage.
• Melhorar a interface do usuário com animações e design responsivo.
• Configurar CI/CD para automação do deploy no Azure.
• Como Executar o Projeto

Pré-requisitos

Certifique-se de ter os seguintes itens instalados e configurados no seu ambiente:

• Docker: Para criar e executar containers.
• Azure CLI: Para gerenciar recursos no Azure.
• Conta no Azure: Para realizar o deploy na nuvem.
• PowerShell: Para executar os scripts de automação.

Como Executar o Projeto

Localmente:

1. Construa a imagem Docker:

   docker build -t blog-container-apps:latest .

2. Execute o container:

   docker run -d -p 80:80 blog-container-apps:latest

3. Acesse o blog*: Abra o navegador e acesse http://localhost.

No Azure:

Siga os passos no script scripts.ps1 para:

• Criar o recurso no Azure.
• Registrar a imagem no Azure Container Registry (ACR).
• Fazer o deploy no Azure Container Apps.

🇺🇸 Project Details (English)

Structure

Main Pages

• index.html: Homepage that lists all created posts.
• create-post.html: Page to create new posts.
• post-detail.html: Page to view post details and add comments.

Folder Structure

root
├── Blog
│   ├── html
│   │   ├── index.html
│   │   ├── create-post.html
│   │   └── post-detail.html
├── assets
│   ├── images
│   │   └── icons
├── dockerfile
└── scripts.ps1

Features

• Post Creation: Allows creating new posts with a title and content.
• Post Listing: Displays all created posts on the homepage.
• Detail View: Enables viewing the full content of a post.
• Comments: Add comments to posts directly on the detail page.
• Local Persistence: Data is stored in the browser's localStorage.
• Container Deployment: The project is packaged in a Docker container and can be run locally or in the cloud.

Technologies and Tools Used

• HTML5: Page structure.
• CSS3: Page styling with Bootstrap.
• JavaScript: Interactive features, such as post and comment handling.
• Docker: Project packaging in containers.
• Azure Container Apps: Cloud deployment of the project.
• PowerShell: Scripts for build and deployment automation.

Improvements to Be Implemented

• Implement authentication for blog users.
• Add database support for data persistence instead of localStorage.
• Enhance the user interface with animations and responsive design.
• Configure CI/CD for automated deployment on Azure.

Prerequisites

Make sure you have the following items installed and configured in your environment:

• Docker: To build and run containers.
• Azure CLI: To manage resources on Azure.
• Azure Account: To deploy to the cloud.
• PowerShell: To execute automation scripts.

How to Run the Project

Locally:

1. Build the Docker image:

   docker build -t blog-container-apps:latest .

2. Run the container:

   docker run -d -p 80:80 blog-container-apps:latest

3. Access the blog:Open your browser and go to http://localhost.

On Azure:

Follow the steps in the scripts.ps1 script to:

• Create the resource on Azure.
• Register the image in Azure Container Registry (ACR).
• Deploy it to Azure Container Apps.

License

This software is licensed under the terms of the MIT License.

---

Developed by Vitor Bittencourt ☕