extract backend url to variable

.github/workflows/build.yml

@@ -30,6 +30,18 @@ jobs:
           context: ./frontend
           file: ./frontend/Dockerfile
           push: false
-          tags: retypeme/retypeme-frontend:latest
+          tags: retypeme/retypeme-frontend-uat:latest
           build-args: |
             NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY=${{ secrets.NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY }}
+            NEXT_PUBLIC_API_DOMAIN: ${{NEXT_PUBLIC_API_DOMAIN_UAT}}
+
+      - name: Build Docker frontend image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          push: false
+          tags: retypeme/retypeme-frontend-prod:latest
+          build-args: |
+            NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY=${{ secrets.NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY }}
+            NEXT_PUBLIC_API_DOMAIN: ${{NEXT_PUBLIC_API_DOMAIN_PROD}}

.github/workflows/release.yml

@@ -66,6 +66,18 @@ jobs:
           context: ./frontend
           file: ./frontend/Dockerfile
           push: true
-          tags: retypeme/retypeme-frontend:${{ env.newTag }}, retypeme/retypeme-frontend:latest
+          tags: retypeme/retypeme-frontend-uat:${{ env.newTag }}, retypeme/retypeme-frontend-uat:latest
           build-args: |
             NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY=${{ secrets.NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY }}
+            NEXT_PUBLIC_API_DOMAIN: ${{NEXT_PUBLIC_API_DOMAIN_UAT}}
+
+      - name: Build and push Docker frontend image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./frontend
+          file: ./frontend/Dockerfile
+          push: true
+          tags: retypeme/retypeme-frontend-prod:${{ env.newTag }}, retypeme/retypeme-frontend-prod:latest
+          build-args: |
+            NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY=${{ secrets.NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY }}
+            NEXT_PUBLIC_API_DOMAIN: ${{NEXT_PUBLIC_API_DOMAIN_PROD}}

.jenkins/deploy-prod.Jenkinsfile

@@ -11,7 +11,7 @@ pipeline {
             steps {
                 withCredentials([string(credentialsId: 'JASYPT_ENCRYPTOR_PASSWORD_PROD', variable: 'JASYPT_ENCRYPTOR_PASSWORD')]) {
                     sh '''
-                    /var/lib/jenkins/.local/bin/ansible-playbook -i /var/lib/jenkins/inventory.yml --extra-vars "version=${VERSION}" deploy/deploy_prod.yml
+                    /var/lib/jenkins/.local/bin/ansible-playbook -i /var/lib/jenkins/inventory.yml --extra-vars "env=prod" --extra-vars "version=${VERSION}" deploy/deploy_prod.yml
                     '''
                 }
             }

.jenkins/deploy-uat.Jenkinsfile

@@ -11,7 +11,7 @@ pipeline {
             steps {
                 withCredentials([string(credentialsId: 'JASYPT_ENCRYPTOR_PASSWORD_UAT', variable: 'JASYPT_ENCRYPTOR_PASSWORD')]) {
                     sh '''
-                    /var/lib/jenkins/.local/bin/ansible-playbook -i /var/lib/jenkins/inventory.yml --extra-vars "version=${VERSION}" deploy/deploy_uat.yml
+                    /var/lib/jenkins/.local/bin/ansible-playbook -i /var/lib/jenkins/inventory.yml --extra-vars "env=uat" --extra-vars "version=${VERSION}" deploy/deploy_uat.yml
                     '''
                 }
             }

deploy/deploy_prod.yml

@@ -12,6 +12,10 @@
       debug:
         var: version
 
+    - name: Debug env variable
+      debug:
+        var: env
+
     - name: ensure directory retypeme exists
       file:
         path: /home/wheel/retypeme

deploy/deploy_uat.yml

@@ -12,6 +12,10 @@
       debug:
         var: version
 
+    - name: Debug env variable
+      debug:
+        var: env
+
     - name: ensure directory retypeme exists
       file:
         path: /home/wheel/retypeme

deploy/templates/docker-compose.yml.j2

@@ -15,7 +15,7 @@ services:
       - redis
 
   ui:
-    image: retypeme/retypeme-frontend:{{ version }}
+    image: retypeme/retypeme-frontend-{{ env }}:{{ version }}
     restart: always
     ports:
       - "3001:3000"

docker-compose.yml

@@ -27,6 +27,7 @@ services:
 #      context: ./frontend
 #      args:
 #        NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY: ${NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY}
+#        NEXT_PUBLIC_API_DOMAIN: ${NEXT_PUBLIC_API_DOMAIN}
     depends_on:
       - api
 

frontend/Dockerfile

@@ -4,6 +4,9 @@ FROM node:21.4.0-alpine AS build
 ARG NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY
 ENV NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY ${NEXT_PUBLIC_ENV_LOCAL_INFURA_AMOY_API_KEY}
 
+ARG NEXT_PUBLIC_API_DOMAIN
+ENV NEXT_PUBLIC_API_DOMAIN ${NEXT_PUBLIC_API_DOMAIN}
+
 WORKDIR /app
 
 # Copy package.json and package-lock.json to install dependencies

frontend/src/app/api/api-domain-service.ts

@@ -1,20 +1,23 @@
+const domain = process.env.NEXT_PUBLIC_API_DOMAIN;
+
 export default class ApiDomainService {
-  private readonly uiDomain: string;
-  private readonly domains: Map<string, string>;
+
+  private readonly wsUrl;
+  private readonly restUrl;
 
   constructor() {
-    this.uiDomain = window.location.hostname;
-    this.domains = new Map([
-      ["retypeme.apozdniakov.com", "retypeme-api.apozdniakov.com"],
-      ["retypeme.vercel.app", "retypeme-api.apozdniakov.com"],
-      ["retypeme.xyz", "app.retypeme.xyz"],
-    ]);
+    console.log("API_DOMAIN: ", domain);
+
+    this.wsUrl = this.getUrl(true);
+    this.restUrl = this.getUrl(false);
+
+    console.log("WebSocket URL: ", this.wsUrl);
+    console.log("REST URL: ", this.restUrl);
   }
 
   private getUrl(isWebSocket: boolean): string {
-    let domain = this.domains.get(this.uiDomain);
     let api = ""
-    if (domain === undefined) {
+    if (domain === undefined || domain.includes("localhost")) {
       api = isWebSocket ? "ws://localhost:8080/api/ws" : "http://localhost:8080/api";
     } else {
       api = isWebSocket ? `wss://${domain}/api/ws` : `https://${domain}/api`;
@@ -23,10 +26,10 @@ export default class ApiDomainService {
   }
 
   getWebSocketUrl(): string {
-    return this.getUrl(true);
+    return this.wsUrl;
   }
 
   getRestUrl(): string {
-    return this.getUrl(false);
+    return this.restUrl;
   }
 }