sensu / web

Open-source Web UI for Sensu Go clusters
MIT License
30 stars 22 forks source link

Some build instructions don't work #381

Open aval13 opened 3 years ago

aval13 commented 3 years ago

I am trying to build the app for use in a production environment while being behind a proxy. Some of the commands in the installation instructions page work partially, some not at all.

Expected Behavior

Run the commands from the INSTALL.md page and work. Since the target is production, using the commands specified for production environments should work.

Current Behavior

I have tried 2 setups, both on a Debian 10 fully uptodate:

  1. using the distro provided yarn and nodejs
    # yarn --version
    1.13.0
    # node --version
    v10.24.0
  2. using the latest versions of yarn and nodejs
    # yarn --version
    1.22.5
    # node --version
    v16.8.0

    I could not find any difference in the outcome no matter the versions used, only some minor text or cosmetic changes in the error outputs.

Since I am behind a proxy, the env variables http_proxy and https_proxy are exported at all times. I have tried multiple combinations of the commands from the install page, below the issues found. I did all the tests running as root to make sure there is no access issue i may miss.

Issues, regardless of yarn and nodejs versions:

  1. When running yarn install behind the proxy with the environments variables exported, it always fails with the following error (below error with latest yarn, older yarn also fails with a similar error):
    
    root@test01:/opt/sensu/web# yarn install
    [...]
    $ yarn fetch-schema
    yarn run v1.22.5
    $ node scripts fetch-schema
    fetching graphql schema from sensu-go/4fbba86
    /opt/sensu/web/node_modules/@octokit/request/lib/request.js:94
      throw new HttpError(error.message, 500, headers, requestOptions)
            ^

HttpError: request to https://api.github.com/repos/sensu/sensu-go/contents/backend/apid/graphql/schema?ref=4fbba86 failed, reason: read ECONNRESET at /opt/sensu/web/node_modules/@octokit/request/lib/request.js:94:13 at processTicksAndRejections (node:internal/process/task_queues:96:5) { status: 500, headers: {}, request: { method: 'GET', url: 'https://api.github.com/repos/sensu/sensu-go/contents/backend/apid/graphql/schema?ref=4fbba86', headers: { accept: 'application/vnd.github.v3+json', 'user-agent': 'octokit.js/16.23.2 Node.js/16.8.0 (Linux 4.19; x64)' }, request: { validate: { owner: { required: true, type: 'string' }, path: { required: true, type: 'string' }, ref: { type: 'string' }, repo: { required: true, type: 'string' } } } } }

My best guess is this happens because octokit does not use/support the proxy setup, instead just tries to blindly connect directly.
I did a tcpdump and I can see the TCP SYNs to 443 towards the internet, not using the proxy.

2. yarn install with the modules-folder parameter fails:

root@test01:/opt/sensu/web# yarn install --modules-folder /opt/sensu/yarn/node_modules [...] $ yarn fetch-schema yarn run v1.22.5 $ node scripts fetch-schema node:internal/modules/cjs/loader:936 throw err; ^

Error: Cannot find module 'esm' Require stack:

Conclusions so far based on points 1 and 2:

  1. I tried one last crazy try:
    • in /opt/sensu/web run "yarn install" -> works
    • in /opt/sensu/web run "yarn install --modules-folder /opt/sensu/yarn/node_modules" -> works
    • rename/move the /opt/sensu/node_modules somethere else or under other name
    • try to run "NODE_ENV=production PORT=5000 API_URL=https://localhost:8080 yarn node scripts serve --modules-folder /opt/sensu/yarn/node_modules"
      
      root@test01:/opt/sensu/web# NODE_ENV=production PORT=5000 API_URL=https://localhost:8080 yarn node scripts serve --modules-folder /opt/sensu/yarn/node_modules 
      yarn node v1.22.5
      node:internal/modules/cjs/loader:936
      throw err;
      ^

Error: Cannot find module 'esm' Require stack:

  1. Also tried a variation of the above, still not working, but fails with another error:
    • in /opt/sensu/web run "yarn install" -> works
    • in /opt/sensu/web run "yarn install --modules-folder /opt/sensu/yarn/node_modules" -> works
    • rename/move the /opt/sensu/node_modules somethere else or under other name
    • try to run "NODE_PATH=/opt/sensu/yarn/node_modules NODE_ENV=production PORT=5000 API_URL=https://localhost:8080 yarn --modules-folder /opt/sensu/yarn/node_modules node scripts serve"
      root@test01:/opt/sensu/web# NODE_PATH=/opt/sensu/yarn/node_modules NODE_ENV=production PORT=5000 API_URL=https://localhost:8080 yarn --modules-folder /opt/sensu/yarn/node_modules node scripts serve
      yarn node v1.22.5
      [HPM] Proxy created: /auth,/graphql,/api  -> https://localhost:8080
      clean-webpack-plugin: /opt/sensu/web/build/app has been removed.
      listening on 5000
      (node:17145) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
      (Use `node --trace-deprecation ...` to show where the warning was created)
      (node:17145) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
      <e> [webpack-dev-middleware] Child "app": 
      <e> ERROR in ./src/app/index.js
      <e> Module build failed (from ../yarn/node_modules/babel-loader/lib/index.js):
      <e> Error: Cannot find module '@babel/plugin-syntax-dynamic-import' from '/opt/sensu/web'
      <e>     at Function.resolveSync [as sync] (/opt/sensu/yarn/node_modules/resolve/lib/sync.js:81:15)
      <e>     at resolveStandardizedName (/opt/sensu/yarn/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
      <e>     at resolvePlugin (/opt/sensu/yarn/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
      <e>     at loadPlugin (/opt/sensu/yarn/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
      <e>     at createDescriptor (/opt/sensu/yarn/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
      <e>     at /opt/sensu/yarn/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
      <e>     at Array.map (<anonymous>)
      <e>     at createDescriptors (/opt/sensu/yarn/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
      <e>     at createPluginDescriptors (/opt/sensu/yarn/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
      <e>     at plugins (/opt/sensu/yarn/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)
      <e>  @ multi ./src/app app[0]
      <i> [webpack-dev-middleware] Child "app": Failed to compile.

      However the module looks like it's there:

      root@test01:/opt/sensu/web# find /opt/sensu/yarn/node_modules/ -name '*plugin-syntax-dynamic-import*'
      /opt/sensu/yarn/node_modules/@babel/plugin-syntax-dynamic-import

Possible Solution

I have no idea. I'm a sysadmin, i have previously deployed apps with nodejs and npm, never worked with yarn before.

Steps to Reproduce

See the Current Behaviour above.

Context

Unable to build the app behind a proxy. Unable to use best practices for production build.

Your Environment

marcomezzaro commented 2 years ago

Hi, I successfully build the UI and setup nginx to serve the dashboard and proxy request to sensu api backend. docker build instruction

I would appreciate any feedback and comment. Let me know if I can PR this.

mrweir commented 1 year ago

Hi, I successfully build the UI and setup nginx to serve the dashboard and proxy request to sensu api backend. docker build instruction

I would appreciate any feedback and comment. Let me know if I can PR this.

Thank you for this! Following your docker file I was able to find that I could run yarn install without the --production flag, and then set NODE_ENV=production and run yarn run build, and that got everything into a working state using NodeJS 14.x.