1
resposta

Como posso colocar o meu build do Front e Back na web

Ola bom dia,

Eu venho trabalhando em um projeto que envolve Spring Boot com o Angular, pois bem eu tenho interesse de poder colocar meu projeto na web e não sei como fazer isso, e tenho algumas duvidas.


1º Duvida | variaveis de ambiente.

para motivos de segurança é uma boa pratica usar variáveis de ambiente para poder colocar keys como é o caso da geração de token JWT no back-End e conexão com o banco de dados, quando são criadas as variveis de ambiente deveria ser iniciado o projeto normalmente mas não é o caso veja .

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Quando eu as crio e depois inicio o projeto recebo esse erro


Error starting ApplicationContext. To display the condition evaluation report re-run your application with 'debug' enabled.
2024-10-30T17:44:23.747-03:00 ERROR 41656 --- [  restartedMain] o.s.b.d.LoggingFailureAnalysisReporter   : 

***************************
APPLICATION FAILED TO START
***************************

Description:

Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

Reason: Failed to determine suitable jdbc url


Action:

Consider the following:
    If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
    If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).


Process finished with exit code 0

Basicamente o erro diz que indica que a aplicação não conseguiu configurar um DataSource porque o atributo url do banco de dados não foi especificado e nenhum banco de dados embutido foi configurado.


2º Duvida | Conexão entre os build

Basicamente de maneira bem clara e sucinta oq eu gostaria de entender é o seguinte, suponhamos que os 2 build tanto o front e o back esta no ar como eles se comunicam?

3º Duvida| Geração do build Angular

Eu gerei o build angula com o comando ng build configuration production é gerado o build na pasta dist

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

É gerado todos esses arquivos, não sei se é exatamente isso que deveria aparecer pois nunca gerei um build do angular. Como posso fazer para a aplicação rodar em um servidor Ubuntu com o Apache ou Nginx .


4º Dúvida | Portas de Comunicação

Atualmente o projeto Front roda na porta 4200 e o Back roda na porta 8080. A comunicação entre os dois gera um erro CROS, que e acabo contornando por meio de configuração no front com um arquivo

proxy.conf.json .

 {
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}

E no Back eu gero um @Bean para receber requisição da porta 4200

  @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:4200")
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }

minha duvida é quando for colocado na web é necessário fazer a troca de porta, para a porta definitina na qual a aplicação ira rodar ou não é necessário.

1 resposta

Olá, Luiz. Tudo bem com você?

Vamos por partes para resolver suas dúvidas:

1º Dúvida | Variáveis de Ambiente

O erro que você está enfrentando indica que o Spring Boot não conseguiu encontrar a URL do banco de dados. Isso pode estar acontecendo porque as variáveis de ambiente não estão sendo lidas corretamente. Certifique-se de que as variáveis DATASOURCE_URL, DATASOURCE_USERNAME e DATASOURCE_PASSWORD estão definidas no ambiente onde o aplicativo está sendo executado.

No application.properties, use:

spring.datasource.url=${DATASOURCE_URL}
spring.datasource.username=${DATASOURCE_USERNAME}
spring.datasource.password=${DATASOURCE_PASSWORD}

2º Dúvida | Conexão entre os Builds

Quando ambos os builds estão no ar, a comunicação entre o front-end e o back-end é feita através de chamadas HTTP. O front-end Angular faz requisições para as APIs REST do back-end Spring Boot. Certifique-se de que o front-end está configurado para fazer chamadas para o endereço correto do back-end (por exemplo, http://seuservidor:8080/api).

3º Dúvida | Geração do Build Angular

Os arquivos gerados na pasta dist são os que você precisa para hospedar sua aplicação Angular. Para rodar em um servidor Ubuntu com Apache ou Nginx, você pode seguir estes passos:

  1. Apache:

    • Copie o conteúdo da pasta dist para o diretório raiz do Apache (geralmente /var/www/html).
    • Certifique-se de que o Apache está configurado para servir arquivos estáticos.
  2. Nginx:

    • Copie o conteúdo da pasta dist para o diretório desejado.

    • Configure o Nginx para servir o conteúdo estático. Um exemplo de configuração pode ser:

      server {
          listen 80;
          server_name seu_dominio.com;
      
          location / {
              root /caminho/para/seu/projeto/dist;
              try_files $uri $uri/ /index.html;
          }
      }
      

4º Dúvida | Portas de Comunicação

Ao colocar sua aplicação na web, você precisará configurar as portas de acordo com o seu servidor de hospedagem. Normalmente, aplicações web são servidas na porta 80 (HTTP) ou 443 (HTTPS). Você precisará ajustar as configurações de CORS no back-end para permitir requisições do domínio onde seu front-end estará hospedado.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado