Styjun

In order to have a production like setup, I want to hide all of the dev server enpoints of Angular and PHP behind an nginx reverse proxy (listening on port 8002).
For the most part this is working.
The API properly delivers its data and processes requests as expected.
The Angular dev servers also deliver their apps as expected.
The only issue I have is in regard to hot reloading of the second Angular dev server instance, as it only reloads on changes in the first instance.

The main angular app which runs on port 4200 works properly with hot reloading.
However, the second instance (running on port 4300) does not listen to the sockjs instance with the location ~ ^/collector/sockjs-node/ but to the location ~ ^/sockjs-node/.
This surprises me, as the base in my index.html is set to the correct path: <base href="/collector/">.

So, I could conclude, that I (probably) have to change some setting in angular in order to get it to notify the app on a different endpoint.
My angular.json is pretty much the auto generated config from the setup, except that I added the PWA package of angular.

My angular.json is the following, with the app name replaced by 'some-app' as it is still in development and not published yet:

 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": 
 "some-app": 
 "root": "",
 "sourceRoot": "src",
 "projectType": "application",
 "prefix": "app",
 "schematics": 
 "@schematics/angular:component": 
 "style": "sass"
 
 ,
 "architect": 
 "build": 
 "builder": "@angular-devkit/build-angular:browser",
 "options": 
 "outputPath": "dist/some-app",
 "index": "src/index.html",
 "main": "src/main.ts",
 "polyfills": "src/polyfills.ts",
 "tsConfig": "src/tsconfig.app.json",
 "assets": [
 "src/favicon.ico",
 "src/assets",
 "src/manifest.json"
 ],
 "styles": [
 "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
 "src/styles.scss"
 ],
 "scripts": [],
 "es5BrowserSupport": true
 ,
 "configurations": 
 "production": 
 "fileReplacements": [
 
 "replace": "src/environments/environment.ts",
 "with": "src/environments/environment.prod.ts"
 
 ],
 "optimization": true,
 "outputHashing": "all",
 "sourceMap": false,
 "extractCss": true,
 "namedChunks": false,
 "aot": true,
 "extractLicenses": true,
 "vendorChunk": false,
 "buildOptimizer": true,
 "budgets": [
 
 "type": "initial",
 "maximumWarning": "2mb",
 "maximumError": "5mb"
 
 ],
 "serviceWorker": true,
 "ngswConfigPath": "src/ngsw-config.json"
 
 
 ,
 "serve": 
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": 
 "browserTarget": "some-app:build"
 ,
 "configurations": 
 "production": 
 "browserTarget": "some-app:build:production"
 
 
 ,
 "extract-i18n": 
 "builder": "@angular-devkit/build-angular:extract-i18n",
 "options": 
 "browserTarget": "some-app:build"
 
 ,
 "test": 
 "builder": "@angular-devkit/build-angular:karma",
 "options": 
 "main": "src/test.ts",
 "polyfills": "src/polyfills.ts",
 "tsConfig": "src/tsconfig.spec.json",
 "karmaConfig": "src/karma.conf.js",
 "styles": [
 "src/styles.scss"
 ],
 "scripts": [],
 "assets": [
 "src/favicon.ico",
 "src/assets",
 "src/manifest.json"
 ]
 
 ,
 "lint": 
 "builder": "@angular-devkit/build-angular:tslint",
 "options": 
 "tsConfig": [
 "src/tsconfig.app.json",
 "src/tsconfig.spec.json"
 ],
 "exclude": [
 "**/node_modules/**"
 ]
 
 
 
 ,
 "some-app-e2e": 
 "root": "e2e/",
 "projectType": "application",
 "prefix": "",
 "architect": 
 "e2e": 
 "builder": "@angular-devkit/build-angular:protractor",
 "options": 
 "protractorConfig": "e2e/protractor.conf.js",
 "devServerTarget": "some-app:serve"
 ,
 "configurations": 
 "production": 
 "devServerTarget": "some-app:serve:production"
 
 
 ,
 "lint": 
 "builder": "@angular-devkit/build-angular:tslint",
 "options": 
 "tsConfig": "e2e/tsconfig.e2e.json",
 "exclude": [
 "**/node_modules/**"
 ]
 
 
 
 
 ,
 "defaultProject": "some-app"

In case, it can also be fixed in nginx, this is my current settings file for the setup, which is included in the http settings block in /etc/nginx/nginx.conf:

map $http_upgrade $connection_upgrade 
 default upgrade;
 '' close;


upstream websocket 
 server 127.0.0.1:4200;
 server 127.0.0.1:4300;
 server 127.0.0.1:5656;


server 
 listen 8002;
 server_name localhost;
 location ~ ^/api(.*) 
 proxy_pass http://127.0.0.1:8000$1$is_args$args;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 

 location ~ ^/sockjs-node/ 
 proxy_pass http://127.0.0.1:4200;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_http_version 1.1;
 proxy_cache_bypass $http_upgrade;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 

 location ~ ^/collector/sockjs-node/ 
 proxy_pass http://127.0.0.1:4300;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_http_version 1.1;
 proxy_cache_bypass $http_upgrade;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 

 location ~ ^/collector(.*) 
 proxy_pass http://127.0.0.1:4300$1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_http_version 1.1;
 proxy_cache_bypass $http_upgrade;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 

 location ^~ /push/ 
 proxy_pass http://127.0.0.1:5656;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_http_version 1.1;
 proxy_cache_bypass $http_upgrade;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 

 location ~ 
 proxy_pass http://127.0.0.1:4200$1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_http_version 1.1;
 proxy_cache_bypass $http_upgrade;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;