Merge pull request #749 from OSMCha/jlow/deployment-cleanup

Clean up deployment workflow

.dockerignore

@@ -0,0 +1 @@
+node_modules/

Dockerfile

@@ -1,18 +1,24 @@
-FROM node:16-slim as builder
+FROM node:22-alpine as builder
 
 ENV DEBIAN_FRONTEND noninteractive
 
 ARG BUILD_ENV=prod
 
-RUN mkdir /app
 WORKDIR /app
-COPY package.json /app
-COPY yarn.lock /app
+COPY package.json yarn.lock /app/
+RUN yarn set version stable
 RUN yarn install
 
-COPY . /app/
+COPY src/ /app/src
+COPY public/ /app/public
 ENV REACT_APP_PRODUCTION_API_URL /api/v1
-RUN yarn build:${BUILD_ENV}
+
+# fix for openssl ERR_OSSL_EVP_UNSUPPORTED
+# 'error:03000086:digital envelope routines::initialization error'
+ENV NODE_OPTIONS --openssl-legacy-provider
+
+RUN yarn run build:${BUILD_ENV}
 
 FROM nginx:alpine
-COPY --from=builder /app/build /assets
+COPY --from=builder /app/build /srv/www
+COPY nginx.conf /etc/nginx/templates/default.conf.template

nginx.conf

@@ -0,0 +1,36 @@
+server {
+  listen 80;
+  charset utf-8;
+
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
+
+  gzip on;
+  sendfile on;
+  tcp_nopush on;
+  tcp_nodelay on;
+  keepalive_timeout 65;
+
+  location ~ ^/(api|admin) {
+    # /api and /admin routes are handled by the backend
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header Host $http_host;
+    proxy_redirect off;
+    proxy_pass $BACKEND_URL;
+  }
+
+  location /static {
+    # /static files are served without any magic (exact path or 404)
+    root /srv/www;
+    try_files $uri =404;
+  }
+
+  location / {
+    # other routes are served by trying the exact path, and falling back to
+    # serving the app entrypoint (index.html). this is needed because the
+    # frontend JS code uses the path component of the URL in its client-side
+    # routing.
+    root /srv/www;
+    try_files $uri $uri/ /index.html;
+  }
+}

package.json

@@ -53,7 +53,6 @@
     "check-node-version": "^2.0.1",
     "enzyme": "^2.9.1",
     "flow-bin": "^0.54.1",
-    "gh-pages": "^1.0.0",
     "husky": "^0.14.2",
     "jest": "24.9.0",
     "jest-cli": "24.9.0",
@@ -73,14 +72,10 @@
     "lint": "eslint src",
     "test": "npm run lint && react-scripts test --env=jsdom",
     "coverage": "react-scripts test --env=jsdom --coverage",
-    "build": "REACT_APP_VERSION=\"$(node -e \"console.log(require('./package.json').version)\")\" REACT_APP_STACK=DEV react-scripts build",
-    "build:dev": "REACT_APP_VERSION=\"$(node -e \"console.log(require('./package.json').version)\")\" REACT_APP_STACK=DEV PUBLIC_URL=https://mapbox.github.io/osmcha-frontend react-scripts build",
-    "deploy:dev": "gh-pages -d build",
-    "build:staging": "REACT_APP_VERSION=\"$(node -e \"console.log(require('./package.json').version)\")\" REACT_APP_STACK=STAGING PUBLIC_URL=https://staging.osmcha.org react-scripts build",
-    "deploy:staging": "gh-pages -d build -b oh-pages",
-    "build:prod": "REACT_APP_VERSION=\"$(node -e \"console.log(require('./package.json').version)\")\" REACT_APP_STACK=PRODUCTION PUBLIC_URL=https://osmcha.org react-scripts build",
-    "deploy:prod": "gh-pages -d build -b oh-pages",
-    "build:test": "REACT_APP_VERSION=\"$(node -e \"console.log(require('./package.json').version)\")\" REACT_APP_STACK=PRODUCTION PUBLIC_URL=https://osmcha-test.ds.io react-scripts build"
+    "build": "npm run build:dev",
+    "build:dev": "REACT_APP_STACK=DEV react-scripts build",
+    "build:staging": "REACT_APP_STACK=STAGING react-scripts build",
+    "build:prod": "REACT_APP_STACK=PRODUCTION react-scripts build"
   },
   "lint-staged": {
     "*.js": [

public/index.html

@@ -5,44 +5,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta name="google" value="notranslate">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="shortcut icon" href="/favicon.ico">
   <title>OSMCha</title>
   <meta property="og:site_name" content="OSMCha">
   <meta property="og:title" content="OSMCha">
   <meta property="og:description" content="Validation tool for OpenStreetMap">
   <meta name="keywords" content="OpenStreetMap, OSM, validation, changeset, open data, quality assurance">
   <link href="https://api.mapbox.com/mapbox-assembly/v0.21.0/assembly.min.css" rel="stylesheet">
   <script async defer src="https://api.mapbox.com/mapbox-assembly/v0.21.0/assembly.js"></script>
-  <script type="text/javascript">
-    // Single Page Apps for GitHub Pages
-    // https://github.com/rafrex/spa-github-pages
-    // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-    // ----------------------------------------------------------------------
-    // This script checks to see if a redirect is present in the query string
-    // and converts it back into the correct url and adds it to the
-    // browser's history using window.history.replaceState(...),
-    // which won't cause the browser to attempt to load the new url.
-    // When the single page app is loaded further down in this file,
-    // the correct url will be waiting in the browser's history for
-    // the single page app to route accordingly.
-    (function (l) {
-      console.log(l.host.indexOf('github.io'));
-      if (l.search && l.host.indexOf('github.io') > -1) {
-        var q = {};
-        l.search.slice(1).split('&').forEach(function (v) {
-          var a = v.split('=');
-          q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
-        });
-        if (q.p !== undefined) {
-          window.history.replaceState(null, null,
-            l.pathname.slice(0, -1) + (q.p || '') +
-            (q.q ? ('?' + q.q) : '') +
-            l.hash
-          );
-        }
-      }
-    }(window.location))
-  </script>
 </head>
 
 <body>

src/config/index.js

@@ -1,10 +1,12 @@
 // @flow
+import { version } from '../../package.json';
+
 export const isDev = process.env.REACT_APP_STACK === 'DEV';
 export const isStaging = process.env.REACT_APP_STACK === 'STAGING';
 export const isProd = process.env.REACT_APP_STACK === 'PRODUCTION';
 export const isLocal = process.env.NODE_ENV === 'development';
 export const stack = process.env.REACT_APP_STACK;
-export const appVersion = process.env.REACT_APP_VERSION;
+export const appVersion = version;
 
 let url =
   process.env.REACT_APP_PRODUCTION_API_URL || 'https://osmcha.org/api/v1';

src/store/history.js

@@ -1,9 +1,5 @@
 import { createBrowserHistory } from 'history';
 import { isDev } from '../config';
 let historyConfig = {};
-if (isDev) {
-  historyConfig.basename = '/osmcha-frontend';
-}
-
 const history = createBrowserHistory(historyConfig);
 export { history };