O que é o Heroku?

O Heroku é uma plataforma de cloud que oferece "Platform as a Service", ou seja, ele permite que você hospede suas aplicações em um ambiente facilmente escalável e com suporte a várias tecnologias. Ele tem um plano free, que é indicado para testes, e opções pagas com mais funcionalidades e suporte.

O que veremos por aqui?

Esse documento é um passo a passo para você subir (deploy) o seu site criado em SPRING e ANGULAR gratuitamente para o Heroku, que é uma aplicação de hospedagem de site na web, isso irá gerar um link de acesso a sua página que poderá ser acessadoem qualquer lugar. Para realizar esse deploy vamos precisar fazer algumas modificações em nosso projeto e principalmente já criar uma conta no Heroku através desse endereço: https://www.heroku.com.

#01 Passo

Com a conta já criada, mude todos os endpoints do front-end de:

http://localhost8080/endpoint

Para:

https://nomedoprojeto.herokuapp.com/endpoint

Exemplo:

Não pode existir nenhum nome de projeto igual, ou seja, crie um nome diferenciado para o seu projeto e fique atento se esse nome já existe, durante a criação do projeto no fim desse documento.

Faça o build do projeto utilizando o terminal, localizado na pasta do projeto, com o código:

ng build --prod

Crie uma nova pasta para o deploy e coloque todo o seu back-end nessa pasta (iremos modifica-lo, por isso é importante manter o original)

Crie na pasta resources, uma pasta chamada public. Pegue apenas os aquivos da pasta dist/blogPessoal e coloque dentro nessa pasta public:

Exemplo:

Substitua o conteúdo do arquivo aplication.properties, para:

spring.mvc.view.prefix=/public/
spring.mvc.view.suffix=.html	

server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
server.compression.min-response-size=1024

spring.jpa.generate-ddl=true
spring.datasource.url=${JDBC_DATASOURCE_URL}
spring.jpa.show-sql=true

Exemplo:

Abra o pom.xml e substitua a dependência do MySql por essa dependência:

<dependency>
   <groupId>org.postgresql</groupId>
   <artifactId>postgresql</artifactId>
   <version>42.2.12</version>
</dependency>

O Heroku só possui gratuidade para banco de dados postgresql, isso não muda nada além dessa dependência e da alteração no aplication.properties feita acima.

Agora precisamos configurar o spring para que o Heroku assuma as rotas do Angular, para isso será necessário criar um novo package no src/main/java, chamado config, dentro desse package, crie uma nova classe chamada MyAppWebMvcConfigurer, dentro dessa classe, preserve a primeira linha do código e substitua as demais com esse código:

   import java.io.IOException;

	import org.springframework.context.annotation.Configuration;
	import org.springframework.core.io.ClassPathResource;
	import org.springframework.core.io.Resource;
	import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
	import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
	import org.springframework.web.servlet.resource.PathResourceResolver;

	@Configuration
	public class MyAppWebMvcConfigurer implements WebMvcConfigurer {

	@Override
    	public void addResourceHandlers(ResourceHandlerRegistry registry) {
        	registry.addResourceHandler("/**/*")
            	.addResourceLocations("classpath:/public/")
            	.resourceChain(true)
            	.addResolver(new PathResourceResolver() {
                	@Override
                	protected Resource getResource(String resourcePath, Resource location) throws IOException {
                    	Resource requestedResource = location.createRelative(resourcePath);
                    	return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/public/index.html");
                		}
            		});
    		}
	}

Exemplo:

Agora precisamos liberar as rotas do back-end, para isso basta ir no arquivo BasicSecurityConfig.java no método protected void configure(HttpSecurity http) throws Exceptione adicionar essa linha:

.antMatchers("/**").permitAll() 

Exemplo:

Pronto, agora só precisamos abrir a pasta que contém o arquivo pom.xml no terminal de sua escolha e digite os seguintes comandos para criar um repositório no git:

git init
git add .
git commit -m "mensagem"  

Agora precisamos configurar o Heroku no terminal, porém antes de iniciar precisamos instalar o heroku através do pacote npm:

npm i -g heroku

Agora é só fazer o login no heroku e continuar as configurações:

heroku login

Após a execução desse comando será aberta em seu navegador uma página da Heroku com um botão para você logar, clique nele, volte para o terminal e prossiga com as configurações.

heroku create nomedoprojeto  //mesmo nome usado nos endpoints

Esse comando serve para criar o seu projeto na Heroku. Não se esqueça de colocar o mesmo nome atribuido nos end-points do front-end, configuração que foi feita no primeiro passo desse documento.

heroku addons:create heroku-postgresql:hobby-dev

Esse comando serve para criar o banco de dados do seu projeto na Heroku.

Para finalizar só precisamos digitar o seguinte comando, ainda no terminal:

git push heroku master

No próprio terminal irá aparecer a url que você precisa entrar para abrir o projeto no navegador, mas normalmente a url é https://nomedoprojeto.heroku.com.

Sempre que quisermos atualizar o projeto, basta alteramos os arquivos necessários e execultar esses três comandos no terminal, dentro da pasta do projeto:

git add .
git commit -m "mensagem"  
git push heroku master