Containerizing ui and rest backend into one docker image

Dockerfile

@@ -1,14 +1,27 @@
-FROM python:3.9
+# Stage 1: build frontend ui
+FROM node:16-alpine as ui-build
+WORKDIR /usr/src/ui
+COPY ./ui .
+
+## Use api endpoint from same host and build production static bundle
+RUN echo 'REACT_APP_API_ENDPOINT=' >> .env.production
+RUN npm install && npm run build
 
-COPY ./ /usr/src
+# Stage 2: build backend and start nginx to as reserved proxy for both ui and backend
+FROM python:3.9
 
-# Intall package feathr
-WORKDIR /usr/src/feathr_project
-RUN pip install -e .
+## Install dependencies
+RUN apt-get update -y && apt-get install -y nginx
 
-# Install packages in requirements.txt
-WORKDIR /usr/src/feathr_project/feathr/api
+WORKDIR /usr/src/backend
+COPY ./registry/sql-registry /usr/src/backend
 RUN pip install -r requirements.txt
 
-# Start web server
-CMD [ "uvicorn","app.main:app","--host", "0.0.0.0", "--port", "80" ]
+## Remove default nginx index page and copy ui static bundle files
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=ui-build /usr/src/ui/build /usr/share/nginx/html
+COPY ../deploy/nginx.conf /etc/nginx/nginx.conf
+
+# Start
+COPY ../deploy/env.sh .
+CMD ["/bin/sh", "-c", "./env.sh && nginx && uvicorn main:app --host 0.0.0.0 --port 8000"]

deploy/env.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+envfile=/usr/share/nginx/html/env-config.js
+
+echo "window.environment = {" > $envfile
+
+if [[ -z "${AZURE_CLIENT_ID}" ]]; then
+    echo "Environment variable AZURE_CLIENT_ID is not defined, skipping"
+else
+    echo "  \"azureClientId\": \"${AZURE_CLIENT_ID}\"," >> $envfile
+fi
+
+if [[ -z "${AZURE_TENANT_ID}" ]]; then
+    echo "Environment variable AZURE_TENANT_ID is not defined, skipping"
+else
+    echo "  \"azureTenantId\": \"${AZURE_TENANT_ID}\"," >> $envfile
+fi
+
+echo "}" >> $envfile
+
+echo "Successfully generated ${envfile} with following content"
+cat $envfile

deploy/nginx.conf

@@ -0,0 +1,20 @@
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen 80;
+
+        location / {
+            include /etc/nginx/mime.types;
+            try_files $uri /index.html =404;
+        }
+
+        location /api {
+            proxy_pass http://localhost:8000/api;
+        }
+    }
+}

docs/how-to-guides/build-and-push-feathr-registry-docker-image.md

@@ -0,0 +1,48 @@
+---
+layout: default
+title: How to build and push feathr registry docker image
+parent: Feathr How-to Guides
+---
+
+# How to build and push feathr registry docker image
+
+This doc shows how to build feathr registry docker image locally and publish to registry
+
+## Prerequisites
+
+Follow the [instructions](https://docs.docker.com/get-docker) to setup docker locally
+
+## Build docker image locally
+
+Open terminal and go to root of this repository, run following command
+
+```bash
+docker build -t feathrfeaturestore/sql-registry .
+```
+
+## Test docker image locally
+
+Run **docker images** command, you will see newly created image listed in output
+
+```bash
+docker images
+```
+
+Run **docker run** command to test docker image locally
+
+```bash
+docker run --env CONNECTION_STR=__REPLACE_ME_WITH_SQL_CONNECTION_STRING__ --env API_BASE=api/v1 -it --rm -p 3000:80 feathrfeaturestore/sql-registry
+```
+
+Open web browser and navigate to <https://localhost:3000>，verify you can see feathr ui and able to login successfully.
+
+## Upload to DockerHub Registry
+
+Login with feathrfeaturestore account and then run **docker push** command to publish docker image to DockerHub
+
+```bash
+docker login
+docker push feathrfeaturestore/sql-registry
+```
+
+

ui/.env

@@ -1,3 +1,3 @@
 REACT_APP_AAD_APP_CLIENT_ID=db8dc4b0-202e-450c-b38d-7396ad9631a5
 REACT_APP_AAD_APP_AUTHORITY=https://login.microsoftonline.com/common
-REACT_APP_API_ENDPOINT=https://feathr-registry.azurewebsites.net
+REACT_APP_API_ENDPOINT=https://feathr-sql-registry.azurewebsites.net