UCSD-E4E · zclawr · Apr 11, 2024 · Apr 29, 2024 · May 16, 2024 · May 27, 2024
diff --git a/.env b/.env
diff --git a/.env.production b/.env.production
diff --git a/Dockerfile b/Dockerfile
@@ -4,26 +4,45 @@ FROM node:18-alpine AS build
 # Create a working directory to perform our build in
 WORKDIR /usr/src/app
 
-# Do this separately so that we can cache it
+# Copy package.json and package-lock.json files
 COPY package*.json ./
-# Using npm ci will install only from package-lock.json
+
+# Install dependencies using npm ci for a clean install based on package-lock.json
 RUN npm ci
 
-# Copy all the project files
+# Copy the rest of the project files
 COPY . .
 
-# Do the build
+# Build the project
 RUN npm run build
 
 ##### Start Deploy Container
 FROM nginx:alpine as production
-EXPOSE 80
 
+# Install envsubst for environment variable substitution
+RUN apk add --no-cache gettext
+# Add bash
+RUN apk add --no-cache bash
+
+# Copy the template configuration file
+COPY nginx.conf.template /etc/nginx/nginx.conf.template
+
+# Expose the port
+EXPOSE ${PORT}
+
+# Set the working directory where our static content is stored
 WORKDIR /usr/share/nginx/html
 
 # Clear the default pages
 RUN rm -rf ./*
-# Copy all static assets
-COPY --from=build /usr/src/app/build /usr/share/nginx/html
 
-ENTRYPOINT [ "nginx", "-g", "daemon off;" ]
+# Copy all static assets from the build stage
+COPY --from=build /usr/src/app/build /usr/share/nginx/html
+# Copy over bash script for loading env variables during run-time
+COPY ./scripts/env.sh .
+# Make our shell script executable
+RUN chmod +x env.sh
+
+# Use envsubst to replace environment variables and generate the final nginx.conf, then start Nginx
+# This is done right before running the app, but not at build-time of the image
+CMD ["/bin/sh", "-c", "envsubst '${PORT} ${WEBSERVER_ADDRESS}' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && /bin/bash /usr/share/nginx/html/env.sh && nginx -g 'daemon off;'"]
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -0,0 +1,17 @@
+{
+  "files": {
+    "main.css": "/static/css/main.4b3b839a.css",
+    "main.js": "/static/js/main.6b8c95dc.js",
+    "static/media/MangroveHome.jpg": "/static/media/MangroveHome.2e09bcdf2a92944b25a5.jpg",
+    "static/media/about-page-1.jpg": "/static/media/about-page-1.7571c589f15baee34137.jpg",
+    "static/media/about-page-2.jpg": "/static/media/about-page-2.f5f6babc2bc1a476c9ca.jpg",
+    "static/media/about-page-top.jpg": "/static/media/about-page-top.4c57545a5d83eb4d299c.jpg",
+    "index.html": "/index.html",
+    "main.4b3b839a.css.map": "/static/css/main.4b3b839a.css.map",
+    "main.6b8c95dc.js.map": "/static/js/main.6b8c95dc.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.4b3b839a.css",
+    "static/js/main.6b8c95dc.js"
+  ]
+}
diff --git a/build/favicon.ico b/build/favicon.ico
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><script src="/env-config.js"></script><title>Mangrove Monitoring</title><script defer="defer" src="/static/js/main.6b8c95dc.js"></script><link href="/static/css/main.4b3b839a.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/logo192.png b/build/logo192.png
diff --git a/build/logo512.png b/build/logo512.png
diff --git a/build/manifest.json b/build/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Mangrove",
+  "name": "Mangrove Monitoring",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/build/robots.txt b/build/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/build/static/css/main.4b3b839a.css b/build/static/css/main.4b3b839a.css
diff --git a/build/static/css/main.4b3b839a.css.map b/build/static/css/main.4b3b839a.css.map
diff --git a/build/static/js/main.6b8c95dc.js b/build/static/js/main.6b8c95dc.js
diff --git a/build/static/js/main.6b8c95dc.js.LICENSE.txt b/build/static/js/main.6b8c95dc.js.LICENSE.txt
@@ -0,0 +1,87 @@
+/* @preserve
+ * Leaflet 1.9.3, a JS library for interactive maps. https://leafletjs.com
+ * (c) 2010-2022 Vladimir Agafonkin, (c) 2010-2011 CloudMade
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine v5.12.0
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.3.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.8.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.8.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
diff --git a/build/static/js/main.6b8c95dc.js.map b/build/static/js/main.6b8c95dc.js.map
diff --git a/build/static/media/MangroveHome.2e09bcdf2a92944b25a5.jpg b/build/static/media/MangroveHome.2e09bcdf2a92944b25a5.jpg
diff --git a/build/static/media/about-page-1.7571c589f15baee34137.jpg b/build/static/media/about-page-1.7571c589f15baee34137.jpg
diff --git a/build/static/media/about-page-2.f5f6babc2bc1a476c9ca.jpg b/build/static/media/about-page-2.f5f6babc2bc1a476c9ca.jpg
diff --git a/build/static/media/about-page-top.4c57545a5d83eb4d299c.jpg b/build/static/media/about-page-top.4c57545a5d83eb4d299c.jpg
diff --git a/nginx.conf.template b/nginx.conf.template
@@ -0,0 +1,52 @@
+user nginx;
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Logging settings
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+    error_log   /var/log/nginx/error.log   warn;
+
+    sendfile            on;
+    tcp_nopush          on;
+    tcp_nodelay         on;
+    keepalive_timeout   65;
+    types_hash_max_size 2048;
+
+    server {
+        listen       ${PORT};
+
+        # Main context for serving our static content
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+            try_files $uri $uri/ /index.html;
+        }
+
+        error_page  500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+
+        # Reverse proxy directive configuration for WebSocket connections
+        # NOTE: endpoints in webserver will need to start with /ws/ as well!!!
+        location /ws/ {
+            proxy_pass http://${WEBSERVER_ADDRESS};  # URL for webserver
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+        }
+    }
+}