Angular2 [WDS]断开连接！与nignx

Question

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

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

我的nginx代理是一个反向代理，它侦听subdomain.domain.com端口443（ssl）并将其重定向到端口4200上的localhost以用于我的Angular2应用程序。 所以在我的客户端应用程序中，它尝试解析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服务运行开发服务器，它将实时重新加载到客户端，我们在生产模式下不需要这个。 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（此命令将构建您的项目并观察任何更改，然后重新构建< / em>），然后每当你想测试你做过的东西时，只需刷新你的浏览器

将root /path/to/dist/or/path/to/copyof/dist;指向如下图像

的文件夹

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