Docker compose to setup new UI (#379)

.dockerignore

@@ -16,6 +16,11 @@
 docs
 images
 
+# Front
+skyvern-frontend/.env*
+skyvern-frontend/dist
+skyvern-frontend/node_modules
+
 .dockerignore
 .gitignore
 Dockerfile

.github/workflows/build-docker-image.yml

@@ -6,8 +6,9 @@ on:
 
 env:
   AWS_REGION: us-east-1
-  ECR_REPOSITORY: skyvern
+  ECR_BACKEND_REPOSITORY: skyvern
-  REGISTRY_ALIAS: t6d4b5t4 # skyvern
+  ECR_UI_REPOSITORY: skyvern-ui
+  REGISTRY_ALIAS: skyvern # t6d4b5t4 
 
 jobs:
   run-ci:
@@ -36,7 +37,7 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
       
-      - name: Build, tag, and push image to Amazon Public ECR
+      - name: Build, tag, and push backend image to Amazon Public ECR
         id: build-image
         uses: docker/build-push-action@v2
         env:
@@ -48,6 +49,23 @@ jobs:
             linux/arm64
           push: true
           tags: |
-            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_REPOSITORY }}:${{ github.sha }}
+            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_BACKEND_REPOSITORY }}:${{ github.sha }}
-            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_REPOSITORY }}:${{ github.event.release.tag_name }}
+            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_BACKEND_REPOSITORY }}:${{ github.event.release.tag_name }}
-            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_REPOSITORY }}:latest
+            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_BACKEND_REPOSITORY }}:latest
+
+      - name: Build, tag, and push ui image to Amazon Public ECR
+        id: build-ui-image
+        uses: docker/build-push-action@v2
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr-public.outputs.registry }}
+        with:
+          context: .
+          file: Dockerfile.ui
+          platforms: |
+            linux/amd64
+            linux/arm64
+          push: true
+          tags: |
+            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_UI_REPOSITORY }}:${{ github.sha }}
+            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_UI_REPOSITORY }}:${{ github.event.release.tag_name }}
+            ${{ env.ECR_REGISTRY}}/${{ env.REGISTRY_ALIAS }}/${{ env.ECR_UI_REPOSITORY }}:latest

Dockerfile.ui

@@ -0,0 +1,12 @@
+FROM node:20.12-slim
+
+WORKDIR /app
+COPY ./skyvern-frontend /app
+COPY ./entrypoint-skyvernui.sh /app/entrypoint-skyvernui.sh
+RUN npm install
+
+ENV VITE_API_BASE_URL=http://localhost:8000/api/v1
+ENV VITE_ARTIFACT_API_BASE_URL=http://localhost:9090
+
+CMD [ "/bin/bash", "/app/entrypoint-skyvernui.sh" ]
+

docker-compose.yml

@@ -3,6 +3,7 @@ version: '3.8'
 services:
   postgres:
     image: postgres:14-alpine
+    restart: always
     # comment out if you want to externally connect DB
     # ports:
     #   - 5432:5432
@@ -20,11 +21,11 @@ services:
       retries: 5
 
   skyvern:
-    image: public.ecr.aws/t6d4b5t4/skyvern:latest
+    image: public.ecr.aws/skyvern/skyvern:latest
     restart: on-failure
     # comment out if you want to externally call skyvern API
-    # ports:
+    ports:
-    #   - 8000:8000
+      - 8000:8000
     volumes:
       - ./artifacts:/data/artifacts
       - ./videos:/data/videos
@@ -40,7 +41,7 @@ services:
       # - LLM_KEY=ANTHROPIC_CLAUDE3_OPUS
       # - ANTHROPIC_API_KEY=<your_anthropic_key>
       # - ENABLE_AZURE=true
-      # - LLM_KEY=AZURE_OPENAI_GPT4V
+      # - LLM_KEY=AZURE_OPENAI
       # - AZURE_DEPLOYMENT=<your_azure_deployment>
       # - AZURE_API_KEY=<your_azure_api_key>
       # - AZURE_API_BASE=<your_azure_api_base>
@@ -53,9 +54,27 @@ services:
       interval: 5s
       timeout: 5s
       retries: 5
+
+  skyvern-ui:
+    image: public.ecr.aws/skyvern/skyvern-ui:latest
+    restart: on-failure
+    ports:
+      - 8080:8080
+      - 9090:9090
+    volumes:
+      - ./artifacts:/data/artifacts
+      - ./videos:/data/videos
+      - ./har:/data/har
+      - ./.streamlit:/app/.streamlit
+    # environment:
+    #   - VITE_API_BASE_URL=
+    #   - VITE_SKYVERN_API_KEY=
+    depends_on:
+      skyvern:
+        condition: service_healthy
   
   streamlit:
-    image: public.ecr.aws/t6d4b5t4/skyvern:latest
+    image: public.ecr.aws/skyvern/skyvern:latest
     restart: on-failure
     ports:
       - 8501:8501

entrypoint-skyvernui.sh

@@ -0,0 +1,11 @@
+
+#!/bin/bash
+
+set -e
+
+# setting api key
+export VITE_SKYVERN_API_KEY=$(sed -n 's/.*cred\s*=\s*"\([^"]*\)".*/\1/p' .streamlit/secrets.toml)
+
+npm run start
+
+