View on GitHub

lp4-2019

Déployer un projet spring/angular

Voici une proposition qui fonctionne simplement. Il y en a d’autres.

Cela suppose d’avoir un repo pour le back et un pour le front. Il est sûrement possible d’adapter si tout est dans le même repo.

0 - Prérequis : Utiliser une base H2

Pour déployer le back, on peut commencer (pour simplifier et ne pas à avoir à déployer aussi une bdd) par embarquer la base de données dans le serveur d’application en utilisant H2. Il suffit pour cela de changer les dépendances dans build.gradle :

//	runtimeOnly 'mysql:mysql-connector-java'
    implementation group: 'com.h2database', name: 'h2', version: '1.4.200'

Il faut aussi adapter le fichier application.yml (ou properties)

datasource:
  #    url: jdbc:mysql://localhost:3306/db_blog?serverTimezone=UTC
  #    username: simplon
  #    password: simplon.co

  url: jdbc:h2:mem:blog # http://localhost:8080/h2-console pour lancer la console avec l'url : jdbc:h2:mem:blog
  username: sa
  password:

h2:
  console:
    enabled: true

Si vous utilisez jwt, il faudra aussi autoriser la console dans WebSecurityConfigurerAdapter.

// Entry points
        http.authorizeRequests()//
                .antMatchers("/h2-console/**").permitAll()

                // Disallow everything else...
                .anyRequest().authenticated();

        ...

        http.headers().frameOptions().disable(); // pour afficher la console par frames

1 - Déployer le back

1- Créez un compte sur heroku
2- Créez une nouvelle app
3- Je vous conseille la méthode : Deploy using Heroku Git, cela vous demande d’installer le client heroku
4- Cela va ajouter un remote à votre projet, ensuite vous n’aurez qu’à :

heroku login

5- Pour ajouter un remote à votre git existant (en remplaçant xxx par le nom de votre application)

heroku git:remote -a xxx

6- Cela va déployer votre application

git push heroku master

7- Vérifiez que votre application est bien déployée sur le dashboard

img

dans le cas où les deux repos sont sur le même repo, vous pouvez essayer ceci :

https://stackoverflow.com/questions/7539382/how-can-i-deploy-push-only-a-subdirectory-of-my-git-repo-to-heroku

git subtree push --prefix xxxx heroku master

2 - Déployer le front

1- Créez un compte sur firebase
2- Suivez ceci : https://angular.io/guide/deployment#automatic-deployment-with-the-cli
3- Après avoir relié votre projet angular avec un projet firebase, il suffit de faire :

ng deploy

4- Vous obtenez quelquechose comme ça

img

@author: Josselin Tobelem