The Messaging Service Showcase application is quite simple. It is a node.js API (see NR Email Microservice) and a React.js UI (see frontend). In production, both the backend and frontend are placed behind a reverse proxy (see reverse-proxy).
We stand up a reverse proxy so that we can easily change the urls and paths to our frontend and backend components. We implement it in Caddy, which allows us to use environment variables on deploy to mange ports and paths. Other options would include Nginx and Apache Http Server.
Internally, we proxy to the OpenShift services for backend and frontend, and we only expose the reverse proxy service as a route.
Configuration of Caddy is done at deploy time through our build pipeline. Review the openshift templates to see exactly where the values we use are set. Our configured (or hardcoded) values are documented here. See reverse-proxy.dc.yaml, Jenkinsfile or Jenkinsfile.cicd.
- PROXY_SERVICE_PORT - 2015 - the port number that this Caddy is using.
- PATH_ROOT - /pr-NUM, or /mssc - the path immediate to the domain where we will be served up.
- API_SERVICE_NAME - mssc-pr-NUM-backend or mssc-master-backend
- API_SERVICE_PORT - 8080
- CHES_SERVICE_NAME - mssc-pr-NUM-ches-backend or mssc-master-ches-backend
- CHES_SERVICE_PORT - 8888
- UI_SERVICE_NAME - mssc-pr-NUM-frontend or mssc-master-frontend
- UI_SERVICE_PORT - 2015
To run and test this locally, you will need to configure and stand up ches-backend, frontend and email-microservice. Set the environment variables the same in 4 different sessions/terminals and stand each component up.
# do this in all 4 sessions/terminals
export PROXY_SERVICE_PORT=2020
export PATH_ROOT=/pr-5
export API_SERVICE_NAME=localhost
export API_SERVICE_PORT=8080
export CHES_SERVICE_NAME=localhost
export CHES_SERVICE_PORT=8888
export UI_SERVICE_NAME=localhost
export UI_SERVICE_PORT=2021
# download nr-email-microservice, configure according to their instructions, and go to the /api directory
# set env vars
# assumes that other configuration is done for Oauth urls, CMSG urls and service clients
# ensure that the OIDC configuration is correct and that we use the same config for frontend
export PORT=$API_SERVICE_PORT
npm run start
cd frontend
# set env vars
export REACT_APP_API_ROOT=$PATH_ROOT
export REACT_APP_CHES_ROOT=$PATH_ROOT
export REACT_APP_UI_ROOT=$PATH_ROOT
export REACT_APP_PUBLIC_URL=http://localhost:$PROXY_SERVICE_PORT$PATH_ROOT
export STATIC_FILES_PATH=./build
# this is for configuring the KeyCloak and OIDC, fill with appropriate values - see above for microservice
export REACT_APP_OIDC_ISSUER=https://dev.oidc.gov.bc.ca/auth/realms/98r0z7rz
export REACT_APP_OIDC_CLIENT_ID=mssc-localhost-frontend
npm run build
caddy -quic
# set env vars
cd ches-backend
npm run start
# set env vars
cd reverse-proxy
caddy -quic
You may see some file descriptor warnings, but pay no heed. In your browser, hit http://localhost:2020/pr-5/ and you should see the application working (provided you configured backend correctly). Hit http://localhost:2021/pr-5/ (where the frontend is hosted) and you should see if fail because it there is no relative api (should see http://localhost:2021/pr-5/api/v1/health 404 (Not Found)).