为什么我需要网络服务器来加载 angular webapp
why I need web-server to load angular webapp
我将我的 angular webapp 投入生产并阅读官方文档我意识到我需要一个网络服务器，是这样吗？在这种情况下，当我上传我的在线 webapp 时，我们需要在 url?例如 www.mywebapp.com:4200 如果不是，它是如何工作的？谢谢
作为编译（构建）您的 Angular 应用程序的结果，您将获得静态文件（html、css、js）并且需要托管和提供这些文件，这将允许其他 use/consume 这个。这里一些（不是全部）流行的选择可能是 Nginx 或 Apache 或无服务器解决方案，如 Heroku 或 Amazon 等。
我看到这里有很多混乱。我会尽可能解释清楚。
当您使用命令 ng serve 为应用程序提供服务时，您即将 运行 一个使用 nodeJS 本地制作的网络服务器。默认情况下它 运行 在端口 4200 上，但您可以使用标志更改它：ng serve --port 4567。通过这样做，如果您在浏览器中键入 localhost:4200，您将无法访问您的站点，但您需要使用 4567 端口。
The reason why by default the port is 4200 is because most likely
there aren't other applications using that port.
当您构建应用程序时，结果是一个 dist 文件夹，其中包含一个文件列表。所有这些文件都可以被浏览器解释，而 *.ts 则不能。
由于 Typescript 是 Javascript 的 superset，因此需要对其进行编译。这主要是构建的作用。现在您已准备好要部署的文件列表。你问的问题来了，do I need a web server?
It depends.
如果应用程序不需要上网并且根本不进行任何 http 调用或与后端/数据库交互，您只需直接在浏览器上打开 index.html 即可运行美好的。因此不需要使用 web-server.
如果这不是您的情况，那么您需要一个网络服务器。原因很简单，每个站点都托管在服务器上。一台publicIP的机器，到处都能解析（不包括一开始被国家ISP（互联网服务提供商）切断连接的情况）。
我们以SO为例。如果您在浏览器中键入 www.whosebug.com，您将到达该站点。如果您键入 www.whosebug.com:80，您将得到相同的结果。
看这里：https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers
如果向下滚动一点，您会看到端口 80 用于 HTTP requests。这是标准，所有浏览器默认情况下，当您尝试导航到站点时，将使用此端口（对于 HTTPS 请求，端口更改为 443，但逻辑有点相同）。
您还可以将服务器的防火墙配置为不接受端口 80 上的任何连接，而是接受端口 12443 上的任何连接，并放置一个侦听该端口的 Web 服务器。结果将是，如果您键入 www.mysite.com，浏览器将给您一个经典错误 "Cannot reach www.mysite.com"。但是如果你输入 mysite.com:12443 你会得到想要的结果。在这种情况下，dist 文件夹的内容。
You also asked: What happens if there are more than one web app in the
server?
你有两个选择，对我来说：
1) 每个网络服务器使用不同的端口。然后，您可以根据请求使用不同的端口导航到您的特定内容：
www.mysite.com -> standard site on port 80.
www.mysite.com:456 -> another site on port 456
and so on...
2) 使用 reverse-proxy 处理指定端口上的所有不同请求（默认情况下，80 和 443 | HTTP 和 HTTPS）。
这个话题真的很复杂，但让我们以这个为例。
您有三个不同的站点要托管在您的服务器上。
你可以使用docker和nginx（nginx是一个网络服务器，像IIS或apache）和nginx-proxy来设置完美设想。
如果有人感兴趣，我会 post 一些我个人在 VPS 上使用的代码。
我有一个 Dockerfile 来构建主容器：
FROM nginx:alpine
COPY ./site/ /usr/share/nginx/site_volume
COPY ./static/ /usr/share/nginx/assets_volume
COPY ./site.conf /etc/nginx/conf.d/default.conf
nginx 配置：
server {
listen 80;
server_name mysite.com;
root /usr/share/nginx/site_volume;
}
server {
listen 80;
server_name www.mysite.com
root /usr/share/nginx/site_volume;
}
server {
listen 80;
server_name static.mysite.com;
root /usr/share/nginx/assets_volume;
}
构建并运行安装容器后的结果：
docker build -t my-site .
docker run -d -p 80:80 my-site
是当我导航到mysite.com或www.mysite.com时我会看到一些东西。如果我导航到 static.mysite.com，我会看到其他内容，与前两个导航的内容无关。
EDIT, if someone is interessed on how to run those containers with an HTTPS
redirect I can add some code with some details.
从技术上讲，您需要一个 服务 来托管您的 Web 应用程序，如今不一定是 Web 服务器。
托管
网络服务器
当您选择使用网络服务器时，它可以是专用服务器或共享服务器。当您预计会消耗大量服务器 CPU 和内存使用量的大量流量时，您可以使用 专用 服务器。
如果您要托管暂存或演示站点，您可以使用 共享 服务，其中多个托管 sites/web 应用程序使用相同的 server/IP 地址.通过使用 Virtual Hosts, the server can determine for which domain the request is (e.g. my-webapp.com) and displaying the correct web app. This is not easy to configure, but there are many services out there that make it very easy to host multiple web apps from one server. One example is Runcloud.
静态主机
或者，您可以从 Amazon S3 or Microsoft Azure Storage 等云存储服务托管您的 Web 应用程序。这也非常适合利用 CDN 服务的优势。
Heroku（and/or 其他）
您还可以使用 Heroku to manage and host your web application. Here is a post to get started with Angular and Heroku 等服务。
建筑
在您部署您的网络应用到这些或其他解决方案之前，您必须build/prepare您的应用使用Angular CLI Build process. Be sure to have a look at the Angular documentation on Deployment 并注意 URL 重写（对于 Web 服务器）或静态托管的回退要求。
我将我的 angular webapp 投入生产并阅读官方文档我意识到我需要一个网络服务器，是这样吗？在这种情况下，当我上传我的在线 webapp 时，我们需要在 url?例如 www.mywebapp.com:4200 如果不是，它是如何工作的？谢谢
作为编译（构建）您的 Angular 应用程序的结果，您将获得静态文件（html、css、js）并且需要托管和提供这些文件，这将允许其他 use/consume 这个。这里一些（不是全部）流行的选择可能是 Nginx 或 Apache 或无服务器解决方案，如 Heroku 或 Amazon 等。
我看到这里有很多混乱。我会尽可能解释清楚。
当您使用命令 ng serve 为应用程序提供服务时，您即将 运行 一个使用 nodeJS 本地制作的网络服务器。默认情况下它 运行 在端口 4200 上，但您可以使用标志更改它：ng serve --port 4567。通过这样做，如果您在浏览器中键入 localhost:4200，您将无法访问您的站点，但您需要使用 4567 端口。
The reason why by default the port is 4200 is because most likely there aren't other applications using that port.
当您构建应用程序时，结果是一个 dist 文件夹，其中包含一个文件列表。所有这些文件都可以被浏览器解释，而 *.ts 则不能。
由于 Typescript 是 Javascript 的 superset，因此需要对其进行编译。这主要是构建的作用。现在您已准备好要部署的文件列表。你问的问题来了，do I need a web server?
It depends.
如果应用程序不需要上网并且根本不进行任何 http 调用或与后端/数据库交互，您只需直接在浏览器上打开 index.html 即可运行美好的。因此不需要使用 web-server.
如果这不是您的情况，那么您需要一个网络服务器。原因很简单，每个站点都托管在服务器上。一台publicIP的机器，到处都能解析（不包括一开始被国家ISP（互联网服务提供商）切断连接的情况）。
我们以SO为例。如果您在浏览器中键入 www.whosebug.com，您将到达该站点。如果您键入 www.whosebug.com:80，您将得到相同的结果。
看这里：https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers
如果向下滚动一点，您会看到端口 80 用于 HTTP requests。这是标准，所有浏览器默认情况下，当您尝试导航到站点时，将使用此端口（对于 HTTPS 请求，端口更改为 443，但逻辑有点相同）。
您还可以将服务器的防火墙配置为不接受端口 80 上的任何连接，而是接受端口 12443 上的任何连接，并放置一个侦听该端口的 Web 服务器。结果将是，如果您键入 www.mysite.com，浏览器将给您一个经典错误 "Cannot reach www.mysite.com"。但是如果你输入 mysite.com:12443 你会得到想要的结果。在这种情况下，dist 文件夹的内容。
You also asked: What happens if there are more than one web app in the server?
你有两个选择，对我来说：
1) 每个网络服务器使用不同的端口。然后，您可以根据请求使用不同的端口导航到您的特定内容：
www.mysite.com -> standard site on port 80.
www.mysite.com:456 -> another site on port 456
and so on...
2) 使用 reverse-proxy 处理指定端口上的所有不同请求（默认情况下，80 和 443 | HTTP 和 HTTPS）。
这个话题真的很复杂，但让我们以这个为例。 您有三个不同的站点要托管在您的服务器上。
你可以使用docker和nginx（nginx是一个网络服务器，像IIS或apache）和nginx-proxy来设置完美设想。
如果有人感兴趣，我会 post 一些我个人在 VPS 上使用的代码。
我有一个 Dockerfile 来构建主容器：
FROM nginx:alpine
COPY ./site/ /usr/share/nginx/site_volume
COPY ./static/ /usr/share/nginx/assets_volume
COPY ./site.conf /etc/nginx/conf.d/default.conf
nginx 配置：
server {
listen 80;
server_name mysite.com;
root /usr/share/nginx/site_volume;
}
server {
listen 80;
server_name www.mysite.com
root /usr/share/nginx/site_volume;
}
server {
listen 80;
server_name static.mysite.com;
root /usr/share/nginx/assets_volume;
}
构建并运行安装容器后的结果：
docker build -t my-site .
docker run -d -p 80:80 my-site
是当我导航到mysite.com或www.mysite.com时我会看到一些东西。如果我导航到 static.mysite.com，我会看到其他内容，与前两个导航的内容无关。
EDIT, if someone is interessed on how to run those containers with an HTTPS redirect I can add some code with some details.
从技术上讲，您需要一个 服务 来托管您的 Web 应用程序，如今不一定是 Web 服务器。
托管
网络服务器
当您选择使用网络服务器时，它可以是专用服务器或共享服务器。当您预计会消耗大量服务器 CPU 和内存使用量的大量流量时，您可以使用 专用 服务器。
如果您要托管暂存或演示站点，您可以使用 共享 服务，其中多个托管 sites/web 应用程序使用相同的 server/IP 地址.通过使用 Virtual Hosts, the server can determine for which domain the request is (e.g. my-webapp.com) and displaying the correct web app. This is not easy to configure, but there are many services out there that make it very easy to host multiple web apps from one server. One example is Runcloud.
静态主机
或者，您可以从 Amazon S3 or Microsoft Azure Storage 等云存储服务托管您的 Web 应用程序。这也非常适合利用 CDN 服务的优势。
Heroku（and/or 其他）
您还可以使用 Heroku to manage and host your web application. Here is a post to get started with Angular and Heroku 等服务。
建筑
在您部署您的网络应用到这些或其他解决方案之前，您必须build/prepare您的应用使用Angular CLI Build process. Be sure to have a look at the Angular documentation on Deployment 并注意 URL 重写（对于 Web 服务器）或静态托管的回退要求。