Skip to content

Commit

Permalink
#1 Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
AlvaroGlezC authored May 14, 2024
1 parent 2a09fbb commit 41d1848
Showing 1 changed file with 42 additions and 74 deletions.
116 changes: 42 additions & 74 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
# wiq_es1d

[![Deploy on release](https://github.com/Arquisoft/wiq_es1d/actions/workflows/release.yml/badge.svg)](https://github.com/Arquisoft/wiq_es1d/actions/workflows/release.yml)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_es1d&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_es1d)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_es1d&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_es1d)

This is a base repo for the [Software Architecture course](http://arquisoft.github.io/) in [2023/2024 edition](https://arquisoft.github.io/course2324.html).
<p float="left">
<img src="images/react_and_typescript.png" height="200">
<img src="images/node.png" height="200">
<img src="images/springBoot_maven.png" height="200">
</p>

This repo is a basic application composed of several components.
This is a project based on Node.js and Java, using the technologies of React + TypeScript for the frontend and Spring Boot + Maven for the backend.

- **Gateway service**. Express service that is exposed to the public and serves as a proxy to the two previous ones.
- **User service**. Express service that handles the insertion of new users in the system.
- **Auth service**. Express service that handles the authentication of users.
- **Webapp**. React web application that uses the gateway service to allow basic login and new user features.
This repo is a basic application composed of several components.

Both the user and auth service share a Mongo database that is accessed with mongoose.
- **Frontend module**. Module based on React + TypeScript, which utilizes the Keycloak service for authentication, shaping the entire interface through which users will interact.
- **Backend module**. Module based on Maven along with Spring Boot, containing all the business logic of the app, communicates with the database, and is protected by the Keycloak service.
- **Keycloak service**. Service based on the Keycloak framework to protect, secure, and authenticate the different necessary parts of the project.

## Requierements
- Node.js
- Npm
- Maven

## Quick start guide

### Using docker
Expand All @@ -25,90 +32,51 @@ The fastest way for launching this sample project is using docker. Just clone th
git clone https://github.com/Arquisoft/wiq_es1d.git
```

and launch it with docker compose:
Access the 'docker' folder located at the root:

```sh
docker compose --profile dev up --build
cd docker
```

### Starting Component by component

First, start the database. Either install and run Mongo or run it using docker:

```docker run -d -p 27017:27017 --name=my-mongo mongo:latest```
and launch it with docker compose:

You can also use services like Mongo Altas for running a Mongo database in the cloud.
```sh
docker-compose -f ./docker-compose-dev.yml up --build
```

Now, launch the auth, user and gateway services. Just go to each directory and run `npm install` followed by `npm start`.
After the deployment is completed, Docker will build six images to subsequently launch the six containers:

Lastly, go to the webapp directory and launch this component with `npm install` followed by `npm start`.
- Backend
- Frontend
- Database
- Keycloak service
- Two containers for API monitoring (Prometheus and Grafana)

After all the components are launched, the app should be available in localhost in port 3000.
Once the containers are up and running, you can access the website through port 3000.

## Deployment
### Starting Component by component

For the deployment, we have several options.
First, start the database. Either install and run Mysql or run it using docker:

The first and more flexible is to deploy to a virtual machine using SSH. This will work with any cloud service (or with our own server).
```docker run -d -p 3306:3306 --name=syg-db:latest```

Other options include using the container services that most cloud services provide. This means, deploying our Docker containers directly.
Do the same with keycloak

We are going to use the first approach, creating a virtual machine in a cloud service and after installing docker and docker-compose, deploy our containers there using GitHub Actions and SSH.
```docker run -d -p 8090:8080 --name=keycloak:latest```

### Machine requirements for deployment
Now, with docker or any IDE you can run the backend with your IDE or with docker like the others components:

The machine for deployment can be created in services like Microsoft Azure or Amazon AWS. These are in general the settings that it must have:
```docker run -d -p 8080:8080 --name=backend:latest```

- Linux machine with Ubuntu > 20.04.
- Docker and docker-compose installed.
- Open ports for the applications installed (in this case, ports 3000 for the webapp and 8000 for the gateway service).
Finally, to deploy the frontend, you can navigate to the frontend module folder and use:

Once you have the virtual machine created, you can install **docker** and **docker-compose** using the following instructions:
```npm start```

```ssh
sudo apt update
sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"
sudo apt update
sudo apt install docker-ce
sudo usermod -aG docker ${USER}
sudo curl -L "https://github.com/docker/compose/releases/download/1.28.5/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
```
or with docker too:

### Continuous delivery (GitHub Actions)

Once we have our machine ready, we could deploy by hand the application, taking our docker-compose file and executing it in the remote machine.

In this repository, this process is done automatically using **GitHub Actions**. The idea is to trigger a series of actions when some condition is met in the repository.

As you can see, unitary tests of each module and e2e tests are executed before pushing the docker images and deploying them. Using this approach we avoid deploying versions that do not pass the tests.

The deploy action is the following:

```yml
deploy:
name: Deploy over SSH
runs-on: ubuntu-latest
needs: [docker-push-userservice,docker-push-authservice,docker-push-gatewayservice,docker-push-webapp]
steps:
- name: Deploy over SSH
uses: fifsky/ssh-action@master
with:
host: ${{ secrets.DEPLOY_HOST }}
user: ${{ secrets.DEPLOY_USER }}
key: ${{ secrets.DEPLOY_KEY }}
command: |
wget https://raw.githubusercontent.com/arquisoft/wiq_es1d/master/docker-compose.yml -O docker-compose.yml
wget https://raw.githubusercontent.com/arquisoft/wiq_es1d/master/.env -O .env
docker compose down
docker compose --profile prod up -d
```
```docker run -d -p 3000:80 --name=frontend:latest```

This action uses three secrets that must be configured in the repository:
- DEPLOY_HOST: IP of the remote machine.
- DEPLOY_USER: user with permission to execute the commands in the remote machine.
- DEPLOY_KEY: key to authenticate the user in the remote machine.
After all the components are launched, the app should be available in localhost in port 3000.

Note that this action logs in the remote machine and downloads the docker-compose file from the repository and launches it. Obviously, previous actions have been executed which have uploaded the docker images to the GitHub Packages repository.
## Miembros del equipo:
- Álvaro González Carracedo - UO251891

0 comments on commit 41d1848

Please sign in to comment.