S02L06 - Servidor local, CORS e Proxy

html

Configurando um Ambiente de Desenvolvimento Local: Backend, Frontend, CORS e Proxy
Índice

Introdução ………………………………………………………………1
Entendendo Frontend e Backend ………………2
Configurando o Backend com Spring Boot ……4

Pré-requisitos ………………………………………4
Executando a Aplicação Backend………5
Documentação da API com Swagger……………6


Testando APIs com Postman ………………………………8
Configurando o Frontend com React ……………10

Executando a Aplicação Frontend………11


Tratando Problemas de CORS …………………………………………13

Entendendo CORS ……………………………………13
Configurando Proxy no Frontend………………14
Modificando Spring Boot para CORS……………15


Conclusão ……………………………………………………………………18
Recursos Adicionais …………………………………………19


Introdução
No reino do desenvolvimento web moderno, criar uma interação perfeita entre o frontend e o backend de uma aplicação é fundamental. Este eBook explora os aspectos essenciais de configurar um ambiente de desenvolvimento local, focando na integração frontend e backend, no tratamento de problemas de Cross-Origin Resource Sharing (CORS) e na configuração de proxies. Ao final deste guia, você estará equipado com o conhecimento para executar e gerenciar eficientemente ambas as aplicações frontend e backend, garantindo um fluxo de trabalho de desenvolvimento suave.
Entendendo Frontend e Backend
O que é o Frontend?
O frontend de uma aplicação é a parte visível— a interface do usuário com a qual os usuários interagem. Engloba tudo o que os usuários veem e interagem diretamente, incluindo layouts, elementos de design, botões e funcionalidades interativas.
O que é o Backend?
O backend, frequentemente referido como o lado do servidor, lida com a lógica da aplicação, interações com o banco de dados, autenticação e serve dados para o frontend. Realiza o trabalho pesado necessário para processar solicitações dos usuários e entregar as respostas apropriadas.
A Relação Simbiótica
Para que uma aplicação funcione corretamente, o frontend e o backend devem trabalhar em harmonia. O backend fornece os dados e serviços necessários que o frontend consome para proporcionar uma experiência de usuário dinâmica e responsiva.


Componente
Frontend
Backend


Função
Interface do usuário e experiência do usuário
Processamento de dados, lógica de negócios e armazenamento


Tecnologias
React, Angular, Vue.js, HTML, CSS, JavaScript
Spring Boot, Node.js, Python, Ruby, Java


Interação
Envia solicitações, exibe dados buscados
Recebe solicitações, processa dados, envia respostas


Configurando o Backend com Spring Boot
Pré-requisitos
Antes de mergulhar na configuração do backend, certifique-se de que você tem o seguinte instalado em seu sistema local:

Java Development Kit (JDK) 17: Essencial para rodar aplicações baseadas em Java.
Integrated Development Environment (IDE): VS Code é recomendado por sua versatilidade e amplo suporte a plugins.
Spring Boot: Um framework que simplifica a inicialização e o desenvolvimento de aplicações Java.

Instalando o Java 17

Visite a página de download do Microsoft OpenJDK.
Selecione JDK 17 e baixe o instalador compatível com o seu sistema operacional.
Siga as instruções da instalação para configurar o Java em sua máquina.

Configurando o VS Code

Baixe o VS Code do site oficial.
Instale as extensões necessárias para Java e Spring Boot para melhorar sua experiência de desenvolvimento.

Executando a Aplicação Backend

Abra o Projeto no VS Code:

Clique com o botão direito na pasta do projeto.
Selecione Open in Terminal.
Execute 



		
		
			
			
Java
			
			code .
			
				
					
				
					1
				
						code .
					
				
			
		

 para iniciar o projeto no VS Code.


Selecionando o Arquivo Principal:

Navegue até um controller ou qualquer arquivo Java dentro do projeto.
Clique no botão Run (ícone de play) no canto superior direito.
O VS Code identificará o método principal e iniciará a aplicação.


Acessando o Backend:

Uma vez que a aplicação inicie, navegue para http://localhost:8080 em seu navegador.
Você pode ver endpoints como /api/v1 que fazem parte das rotas da sua API.



Documentação da API com Swagger
Swagger é uma ferramenta poderosa para documentação e testes de APIs. Ela fornece uma interface interativa para explorar e testar suas APIs backend.

Acessar Swagger UI:

Navegue para http://localhost:8080/swagger-ui/index.html para ver a documentação do Swagger.
Esta interface permite que você veja todas as APIs disponíveis e suas funcionalidades.


Exportando o JSON do Swagger:

Clique no link Swagger JSON dentro do Swagger UI.
Salve o arquivo JSON como api-docs.json no diretório do seu projeto para uso posterior com ferramentas como o Postman.




Testando APIs com Postman
Postman é uma ferramenta indispensável para desenvolvedores testarem e interagirem com APIs sem a necessidade de uma interface frontend.
Instalando o Postman

Visite a página de download do Postman.
Escolha a versão compatível com o seu sistema operacional.
Instale e inicie o Postman.

Importando a Documentação do Swagger no Postman

Importar o JSON do Swagger:

Abra o Postman.
Clique em Import e selecione o arquivo api-docs.json que você salvou anteriormente.
Isso gerará uma Coleção do Postman com todos os endpoints da sua API.


Testando os Endpoints da API:

Selecione um endpoint da API na coleção.
Clique em Send para executar a solicitação.
Observe a resposta no painel de resposta do Postman.




Configurando o Frontend com React
Executando a Aplicação Frontend
A aplicação frontend é construída usando React, uma popular biblioteca JavaScript para construir interfaces de usuário.

Navegue para o Diretório Frontend:

Abra uma nova janela de terminal.
Altere o diretório para a pasta frontend usando 



		
		
			
			
Java
			
			cd frontend
			
				
					
				
					1
				
						cd frontend
					
				
			
		

.


Instalar Dependências:

Execute 



		
		
			
			
Java
			
			npm install
			
				
					
				
					1
				
						npm install
					
				
			
		

 para instalar todos os pacotes e dependências necessários.


Iniciar o Servidor Frontend:

Execute 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 para lançar a aplicação frontend.
A aplicação rodará em http://localhost:3000 por padrão.


Verificando o Frontend:

Abra seu navegador e navegue para http://localhost:3000.
Você deverá ver a interface frontend exibindo dados do backend.



Personalizando as Chamadas da API no Frontend
Substituindo URLs da API
Inicialmente, o frontend pode usar APIs de placeholder. Para conectar-se com seu backend local:

Abra os arquivos JavaScript relevantes no seu projeto frontend.
Substitua as URLs das APIs de placeholder por http://localhost:8080/api/v1.





		
		
			
			
Java
			
			// Exemplo: src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
			
				
					
				
					1
2
3
				
						// Exemplo: src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
					
				
			
		



Reiniciar o Servidor Frontend:

Após fazer as alterações, pare o servidor frontend atual.
Execute 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 novamente para aplicar as atualizações.



Tratando Problemas de CORS
Entendendo CORS
Cross-Origin Resource Sharing (CORS) é um recurso de segurança implementado pelos navegadores para restringir aplicações web de fazerem solicitações a um domínio diferente daquele que serviu a página web. Quando o frontend e o backend estão hospedados em portas ou domínios diferentes, as políticas de CORS podem bloquear solicitações, levando a erros.
Configurando Proxy no Frontend
Uma maneira de mitigar problemas de CORS é configurando um proxy na aplicação frontend, permitindo que o frontend se comunique com o backend de forma transparente.

Adicionar Configuração de Proxy no package.json:

    



		
		
			
			
Java
			
			{
  // ...
  "proxy": "http://localhost:8080"
}
			
				
					
				
					1
2
3
4
				
						{
  // ...
  "proxy": "http://localhost:8080"
}
					
				
			
		


  
Efeito da Configuração de Proxy:

Com esta configuração, chamadas de API do frontend para caminhos como /api/v1 serão redirecionadas para http://localhost:8080/api/v1, contornando as restrições de CORS.



Modificando Spring Boot para CORS
Se o proxy não for suficiente, modificar o backend para permitir origens específicas pode resolver problemas de CORS.

Atualizar Anotações do Controller:
Abra seus arquivos controller no projeto backend. Adicione a anotação @CrossOrigin com a URL do frontend.
    




		
		
			
			
Java
			
			// Exemplo: AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // Métodos do Controller
}
			
				
					
				
					1
2
3
4
5
6
7
				
						// Exemplo: AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // Métodos do Controller
}
					
				
			
		


  
Configuração Global de CORS:
Para uma abordagem mais escalável, configure o CORS globalmente.
    




		
		
			
			
Java
			
			// Exemplo: SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // Outras configurações de segurança
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						// Exemplo: SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // Outras configurações de segurança
}
					
				
			
		


  
Reiniciar o Servidor Backend:

Após fazer as alterações, reinicie o backend para aplicar as novas configurações de CORS.



Verificando a Configuração de CORS

Inspecionar Chamadas de Rede:

Abra as ferramentas de desenvolvedor do seu navegador.
Navegue até a aba Network.
Atualize a página frontend e observe as chamadas de API.


Chamadas de API Bem-sucedidas:

Se configurado corretamente, as chamadas de API deverão ser bem-sucedidas sem erros de CORS.
As respostas do backend serão recebidas com sucesso pelo frontend.



Conclusão
Configurar um ambiente de desenvolvimento local que integra perfeitamente os componentes frontend e backend é crucial para um desenvolvimento web eficiente. Ao entender as funções de frontend e backend, configurar ferramentas como Spring Boot e React, e tratar problemas de CORS por meio de proxies e configurações no backend, os desenvolvedores podem criar aplicações robustas e seguras. O domínio desses conceitos não apenas agiliza o processo de desenvolvimento, mas também estabelece uma base sólida para construir soluções web escaláveis e facilmente mantíveis.
Palavras-Chave de SEO: desenvolvimento frontend, configuração backend, Spring Boot, integração React, tratamento de CORS, configuração de proxy, ambiente de desenvolvimento local, teste de API com Postman, documentação de API Swagger, configuração Java 17, VS Code para Java, política de CORS, Cross-Origin Resource Sharing, melhores práticas de desenvolvimento web
Recursos Adicionais

Documentação do Spring Boot
Site Oficial do React
Centro de Aprendizado do Postman
Entendendo CORS
Guia do Swagger UI
Extensões do VS Code para Java
Downloads Java 17


Este eBook forneceu um guia abrangente para configurar um ambiente de desenvolvimento local, integrando aplicações frontend e backend, e gerenciando efetivamente problemas de CORS. Ao seguir os passos delineados, desenvolvedores podem garantir um fluxo de trabalho suave e eficiente em seus projetos de desenvolvimento web.
Nota: Este artigo foi gerado por IA.
Componente	Frontend	Backend
Função	Interface do usuário e experiência do usuário	Processamento de dados, lógica de negócios e armazenamento
Tecnologias	React, Angular, Vue.js, HTML, CSS, JavaScript	Spring Boot, Node.js, Python, Ruby, Java
Interação	Envia solicitações, exibe dados buscados	Recebe solicitações, processa dados, envia respostas