Angular 2 [WDS] 已断开连接！用 nginx

Question

将我的 Angular2 应用程序移到 nginx 后面后，我在浏览器控制台中看到了这个：

GET https://localhost:4200/sockjs-node/info?t=1486305706324 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!

我的 nginx 代理是一个反向代理，它侦听 subdomain.domain.com 端口 443 (ssl) 并将其重定向到 Angular2 应用程序的端口 4200 上的 localhost。 所以在我的客户端应用程序的某个地方，它尝试解析 localhost:4200 而不是 subdomain.domain.com 端口 443 (ssl) 上的资源

我开始我的客户：

ng serve 0.0.0.0

我试过了：

ng serve --host subdomain.domain.com --port 443

没有运气。

我的 package.json 看起来像这样：

...

  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  }

...

我还尝试编辑 /node_modules/webpack-dev-server/client/webpack.config.js 以包括： ...

  entry: {
    'client': "webpack-dev-server/client?https://subdomain.domain.com"
  host: "https://subdomain.domain.com",
  port: 443,
  https: true

  },
  output: {
    publicPath: 'https://subdomain.domain.com'
  },

...

使用 nginx 配置更新：

server {
 listen 443 ssl;
 ssl_certificate /etc/letsencrypt/live/subdomain.domain.com/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/subdomain.domain.com/privkey.pem;
 server_name subdomain.domain.com;
 access_log /var/log/nginx.access.log;
 error_log /var/log/nginx_error.log debug;
 location / {
  include conf.d/proxy.conf;
  auth_basic "Restricted";
  auth_basic_user_file /etc/nginx/.htpasswd;
  proxy_pass http://localhost:4200/;

  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
 }
}

server {
 listen 80;
 server_name subdomain.domain.com;
 return 301 https://$host$request_uri;
}

更新了控制台日志和应用程序结构：

也没有任何运气。 关于如何告诉我在本地高端口 (4200) 上运行的应用程序在另一个端口上解析公共域上的资源的任何建议？

最好的问候。

Answer 1

我认为您可以构建生产，然后放入一个文件夹，然后将您的 nginx 指向此文件夹subdomain.domain.com，ng serve 运行开发服务器，它将实时重新加载到客户端，我们不在生产模式下需要这个。 ng build --prod 然后将dist 文件夹复制到您的网络域文件夹。

server {
    listen 80 subdomain.domain.com;
    listen [::]:80 subdomain.domain.com ipv6only=on;

    root /path/to/dist/or/path/to/copyof/dist;
    index index.html index.htm;

    server_name subdomain.domain.com;

    location / {
        try_files $uri $uri/ =404;
    }
}

出于开发目的，您可以将subdomain.domain.com root path 指向dist 文件夹，然后运行ng build --prod --watch（此命令将构建您的项目并观察任何更改，然后再次构建），然后每当您想测试自己制作的东西时，只需手动刷新浏览器

将root /path/to/dist/or/path/to/copyof/dist; 指向如下图所示的文件夹

顺便说一句，在src/assets 文件夹中包含您的 css 库、图像、字体等。当 CLI 构建您的应用程序时，它会将 src/assets 文件夹复制到 dist/assets 文件夹，这不会破坏您的样式、图像等。