Converted demo to use Docker Compose

This commit is contained in:
Kevin Naidoo 2023-11-17 16:04:52 +01:00
parent 630016870a
commit 8f829b17c0
19 changed files with 266 additions and 305 deletions

150
README.md
View File

@ -2,144 +2,52 @@
This project implements the *Hello World* of API-driven apps: a simple TODO app, built with Vue 3.
The `bbconf` folder contains basebox config files, GraphQL schema, precompiled database schema, type maps etc. and scripts to run broker and dbproxy from within the `bbconf` directory.
## Quick instructions
These files assume that you extracted the [basebox distribution](https://basebox.io/download) next to this repository's root.
If you have docker installed:-
Example:
Let's assume you create a `basebox` folder in your home directory, change into it, extract the basebox distribution archive in that folder and then clone the contents of this repository into the same folder:
* `docker compose up` in a terminal window
* Go to `http://127.0.0.1:5167/` in your browser
``` sh
cd ~
mkdir basebox
cd basebox
tar xzf basebox-x.x.x.tgz # adopt this command to the archive you downloaded
git clone --single-branch --depth 1 https://gitea.basebox.health/samples/vue-todo.git
```
For more information, see as follows.
The basebox archive will be extracted into a directory named `basebox-<version>`; for the scripts in `vue-todo/bbconf` to find the basebox binaries, please create a symbolic link to the basebox directory named `basebox`, e.g.
## Requirements:-
``` sh
ln -s basebox-x.x.x basebox
```
* [Docker](https://www.docker.com/)
If you follow these steps, the scripts in `bbconf` will work out of the box.
## Running instructions:-
## Installation
* `docker compose up`
To install this app, you need
This will download the basebox Docker images, a postgres instance and the demo application.
* npm, node.js
* A PostgreSQL server
* basebox (broker, dbproxy, bbc extracted from the basebox archive)
* Keycloak or Auth0
Once Docker is up and running, you should be able to go to your browser and navigate to http://127.0.0.1:5167/ to view the demo.
### PostgreSQL Preparation
> You need a PostgreSQL database to run this app. You can read detailed instructions on how to
> install PostgreSQL and create a test database at our [PostgreSQL Primer](https://docs.basebox.io/getting-started/postgresql/) page.
Let's create a PostgreSQL user and database for the TODO app:
``` sh
# Under (Debian) Linux, switch to the postgres user first:
# sudo su postgres
createuser -DRP bb_todo # default password: basebox
createdb -O bb_todo bb_todo
```
If you use a different password than `basebox`, you also have to change `bbconf/dbproxy-config.toml` accordingly.
Tell PostgreSQL that the `bb_todo` user connects to the database using md5 authentication. To do so, edit `/etc/postgresql/<PostgreSQL version>/main/pg_hba.conf` (on Debian based Linux systems) to contain the following:
```conf
# TYPE DATABASE USER ADDRESS METHOD
local bb_todo bb_todo md5
```
Make sure to add the line that starts with `local bb_todo...` under the commented header that starts with `# TYPE...`. PostgreSQL uses the first line that matches, so having the new line on top makes sure no other line overrides it.
Reload PostgreSQL config:
```sh
sudo systemctl reload postgresql
```
#### Database Schema
This repository contains an already compiled SQL file that creates the database schema:
```sh
psql -U bb_todo bb_todo < bbconf/bb_todo-datamodel.sql # Enter password when prompted.
```
The database configuration and installation is now complete.
If you're curious, you can recompile the GraphQL schema like so:
```sh
basebox/bin/bbc --prefix=bb_todo -f vue-todo/bbconf/todo_schema.graphql -o vue-todo/bbconf
```
### Client Installation
After installing [node.js](https://nodejs.org/en/download) and [npm](https://www.npmjs.com/package/npm), open a terminal window, go to the root of the vue-todo repository and enter the following commands:
``` sh
cd vue-todo
npm i
```
This will install the client app's dependencies.
### OpenID Connect
You can setup and use your own OpenID Connect server; if you do so, you also have to update the config files `bbconf/broker-config.toml` and `bbconf/dbroxy-config.toml` accordingly.
## Run
### Start dbproxy
Open a new terminal window, then:
``` sh
cd ~/basebox/vue-todo/bbconf
./dbproxy.sh
```
This command starts dbproxy; you will see a lot of log messages being written to the console.
### Start broker
Open another terminal window, then:
``` sh
cd ~/basebox/vue-todo/bbconf
./broker.sh
```
Again, you see broker's log messages on the console. Each request to the broker will be shown, similar to an Apache or nginx access log.
### Start the Client
In another terminal window:
``` sh
cd ~/basebox/vue-todo
npm run dev
```
This will start a node.js based HTTP test server that will host the client application. It will print the URL where you can load it to the console:
Note that if this does not work, find the npm console out (you should find the output in the Docker terminal window), which will look like the following:-
```
VITE v4.1.4 ready in 273 ms
➜ Local: http://localhost:5173/
➜ Local: http://localhost:5167/
➜ Network: use --host to expose
➜ press h to show help
```
Open your browser, go go the URL in the npm console, and enjoy.
Use the url publish here to view the demo.
The `bbconf` folder contains basebox GraphQL schema, config files, precompiled database schema, type maps etc. The GraphQL schema is the central file of basebox, from this we generate the database and create GraphQL operations to query and mutate the database. Please have a look at `bbconf\basebox\schema.graphql` to get an idea of what this looks like.
## Terminal output
We have intentionally put the basebox servers (the `broker` and the `dbproxy`) into tracing mode (this is configured in the config files in `bbconf/basebox`) so you can see more of what's happening behind the scenes while using the front-end application. Now of the SQL generated is hardcoded, they are all converted directly from the GraphQL requests.
## Compiling
The basebox compiler (bbc) compiles the GraphQL schema into a database script (this is used to create the database for our backend service), a resolver file that is used by the `dbproxy` to query and mutate the database, and a typemap file that is also used by the `dbproxy` to map GraphQL and database types together.
You can make changes to the schema files and generated new config files (liek the database script), this is how you would run the basebox compiler (`bbc`)
```
docker run --rm -v ./../bbconf/basebox/:/bbconf --name bbc gitea.basebox.health/basebox-distribution/bbc:latest /bbconf/schema.graphql --prefix bbtest -o /bbconf/
```
Note that it's better to make a copy of the schema first and use that as changes would not necessarily work with the front-end/vue application.

View File

@ -0,0 +1,63 @@
[generic]
# log level; can be error, warn, info, debug, trace
log_level = "trace"
[graphql]
# path and file name to GraphQL schema file
schema_file = "/bbconf/schema.graphql"
allow_introspection = true
[proxy]
# host name or IP of basebox DB proxy
host = "dbproxy"
port = 8081
# Whether to use http or https to connect to the proxy
tls = false
[server]
# Host name of the broker (GraphQL server)
host = "broker"
# Port number; default is 80 for http, 443 for https
port = 8080
max_request_size = 33554433
[auth]
# Contents of 'iss' field, usually the URL of the authentication realm
iss = "https://basebox-test-1.eu.auth0.com/"
# Access token audience field
aud = "basebox-todo"
# public key file for the IdP server (KeyCloak in this case)
# jwks_file = "/bbconf/idp_keys.json"
#####
# OpenID Connect scope; default is "openid profile email"
scope = "openid profile email"
# Fully qualified URL to the OAuth2 callback endpoint.
# After the user entered his/her credentials at the IdP's login form, the client will be redirected
# to this URL. When the client receives a request to this URL, it must send the request's query
# string to the broker's "openid_connect_path" set below.
#redirect_url = "http://127.0.0.1:5167/oauth-callback"
# OpenID Connect login completion request path.
# The client must pass the query string from the call to "redirect_url" to this URL and gets
# a basebox session token in return.
#openid_connect_path = "/oauth/complete-login"
# Path to the browser login URL.
# This path is where the basebox broker returns a 302 response that redirects the browser to
# the IdP login page; the target URL will contain all query parms needed to initiate an
# auth code flow login procedure, incl. CSRF protection tokens etc.
#login_path = "/oauth/login"
# Logout path that allows explicit, immediate logouts.
# Simply POST to this URL with the session cookie or bearer token.
#logout_path = "/oauth/logout"
# TODO - need?
# Set to true to get a user's additional claims from OAuth2
user_info_additional_claims_required = true

View File

@ -0,0 +1,55 @@
[generic]
# log level; can be error, warn, info, debug, trace
log_level = "trace"
[oidc_config]
# `mode` can be either "access-token" or "client". In access-token mode, all clients sending
# GraphQL requests to basebox just pass an access token in the "Authorization" HTTP header.
# In client mode, basebox acts as the OpenID Connect client and requests ID and access tokens
# from the OpenID Connect server on behalf of the client.
# See https://docs.basebox.io/guide/authorization
mode = "access-token"
# Access token validation:
# Contents of 'iss' field, usually the URL of the authentication realm
#iss = "https://www.idp.com:8090/realms/master"
# iss = "https://kcdev.basebox.io:8443/realms/test-runner"
# # Contents of the 'aud' field for access tokens; for Keycloak, this defaults to 'account';
# # for Auth0, this is the value of the Default Audience field in your Tenant settings.
# aud = "account"
# Contents of 'iss' field, usually the URL of the authentication realm
iss = "https://basebox-test-1.eu.auth0.com/"
# Access token audience field
aud = "basebox-todo"
# public key file for the IdP server (KeyCloak in this case)
#jwks_file = "/bbconf/idp_keys.json"
[graphql]
# path and file name to GraphQL schema file
schema_file = "/bbconf/schema.graphql"
# Path and file name of the resolver map file
resolver_map_file = "/bbconf/bb_todo-resolver.toml"
# Path and file name of the type map file
type_map_file = "/bbconf/bb_todo-typemap.json"
[database]
db_type = "postgres"
host = "host.docker.internal"
port = 5430
ssl_mode = "no"
db_name = "bb_todo"
username = "bb_todo"
password = "bigsecret"
[server]
# Host name of (this) proxy server
host = "dbproxy"
# Port to serve on
port = 8081
max_request_size = 33554432

View File

@ -1,37 +0,0 @@
[generic]
# log level; can be error, warn, info, debug, trace
log_level = "trace"
[graphql]
# path and file name to GraphQL schema file
schema_file = "todo_schema.graphql"
allow_introspection = true
[proxy]
# host name or IP of basebox DB proxy
host = "localhost"
port = 8081
# Whether to use http or https to connect to the proxy
tls = false
[server]
# Host name of the broker (GraphQL server)
host = "127.0.0.1"
# Port number; default is 80 for http, 443 for https
port = 8080
# number of HTTP server threads to spawn; default is one per CPU core
workers = 2
# Path and file name of TLS/SSL key file
# cert_key_file = "/path/to/key.pem"
# Path and file name of TLS certificate (chain) file
# cert_file = "/path/to/cert.pem"
[auth]
# Contents of 'iss' field, usually the URL of the authentication realm
iss = "https://basebox-test-1.eu.auth0.com/"
# Access token audience field
aud = "basebox-todo"

View File

@ -1,6 +0,0 @@
#!/bin/bash
# Run basebox broker from the samples/toodo/bbconf directory
. ./util.sh
bb_run broker -c broker-config.toml

View File

@ -1,7 +0,0 @@
#!/bin/bash
#
# Compile the todo schema.
#
. ./util.sh
bb_run bbc --prefix=bb_todo -f todo_schema.graphql

View File

@ -1,41 +0,0 @@
[generic]
# log level; can be error, warn, info, debug, trace
log_level = "trace"
[oidc_config]
# Incoming ID tokens are validated using, among other, the following fields.
# Contents of 'iss' field, usually the URL of the authetnication realm
iss = "https://basebox-test-1.eu.auth0.com/"
# Access token audience field
aud = "basebox-todo"
[graphql]
# path and file name to GraphQL schema file
schema_file = "todo_schema.graphql"
# Path and file name of the resolver map file
resolver_map_file = "bb_todo-resolver.toml"
# Path and file name of the type map file
type_map_file = "bb_todo-typemap.json"
[database]
# Type of database; currently, only "postgres" is suppoerted
db_type = "postgres"
# Setting just db_name will use PostgreSQL peer authentication mode
db_name = "bb_todo"
[server]
# Host name of (this) proxy server
host = "localhost"
# Port number; default is 80 for http, 443 for https
port = 8081
# number of HTTP server threads to spawn; default is one per CPU core
workers = 2
# Path and file name of TLS/SSL key file
# cert_key_file = "/path/to/key.pem"
# Path and file name of TLS certificate (chain) file
# cert_file = "/path/to/cert.pem"

View File

@ -1,47 +0,0 @@
[generic]
# log level; can be error, warn, info, debug, trace
log_level = "trace"
[auth]
# Incoming ID tokens are validated using, among other, the following fields.
# Contents of 'iss' field, usually the URL of the authentication realm
iss = "https://basebox-test-1.eu.auth0.com/"
# Access token audience field
aud = "basebox-todo"
[graphql]
# path and file name to GraphQL schema file
schema_file = "todo_schema.graphql"
# Path and file name of the resolver map file
resolver_map_file = "bb_todo-resolver.toml"
# Path and file name of the type map file
type_map_file = "bb_todo-typemap.json"
[database]
# Type of database; currently, only "postgres" is suppoerted
db_type = "postgres"
# The host where the DB server is runnung
host = "localhost"
# Port the DB server is listening at
port = 5432
# Database name
db_name = "bb_todo"
username = "bb_todo"
password = "basebox"
ssl_mode = "no"
[server]
# Host name of (this) proxy server
host = "localhost"
# Port number; default is 80 for http, 443 for https
port = 8081
# number of HTTP server threads to spawn; default is one per CPU core
workers = 2
# Path and file name of TLS/SSL key file
# cert_key_file = "/path/to/key.pem"
# Path and file name of TLS certificate (chain) file
# cert_file = "/path/to/cert.pem"

View File

@ -1,5 +0,0 @@
#!/bin/bash
. ./util.sh
bb_run broker -c dbproxy-config-peer.toml

View File

@ -1,6 +0,0 @@
#!/bin/bash
# Run basebox dbproxy from the samples/toodo/bbconf directory
. ./util.sh
bb_run dbproxy -c dbproxy-config.toml

View File

@ -0,0 +1,50 @@
--
-- This file is used to create the database schema. It is a copy of the `bb_todo-datamodel.sql` file
-- generated by the basebox compiler.
--
--
-- Generated by basebox compiler (bbc) version 0.1.0-beta.23 at 2023-11-01 10:35:59+01:00
--
CREATE EXTENSION IF NOT EXISTS pgcrypto;
CREATE TABLE "List" (
"id" UUID DEFAULT gen_random_uuid() NOT NULL,
"title" VARCHAR NOT NULL,
"user_username" VARCHAR NOT NULL
);
CREATE TABLE "Task" (
"id" UUID DEFAULT gen_random_uuid() NOT NULL,
"title" VARCHAR NOT NULL,
"description" VARCHAR,
"completed" BOOLEAN NOT NULL,
"user_username" VARCHAR NOT NULL,
"list_id" UUID NOT NULL
);
CREATE TABLE "User" (
"username" VARCHAR NOT NULL,
"name" VARCHAR
);
ALTER TABLE "List" ADD COLUMN ".ownerId" VARCHAR NOT NULL;
ALTER TABLE "Task" ADD COLUMN ".ownerId" VARCHAR NOT NULL;
ALTER TABLE "User" ADD COLUMN ".ownerId" VARCHAR NOT NULL;
ALTER TABLE "List" ADD PRIMARY KEY ("id");
ALTER TABLE "Task" ADD PRIMARY KEY ("id");
ALTER TABLE "User" ADD PRIMARY KEY ("username");
ALTER TABLE "List" ADD CONSTRAINT fk_list_1 FOREIGN KEY ("user_username") REFERENCES "User" ("username");
ALTER TABLE "Task" ADD CONSTRAINT fk_task_2 FOREIGN KEY ("user_username") REFERENCES "User" ("username");
ALTER TABLE "Task" ADD CONSTRAINT fk_task_3 FOREIGN KEY ("list_id") REFERENCES "List" ("id");
ALTER TABLE "User" ADD CONSTRAINT uq_user_4 UNIQUE (".ownerId");

View File

@ -1,34 +0,0 @@
#!/bin/bash
# Utility functions for basebox test shell scripts
#
bin_dir="../../basebox/bin"
source_dir="../../.."
#
# Run a basebox command.
#
# Assuming that if run by a customer that wants to try the demo app, we first look if there
# is an exeutable at "../../basebox/bin/$1" and run it if present.
# If not, we assume this is being run inside of a basebox developer environment and start the
# command with "cargo run".
#
function bb_run {
command="$1"
args="${@:2}"
# check bin directory
if [ -f "$bin_dir/$command" ]; then
"$bin_dir/$command" $args
return $?
fi
# check source tree
if [ -d "$source_dir/$command" ]; then
cargo run --manifest-path=$source_dir/$command/Cargo.toml -- $args
return $?
fi
echo "Program '$command' not found!"
return 2
}

42
docker-compose.yml Normal file
View File

@ -0,0 +1,42 @@
version: '3.9'
services:
dbproxy:
image: gitea.basebox.health/basebox-distribution/dbproxy
ports:
- "8081:8081"
command:
["--config-file=/bbconf/dbproxy-config.toml"]
volumes:
- ./bbconf/basebox/:/bbconf
broker:
image: gitea.basebox.health/basebox-distribution/broker
ports:
- "8080:8080"
command:
["--config-file=/bbconf/broker-config.toml"]
volumes:
- ./bbconf/basebox/:/bbconf
db:
image: postgres:15-alpine
volumes:
- postgres5:/var/lib/postgresql/data
- ./bbconf/postgres:/docker-entrypoint-initdb.d
ports:
- "5430:5432"
environment:
- POSTGRES_PASSWORD=bigsecret
- POSTGRES_USER=bb_todo
- POSTGRES_DB=bb_todo
web:
build:
context: .
dockerfile: web.Dockerfile
target: development
ports:
- "5167:5167"
volumes:
- .:/project
- /project/node_modules
volumes:
postgres5:

View File

@ -7,7 +7,7 @@ import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
host: '127.0.0.1',
host: '0.0.0.0',
port: 5167
},
resolve: {

26
web.Dockerfile Normal file
View File

@ -0,0 +1,26 @@
# syntax=docker/dockerfile:1.4
FROM --platform=$BUILDPLATFORM node:20-alpine AS development
RUN mkdir /project
WORKDIR /project
COPY . .
RUN npm install -g @vue/cli
RUN npm install
ENV HOST=0.0.0.0
CMD ["npm", "run", "dev"]
FROM development as dev-envs
RUN <<EOF
apk update
apk add git
EOF
RUN <<EOF
addgroup -S docker
adduser -S --shell /bin/bash --ingroup docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /
CMD ["npm", "run", "dev"]