Fixing problems with remote URLs

.env

@@ -1 +1,2 @@
-teamname="wiq_0"
+teamname="wiq_0"
+WIQ_EXTERNAL_DNS_NAME_OR_IP=$DOCKER_HOST_IP

README.md

@@ -83,6 +83,19 @@ sudo curl -L "https://github.com/docker/compose/releases/download/1.28.5/docker-
 sudo chmod +x /usr/local/bin/docker-compose
 ```
 
+After installing Docker, we need to set up a global environment variable to configure external container connectivity. This can be done by editing the /etc/environment file:
+
+```bash
+sudo nano /etc/environment
+```
+
+and adding the following line:
+
+```bash
+DOCKER_HOST_IP=[IP address of the remote machine]
+```
+
+
 ### Continuous delivery (GitHub Actions)
 
 Once we have our machine ready, we could deploy by hand the application, taking our docker-compose file and executing it in the remote machine. 

docker-compose.yml

@@ -13,7 +13,7 @@ services:
 
   authservice:
     container_name: authservice-${teamname:-defaultASW}
-    image: ghcr.io/arquisoft/wiq_0/authservice:latest
+    image: ghcr.io/arquisoft/${teamname:-wiq_0}/authservice:latest
     profiles: ["dev", "prod"]
     build: ./users/authservice
     depends_on:
@@ -27,7 +27,7 @@ services:
 
   userservice:
     container_name: userservice-${teamname:-defaultASW}
-    image: ghcr.io/arquisoft/wiq_0/userservice:latest
+    image: ghcr.io/arquisoft/${teamname:-wiq_0}/userservice:latest
     profiles: ["dev", "prod"]
     build: ./users/userservice
     depends_on:
@@ -41,7 +41,7 @@ services:
 
   gatewayservice:
     container_name: gatewayservice-${teamname:-defaultASW}
-    image: ghcr.io/arquisoft/wiq_0/gatewayservice:latest
+    image: ghcr.io/arquisoft/${teamname:-wiq_0}/gatewayservice:latest
     profiles: ["dev", "prod"]
     build: ./gatewayservice
     depends_on:
@@ -58,13 +58,15 @@ services:
 
   webapp:
     container_name: webapp-${teamname:-defaultASW}
-    image: ghcr.io/arquisoft/wiq_0/webapp:latest
+    image: ghcr.io/arquisoft/${teamname:-wiq_0}/webapp:latest
     profiles: ["dev", "prod"]
     build: ./webapp
     depends_on:
       - gatewayservice
     ports:
       - "3000:3000" 
+    environment:
+      REACT_APP_API_ENDPOINT: http://${WIQ_EXTERNAL_DNS_NAME_OR_IP:-localhost}:8000
 
   prometheus:
     image: prom/prometheus

gatewayservice/.env

@@ -0,0 +1,2 @@
+AUTH_SERVICE_URL=http://localhost:8002
+USER_SERVICE_URL=http://localhost:8001

gatewayservice/Dockerfile

@@ -13,5 +13,8 @@ RUN npm install
 # Copy the app source code to the working directory
 COPY . .
 
+#Remove env file (not necesary for docker)
+RUN rm -f .env
+
 # Define the command to run your app
 CMD ["node", "gateway-service.js"]

users/authservice/.env

@@ -0,0 +1 @@
+MONGODB_URI=mongodb://localhost:27017/userdb

users/authservice/Dockerfile

@@ -13,6 +13,9 @@ RUN npm install
 # Copy the app source code to the working directory
 COPY . .
 
+#Remove env file (not necesary for docker)
+RUN rm -f .env
+
 # Expose the port the app runs on
 EXPOSE 8002
 

users/userservice/.env

@@ -0,0 +1 @@
+MONGODB_URI=mongodb://localhost:27017/userdb

users/userservice/Dockerfile

@@ -13,6 +13,9 @@ RUN npm install
 # Copy the app source code to the working directory
 COPY . .
 
+#Remove env file (not necesary for docker)
+RUN rm -f .env
+
 # Expose the port the app runs on
 EXPOSE 8001
 

webapp/Dockerfile

@@ -2,13 +2,11 @@ FROM node:20
 
 COPY . /app
 WORKDIR /app
-
+#Remove env file (not necesary for docker)
+RUN rm -f .env
 #Install the dependencies
 RUN npm install
 
-ARG API_URI="http://localhost:8000"
-ENV REACT_APP_API_ENDPOINT=$API_URI
-
 #Create an optimized version of the webapp
 RUN npm run build
 RUN npm install serve

webapp/src/components/AddUser.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 
-const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT;
 
 const AddUser = () => {
   const [username, setUsername] = useState('');

webapp/src/components/Login.js

@@ -11,7 +11,7 @@ const Login = () => {
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT;
 
   const loginUser = async () => {
     try {