Unverified Commit 021d8ad7 authored by Christopher Guindon's avatar Christopher Guindon Committed by GitHub
Browse files

create dockerfile for webapp (#77)


Signed-off-by: Christopher Guindon's avatarChristopher Guindon <chris.guindon@eclipse-foundation.org>
parent bf8cad90
......@@ -7,6 +7,7 @@ node_modules
# docker volumes
volumes/
certs
# testing
/coverage
......
......@@ -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
......@@ -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
......
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
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
......@@ -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
node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules
\ No newline at end of file
# 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
......@@ -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"
......
......@@ -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;
*/
}
......@@ -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"}
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment