Using apache as foward (not serving files)

apache/Dockerfile

@@ -1,2 +1,2 @@
 FROM httpd:2.4
-COPY ./my-httpd.conf /usr/local/apache2/conf/httpd.conf
+COPY ./httpd-citizen.conf /usr/local/apache2/conf/httpd.conf

apache/httpd-citizen.conf

@@ -140,11 +140,9 @@ LoadModule setenvif_module modules/mod_setenvif.so
 LoadModule version_module modules/mod_version.so
 #LoadModule remoteip_module modules/mod_remoteip.so
 LoadModule proxy_module modules/mod_proxy.so
-#MOD MARC
 #LoadModule proxy_connect_module modules/mod_proxy_connect.so
 #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
 LoadModule proxy_http_module modules/mod_proxy_http.so
-#MOD MARC
 #LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
 #LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
 #LoadModule proxy_uwsgi_module modules/mod_proxy_uwsgi.so
@@ -264,9 +262,8 @@ ServerAdmin you@example.com
 # documents. By default, all requests are taken from this directory, but
 # symbolic links and aliases may be used to point to other locations.
 #
-DocumentRoot "/home/appuser/citizen/frontend/dist/browser"
+DocumentRoot "/usr/local/apache2/htdocs"
-# mod marc
+<Directory "/usr/local/apache2/htdocs">
-<Directory "/home/appuser/citizen/frontend/dist/browser">
     #
     # Possible values for the Options directive are "None", "All",
     # or any combination of:
@@ -552,38 +549,20 @@ SSLRandomSeed startup builtin
 SSLRandomSeed connect builtin
 </IfModule>
 
-
+# SELON install_app.sh
-#MOD MARC ->
-
 <VirtualHost *:80>
-    # La suite de la configuration ne concerne plus les fichiers statiques
+	<Location />
-    # mais passe simplement les requêtes à un des 3 services
+        ProxyPass  http://citizen-front:4000/ retry=0
+        ProxyPassReverse  http://citizen-front:4000/
+   	</Location>
 
-    # Chemin de GeoNature-citizen (frontend)
+	# API Url
-    #<Location />
+	<Location /api>
-    #  ProxyPass http://citizen-front:4000/ retry=0
+        ProxyPass  http://citizen-back:5002/api retry=0
-    #  ProxyPassReverse  http://citizen-front:4000/
+        ProxyPassReverse  http://citizen-back:5002/api
-    #</Location>
-
-
-    # Chemin de GeoNature-citizen (API)
-    <Location /citizen/api>
-      ProxyPass http://citizen-back:5002/api retry=0
-      ProxyPassReverse  http://citizen-back:5002/api
     </Location>
 
-
+	# Error logs
-    # La suite de la configuration ne concerne plus les fichiers statiques
+	ErrorLog /var/log/apache2-citizen-error.log
-    # mais passe simplement les requêtes à un des 3 services
+	CustomLog /var/log/apachecitizen.log combined
-
-
-    # Chemin de l'interface web de taxhub
-    # Chemin de taxhub
-    <Location /taxhub>
-    ProxyPass  http://taxhub:5000/ retry=0
-    ProxyPassReverse  http://taxhub:5000/
-    </Location>
 </VirtualHost>
-
-
-#END MOD MARC

docker-compose.override.yml

@@ -28,11 +28,17 @@ services:
       - ./patches/settings.ini:/home/appuser/citizen/config/settings.ini
       - ./patches/frontend/src/conf:/home/appuser/citizen/frontend/src/conf
       - ./patches/frontend/src/assets:/home/appuser/citizen/frontend/src/assets
-      - ./dist/browser:/home/appuser/citizen/frontend/dist/browser
+      - ./patches/frontend/server.ts:/home/appuser/citizen/frontend/server.ts
+      - ./dist:/home/appuser/citizen/frontend/dist
+      # re files installed by npm install
+      - ./node_modules:/home/appuser/citizen/frontend/node_modules
     ports:
       - "4000:4000"
       - "4200:4200"
     command: npm run serve:ssr
+    environment:
+      # avoid goodle analytics question
+      - "NG_CLI_ANALYTICS=false"
   citizen-back:
     build:
       dockerfile: ./Dockerfile-back
@@ -67,9 +73,7 @@ services:
   apache:
     build:
       context: ./apache
+      dockerfile: ./Dockerfile
     image: registry.gitlab.com/champs-libres/geonature-citizen/apache
     ports:
       - "8080:80"
-    volumes:
-      - ./dist/browser:/home/appuser/citizen/frontend/dist/browser
-      - ./apache/my-httpd.conf /usr/local/apache2/conf/httpd.conf

docker-compose.yml

@@ -3,4 +3,4 @@ services:
   citizen:
     build: .
     ports:
-      - "8080:80"
+      - "8888:80"

patches/frontend/server.ts

@@ -0,0 +1,101 @@
+import 'zone.js/dist/zone-node';
+import { enableProdMode } from '@angular/core';
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+
+import * as express from 'express';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+
+const supportedLocales = ['en', 'fr'];
+const DEFAULT_LOCALE = 'fr';
+const MockBrowser = require('mock-browser').mocks.MockBrowser;
+const mock = new MockBrowser();
+const domino = require('domino');
+const template = readFileSync(
+    join(DIST_FOLDER, DEFAULT_LOCALE, 'index.html')
+).toString();
+const win = domino.createWindow(template);
+win.Object = Object;
+win.Math = Math;
+win.screen = { deviceXDPI: 1 };
+global['window'] = win;
+global['document'] = win.document;
+global['navigator'] = mock.getNavigator();
+global['branch'] = null;
+global['object'] = win.object;
+global['HTMLElement'] = win.HTMLElement;
+global['HTMLAnchorElement'] = win.HTMLAnchorElement;
+global['DOMTokenList'] = win.DOMTokenList;
+global['Node'] = win.Node;
+global['Text'] = win.Text;
+global['localStorage'] = win.localStorage = mock.getLocalStorage();
+global['L'] = require('leaflet');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {
+    AppServerModuleNgFactory,
+    LAZY_MODULE_MAP,
+} = require('./dist/server/main');
+
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+app.engine(
+    'html',
+    ngExpressEngine({
+        bootstrap: AppServerModuleNgFactory,
+        providers: [provideModuleMap(LAZY_MODULE_MAP)],
+    })
+);
+
+app.set('view engine', 'html');
+app.set('views', DIST_FOLDER);
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Serve static files from /browser
+app.get(
+    '*.*',
+    express.static(DIST_FOLDER, {
+        maxAge: '1y',
+    })
+);
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+    const matches = req.url.match(/^\/([a-z]{2}(?:-[A-Z]{2})?)\//);
+    // check if the requested url has a correct format '/locale' and matches any of the supportedLocales
+    const locale =
+        matches && supportedLocales.indexOf(matches[1]) !== -1
+            ? matches[1]
+            : DEFAULT_LOCALE;
+
+    let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
+    if (ip.substr(0, 7) === '::ffff:') {
+        ip = ip.substr(7);
+    }
+    // res.render("index", { req });
+    res.render(`${locale}/index`, {
+        req: req,
+        url: req.url.replace(`/${locale}/`, '/'),
+        providers: [
+            { provide: 'language', useFactory: () => locale, deps: [] },
+            { provide: 'ip', useFactory: () => ip, deps: [] },
+        ],
+    });
+});
+
+// Start up the Node server
+app.listen(PORT, '0.0.0.0', () => {
+    console.log(`BLOP Node Express server listening on http://localhost:${PORT}`);
+});

patches/frontend/src/conf/app.config.ts

@@ -1,6 +1,6 @@
 export const AppConfig = {
     appName: "GeoNature-citizen",
-    API_ENDPOINT:"http://localhost:8080/citizen/api",
+    API_ENDPOINT:"http://localhost:8080/api",
     API_TAXHUB:"http://localhost:8080/taxhub/api/",
     FRONTEND:{
         PROD_MOD:true,

patches/settings.ini

@@ -7,7 +7,7 @@ my_local=fr_FR.UTF-8
 my_url=http://localhost:8080/
 
 url_application=http://localhost:8080/        # Url For the frontend
-api_endpoint=http://localhost:8080/citizen/api        # Url for the geonature api don't forget /api
+api_endpoint=http://localhost:8080/api        # Url for the geonature api don't forget /api
 api_port=5002
 api_taxhub=http://localhost:8080/taxhub/api/             # Url for the taxhub api