Merge pull request #163 from Arquisoft/develop

Another deploy

.gitignore

@@ -30,3 +30,5 @@ yarn-error.log*
 docs/build
 
 restapi/.env
+webapp/lomapes2c.eastus.cloudapp.azure.com.key
+webapp/lomapes2c.eastus.cloudapp.azure.com.crt

docker-compose-deploy.yml

@@ -7,6 +7,6 @@ services:
   webapp:
     image: ghcr.io/arquisoft/lomap_es2c/webapp:latest
     ports:
-      - "3000:3000"
+      - "443:443"
     depends_on: 
       - restapi

docker-compose.yml

@@ -10,7 +10,7 @@ services:
   webapp:
     build: ./webapp
     ports:
-      - "3000:3000"
+      - "443:443"
     depends_on: 
       - restapi
   prometheus:

restapi/server.ts

@@ -9,11 +9,13 @@ const mongoose = require('mongoose');
 
 
 const app: Application = express();
-const port: number = 5000;
+const port: number = Number.parseInt(`${process.env.PORT}`) || 5000;
 
 const metricsMiddleware: RequestHandler = promBundle({ includeMethod: true });
 app.use(metricsMiddleware);
 
+app.disable("x-powered-by");
+
 mongoose.connect('mongodb+srv://admin:[email protected]/?retryWrites=true&w=majority',
   {
     useNewUrlParser: true,
@@ -27,6 +29,11 @@ app.use(bp.json());
 
 app.use("/api", api)
 
+app.use(cors({
+    origin: ['https://lomapes2c.eastus.cloudapp.azure.com/' , 'http://localhost:3000'],
+    credentials:true
+}));
+
 app.listen(port, (): void => {
     console.log('Restapi listening on ' + port);
 }).on("error", (error: Error) => {

webapp/server.ts

@@ -1,10 +1,17 @@
 import express, { Application } from 'express'; 
+import https from 'https';
+import fs from 'fs';
+
 const path = require('path');
 
 const publicPath = path.join(__dirname, '.', 'build');
 
 var app: Application = express();
-const port: number =  3000;
+
+const HTTPS_PORT = 443;
+const HTTP_PORT = 3000;
+
+
 
 app.use(express.static("build"));
 
@@ -16,10 +23,33 @@ app.get('*', (req, res) => {
     };
 });
 
-app
-  .listen(port, (): void => {
-    console.log("Webapp started on port " + port);
-  })
-  .on("error", (error: Error) => {
-    console.error("Error occured: " + error.message);
-  });
+app.use((req, res, next) => {
+  if (req.secure) {
+    next();
+  } else {
+    res.redirect(`https://${req.headers.host}${req.url}`);
+  }
+});
+
+
+if (process.env.NODE_ENV === "production")
+{
+  const options = {
+    cert: fs.readFileSync('/etc/ssl/certs/lomapes2c.eastus.cloudapp.azure.com.crt'),
+    key: fs.readFileSync('/etc/ssl/private/lomapes2c.eastus.cloudapp.azure.com.key'),
+  };
+
+  https.createServer(options, app).listen(HTTPS_PORT, () => {
+    console.log(`Webapp started on port ${HTTPS_PORT}`);
+  }).on("error", (error: Error) => {
+      console.error("Error occured: " + error.message);
+    });
+
+} else {
+    app.listen(HTTP_PORT, () => {
+      console.log(`Webapp started on port ${HTTP_PORT} (development)`);
+    }).on("error", (error: Error) => {
+      console.error("Error occured: " + error.message);
+    });
+}
+

webapp/src/api/api.ts

@@ -34,6 +34,7 @@ export async function signup(user: User): Promise<User> {
 
 export async function login(user: User): Promise<User> {
     const apiEndPoint = process.env.REACT_APP_API_URI || 'http://localhost:5000/api'
+    console.log(apiEndPoint)
     let response = await fetch(apiEndPoint + '/sesionmanager/login', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },

webapp/src/components/mainComponents/ImgCarrusel.tsx

@@ -46,15 +46,15 @@ export default function StandardImageList() {
 
 const itemData = [
     {
-        img: '1.png',
+        img: '/1.png',
         title: 'Crea tus propios mapas',
     },
     {
-        img: '2.png',
+        img: '/2.png',
         title: 'Guarda tus lugares favoritos',
     },
     {
-        img: '4.png',
+        img: '/4.png',
         title: 'Ve los mapas de tus amigos',
     }
 ];

webapp/src/components/userIdentification/podLogin/Pod.tsx

@@ -88,8 +88,8 @@ export default function PodLogin() {
                             <img style={{ width: "50px", height: "auto" }}
                                 loading="lazy"
                                 width="60"
-                                src={option.name + ".png"}
-                                srcSet={option.name + ".png"}
+                                src={"/" + option.name + ".png"}
+                                srcSet={"/" + option.name + ".png"}
                                 alt={"Logo de " + option.name}
                             />
                             {option.name}
@@ -108,7 +108,7 @@ export default function PodLogin() {
                                         <InputAdornment position="start">
                                         <img
                                             style={{ width: "50px", height: "auto" }}
-                                            src={ params.inputProps.value + ".png"}
+                                            src={"/" + params.inputProps.value + ".png"}
                                             alt={"Logo de " + params.inputProps.value}
                                         />
                                         </InputAdornment>