create dockerfile for webapp (#77)

Signed-off-by: Christopher Guindon <chris.guindon@eclipse-foundation.org>

.gitignore

@@ -7,6 +7,7 @@ node_modules
 
 # docker volumes
 volumes/
+certs
 
 # testing
 /coverage

Makefile

@@ -11,5 +11,8 @@ install-react:;
 	yarn --cwd src/main/www install --frozen-lockfile
 validate-spec: install-react;
 	yarn --cwd src/main/www test-spec
+generate-cert:;
+	rm -rf certs && mkdir -p certs
+	openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout certs/www.rem.docker.key -out certs/www.rem.docker.crt
 
 

README.md

@@ -14,6 +14,7 @@ Once that's done, you can install dependencies, build assets and start a dev ser
 yarn --cwd src/main/www
 yarn --cwd src/main/www build
 yarn --cwd src/main/www start
+yarn --cwd src/main/www start-spec
 ```
 
 The web app will run in the development mode.
@@ -71,6 +72,32 @@ We include a `docker-compose.yml` file with this project to help you get started
 
 *OpenLDAP is not required for the moment but we are including for testing purposes with Keycloak.
 
+#### Generate Certs for HTTPS
+
+, You will need to create a certificate in order to serve the Application on https. Make sure that the Common Name (e.g. server FQDN or YOUR name) is set to `www.rem.docker`.
+
+```sh
+make generate-cert
+```
+
+#### Update your Host file
+
+We use [jwilder/nginx-proxy](https://hub.docker.com/r/jwilder/nginx-proxy) as automated Nginx reverse proxy for our docker containers. So instead of having to lookup the port of a new service, you can simply remember it's internal dev hostname.
+
+Different operating system, different file paths!
+
+Windows: C:\Windows\System32\drivers\etc\hosts
+Linux / MacOS: /etc/hosts
+
+```
+# rem services
+
+127.0.0.1 keycloak
+127.0.0.1 api.rem.docker
+127.0.0.1 www.rem.docker
+127.0.0.1 ldap-admin.rem.docker
+```
+
 #### Environment Variables
 
 To use our `docker-compose.yml` file, create a `.env` file in the root of this project and insert your key/value pairs in the following format of KEY=VALUE. You must make sure to update the value of each variable:
@@ -91,6 +118,24 @@ Once this initial setup is done, you can start these services with this command:
 docker-compose up
 ```
 
+### KeyCloak Setup
+
+#### Create a realm
+
+Realm is a concept in Keycloak that refers to an object managing a set of users along with their credentials, roles and groups. To create a `realm`, visit [Keycloak Admin Console](http://localhost:8080/auth/admin), mouse hover where it says `master` and click on `Add Realm`, set the name to `rem_realm` and click `create`.
+
+#### Create a user
+
+To create a `user`, visit [Keycloak Admin Console](http://localhost:8080/auth/admin) and click on `Users` in the left menu. Then press the `Add User` button and fill up the form with information about the user you wish to create.
+
+To login as the user, you will need to set an initial password. To set a password, click on `Credentials`,  then set a password via the `Set Password` form. You will need to enter it twice to confirm it. You will probably want to disable `Temporary` password by clicking on the `ON` button to turn that feature off.
+
+#### Client Configuration
+
+Clients tab allows you to manage list of allowed applications.
+
+To create a client, click on `Clients` in the left menu. You can set the client_id to `rem_app` and the `Root URL` to `http://localhost:3000`. Make sure that the `Client Protocol` is set to `openid-connect`  and the `Access Type` is set to `confidential`.
+
 ## Contributing
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) the [eclipsefdn/react-eclipsefdn-members](https://github.com/eclipsefdn/react-eclipsefdn-members) repository

config/docker/vhost.d/www.rem.docker

+location /form {
+  proxy_pass http://api:8090/form;
+}
+
+location /login {
+  proxy_pass http://api:8090/login;
+}
+
+location /userinfo {
+  proxy_pass http://api:8090/userinfo;
+}
+
+location /logout {
+  proxy_pass http://api:8090/logout;
+}
\ No newline at end of file

docker-compose.yml

-version: "3"
+version: '3'
 services:
+  www:
+    build: ./src/main/www
+    image: eclipsefdn/membership-www:latest
+    ports:
+      - 3000
+    volumes:
+      - ./src/main/www:/app
+      - /app/node_modules
+    environment:
+      - VIRTUAL_HOST=www.rem.docker
+      - CHOKIDAR_USEPOLLING=true
+      - VIRTUAL_PORT=3000
   mariadb:
     image: mariadb:latest
     command: --max_allowed_packet=100000000
     ports:
-      - 3306:3306
+      - '3306:3306'
     environment:
       MYSQL_ROOT_PASSWORD: ${REM_MYSQL_PASSWORD}
       MYSQL_DATABASE: rem_quarkus_api
     volumes:
-     - ./volumes/mariadb:/var/lib/mysql
+      - ./volumes/mariadb:/var/lib/mysql
   postgres:
     container_name: postgres
     image: postgres:12.4
     volumes:
-     - ./volumes/postgres:/var/lib/postgresql/data
+      - ./volumes/postgres:/var/lib/postgresql/data
     environment:
       - POSTGRES_DB=${REM_POSTGRES_DB}
       - POSTGRES_USER=${REM_POSTGRES_USER}
       - POSTGRES_PASSWORD=${REM_POSTGRES_PASSWORD}
-      # - PGDATA=/tmp
     ports:
-      - 5432:5432
+      - 5432
   keycloak:
     container_name: keycloak
     image: jboss/keycloak:11.0.1
     environment:
+      - VIRTUAL_HOST=keycloak
+      - VIRTUAL_PORT=8080
       - DB_VENDOR=POSTGRES
       - DB_DATABASE=${REM_POSTGRES_DB}
       - DB_SCHEMA=public
@@ -36,7 +49,7 @@ services:
       - KEYCLOAK_USER=${REM_KEYCLOAK_USER}
       - KEYCLOAK_PASSWORD=${REM_KEYCLOAK_PASSWORD}
     ports:
-      - 8080:8080
+      - '8080:8080'
     depends_on:
       - postgres
       - ldap
@@ -44,8 +57,8 @@ services:
     container_name: ldap
     image: osixia/openldap
     ports:
-      - "389:389"
-      - "636:636"
+      - '389:389'
+      - '636:636'
     environment:
       - LDAP_ADMIN_PASSWORD=${REM_LDAP_ADMIN_PASSWORD}
     volumes:
@@ -55,14 +68,30 @@ services:
     container_name: ldap-admin
     image: osixia/phpldapadmin
     ports:
-      - 8083:443
+      - 80
+      - 443
     environment:
+      - VIRTUAL_HOST=ldap-admin.rem.docker
       - PHPLDAPADMIN_LDAP_HOSTS=ldap
+      - PHPLDAPADMIN_HTTPS=false
   api:
     image: eclipsefdn/membership-rest-api:latest
     ports:
-      - 8090:8090
+      - 8090
     environment:
+      - VIRTUAL_HOST=api.rem.docker
+      - VIRTUAL_PORT=8090
       - CONFIG_SECRET_PATH=/var/run/secrets/secret.properties
     volumes:
-      - ./config:/var/run/secrets
+      - ./config/secret.properties:/var/run/secrets/secret.properties
+    depends_on:
+      - mariadb
+  nginx-proxy:
+    image: jwilder/nginx-proxy
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - /var/run/docker.sock:/tmp/docker.sock:ro
+      - ./certs:/etc/nginx/certs
+      - ./config/docker/vhost.d:/etc/nginx/vhost.d:ro

src/main/resources/application.properties

@@ -13,7 +13,7 @@ quarkus.oauth2.enabled=false
 quarkus.oidc.application-type=web-app
 quarkus.oidc.discovery-enabled=true
 quarkus.oidc.roles.source=accesstoken
-quarkus.oidc.authentication.redirect-path=/
+quarkus.oidc.authentication.redirect-path=/login
 quarkus.oidc.logout.post-logout-path=/
 quarkus.oidc.logout.path=/logout
 
@@ -22,4 +22,4 @@ quarkus.oidc.logout.path=/logout
 %dev.quarkus.oidc.credentials.client-secret.value=4d596003-2cfe-49ba-a7cb-ea3d40bf5538
 %dev.security.csrf.enabled = false
 # %dev.quarkus.hibernate-orm.database.generation=drop-and-create
-%dev.eclipse.dataloader.enabled=false
+%dev.eclipse.dataloader.enabled=false
\ No newline at end of file

src/main/www/.dockerignore

+node_modules
+npm-debug.log
+build
+.dockerignore
+**/.git
+**/.DS_Store
+**/node_modules
\ No newline at end of file

src/main/www/Dockerfile

+# pull official base image
+FROM node:12.22.1-alpine
+
+# set working directory
+WORKDIR /app
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# add app
+COPY . ./
+RUN npm install
+
+# start app
+CMD ["npm", "start"]    
\ No newline at end of file

src/main/www/package.json

@@ -23,7 +23,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "test-spec": "swagger-repo validate -b ../../../spec",
-    "start-spec": "swagger-repo serve -b ../../../spec"
+    "start-spec": "swagger-repo serve -b ../../../spec -p 8999"
   },
   "eslintConfig": {
     "extends": "react-app"

src/main/www/src/Constants/Constants.js

@@ -2,10 +2,13 @@
  * list all constants here
  *
  * The purpose of this file is try to avoid using strings directly everywhere,
- * just hope to use consistant variables for strings.
+ * just hope to use consistent variables for strings.
  */
-export const api_prefix = 'http://localhost:8090';
-export const api_prefix_form = 'http://localhost:8090/form';
+export const api_prefix = () => {
+  return  '//' + window.location.host;
+}
+
+export const api_prefix_form = api_prefix() + '/form';
 
 export const COMPANY_INFORMATION = 'Company Information';
 export const MEMBERSHIP_LEVEL = 'Membership Level';
@@ -68,12 +71,8 @@ export const MODE_REACT_ONLY = 'MODE_REACT_ONLY';
 export const MODE_REACT_API = 'MODE_REACT_API';
 
 export function getCurrentMode() {
-  // @todo: need a better way to control this.
+  if (window.location.href.includes('//www.rem.docker/')) {
+    return MODE_REACT_API;
+  }
   return MODE_REACT_ONLY;
-
-  /*
-    if (window.location.href.includes('http://localhost:3000')) {
-        return MODE_REACT_ONLY;
-    } else return MODE_REACT_API;
-    */
 }

src/main/www/src/components/Pages/SignIn/SignIn.js

@@ -48,7 +48,7 @@ class SignIn extends React.Component {
 
   componentDidMount() {
     if (getCurrentMode() === MODE_REACT_API) {
-      fetch(api_prefix + `/${end_point.userinfo}`, { headers: FETCH_HEADER })
+      fetch(api_prefix() + `/${end_point.userinfo}`, { headers: FETCH_HEADER })
         .then((res) => res.json())
         .then((data) => {
           console.log(data); // {family_name: "User1", given_name: "User1", name: "user1"}