search

GNS3 / gns3-web-ui

WebUI implementation for GNS3
GNU General Public License v3.0
155 stars 54 forks source link

Production deployment #1366

Open grossmj opened 2 years ago

grossmj commented 2 years ago

We use this script to bundle the web-ui in the GNS3 server: https://github.com/GNS3/gns3-server/blob/3.0/scripts/update-bundled-web-ui.sh

ng build --source-map=false --configuration=production --base-href /static/web-ui/
✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
✔ Index html generation complete.

Initial Chunk Files           | Names                                       |  Raw Size | Estimated Transfer Size
main.ed2a26de59441791.js      | main                                        |   3.55 MB |               610.61 kB
styles.1035ff77d963da68.css   | styles                                      | 372.99 kB |                27.86 kB
polyfills.9fee123abd7f0c0c.js | polyfills                                   |  37.28 kB |                11.68 kB
runtime.337b1c9aa18f212b.js   | runtime                                     |   3.32 kB |                 1.42 kB

                              | Initial Total                               |   3.95 MB |               651.56 kB

Lazy Chunk Files              | Names                                       |  Raw Size | Estimated Transfer Size
465.236319d2dbba2475.js       | topology-summary-topology-summary-component |  13.39 kB |                 3.27 kB

Build at: 2022-07-26T22:32:29.753Z - Hash: 27ff8b8a74705d18 - Time: 37583ms
Done in 39.03s.

However nothing can be seen when opening a browser to point to the server IP/port. I can see some .js and .css files are sent from the server but nothing is displayed. This works when bundling v2 of the web-ui, so I am definitely suspecting something is wrong with v3.

Screenshot from 2022-07-27 00-35-13

I have also tried to manually deploy and running a small http server in the web-ui repo directly:

yarn ng build --configuration production
yarn run v1.22.19
$ ng build --configuration production
✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
✔ Index html generation complete.

Initial Chunk Files           | Names                                       |  Raw Size | Estimated Transfer Size
main.ed2a26de59441791.js      | main                                        |   3.55 MB |               610.61 kB
styles.1035ff77d963da68.css   | styles                                      | 372.99 kB |                27.86 kB
polyfills.9fee123abd7f0c0c.js | polyfills                                   |  37.28 kB |                11.68 kB
runtime.337b1c9aa18f212b.js   | runtime                                     |   3.32 kB |                 1.42 kB

                              | Initial Total                               |   3.95 MB |               651.56 kB

Lazy Chunk Files              | Names                                       |  Raw Size | Estimated Transfer Size
465.236319d2dbba2475.js       | topology-summary-topology-summary-component |  13.39 kB |                 3.27 kB

Build at: 2022-07-26T22:43:12.786Z - Hash: 27ff8b8a74705d18 - Time: 35303ms
Done in 36.76s.

cd dist
npx http-server 
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.0.12:8080
  http://172.16.252.1:8080
  http://192.168.2.1:8080
Hit CTRL-C to stop the server

[2022-07-26T22:50:45.401Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0"
(node:77113) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2022-07-26T22:50:45.448Z]  "GET /runtime.29d8da670a84f0b1.js" "Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0"
[2022-07-26T22:50:45.450Z]  "GET /polyfills.d2d889ceca19b8ef.js" "Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0"
[2022-07-26T22:50:45.451Z]  "GET /main.cf1cebee20d2fb6c.js" "Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0"
[2022-07-26T22:50:45.481Z]  "GET /styles.1035ff77d963da68.css" "Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0"
[2022-07-26T22:50:45.756Z]  "GET /assets/favicon.ico" "Mozilla/5.0 (Windows NT 10.0; rv:100.0) Gecko/20100101 Firefox/100.0"

This is the same result, files are served by the HTTP server but nothing is displayed in the browser. The only "error" I can see when building is this one, maybe that's the reason?

⠋ Generating index html...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
grossmj commented 2 years ago

It works after adding --build-optimizer=false to the build command line.

$ ng build --source-map=false --build-optimizer=false --configuration=production --base-href /static/web-ui/
✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
✔ Index html generation complete.

Initial Chunk Files           | Names                                       |  Raw Size | Estimated Transfer Size
main.6c2c5909222aa3d2.js      | main                                        |   4.10 MB |               728.21 kB
styles.1035ff77d963da68.css   | styles                                      | 372.99 kB |                27.86 kB
polyfills.7e7f4a715088fcc2.js | polyfills                                   |  37.38 kB |                11.67 kB
runtime.b694e7eebb80e122.js   | runtime                                     |   3.32 kB |                 1.42 kB

                              | Initial Total                               |   4.50 MB |               769.15 kB

Lazy Chunk Files              | Names                                       |  Raw Size | Estimated Transfer Size
465.1c1bfd214c8e7f59.js       | topology-summary-topology-summary-component |  13.50 kB |                 3.28 kB

Build at: 2022-07-28T09:23:54.862Z - Hash: 6730b2d6b3b5e280 - Time: 100894ms

./node_modules/bootstrap/dist/css/bootstrap.min.css.webpack[javascript/auto]!=!./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/bootstrap/dist/css/bootstrap.min.css - Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

Done in 103.34s.

So now need to understand what is this optimizer and if we need it?

Also, need to investigate these 2 errors/warnings:

⠋ Generating index html...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
./node_modules/bootstrap/dist/css/bootstrap.min.css.webpack[javascript/auto]!=!./node_modules/@angular-devkit/build-angular/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./node_modules/bootstrap/dist/css/bootstrap.min.css - Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

The last one seems to be a consequence of deactivating --build-optimizer=false...