【问题标题】：why I need web-server to load angular webapp为什么我需要 web-server 来加载 angular webapp
【发布时间】：2020-02-24 08:40:49
【问题描述】：

我将我的 angular webapp 投入生产并阅读了官方文档，我意识到我需要一个 web 服务器，是这样吗？在这种情况下，当我上传我的在线 webapp 时，我们需要在 url 中指定端口吗？例如 www.mywebapp.com:4200 如果没有，它是如何工作的？谢谢

【问题讨论】：

是的，您需要一台服务器来托管和提供文件。不，您不需要设置端口，因为您将从服务器的公共文件夹（很可能）和 HTTP 的默认端口、端口 80 或默认的 HTTPS 端口 443 上提供服务，以防您有 SSL 证书你会用的。
如果服务器中有多个 Web 应用会怎样？
它们应该位于不同的文件夹中，并且可以从不同的服务器路由（URL）访问
好的我明白了，谢谢你的回复

标签： angular production

【解决方案1】：

我在这里看到了很多混乱。我会尽量解释清楚。

当您使用命令ng serve 为应用程序提供服务时，您将要运行在nodeJS 中本地制作的网络服务器。默认情况下，它在端口4200 上运行，但您可以使用标志更改它：ng serve --port 4567。通过这样做，如果您在浏览器中输入localhost:4200，您将无法访问您的站点，但您需要使用4567 端口。

默认端口为 4200 的原因是因为很可能没有其他应用程序使用该端口。

当您构建应用程序时，结果是一个dist 文件夹，其中包含一个文件列表。所有这些文件都可以被浏览器解释，而*.ts 不能。

由于 Typescript 是 Javascript 的 superset，因此需要对其进行编译。这主要是构建的作用。所以现在你已经准备好部署这个文件列表了。你问的问题来了，do I need a web server?

视情况而定。

如果应用程序不需要上网并且根本不进行任何 http 调用或与后端/数据库交互，您只需在浏览器上直接打开 index.html 即可。因此无需使用web-server。

如果这不是您的情况，那么您需要一个网络服务器。原因很简单，每个站点都托管在服务器上。一个可以在任何地方解析的公网IP的机器（不包括国家ISP（互联网服务提供商）一开始就断开连接的情况）。

我们以 SO 为例。如果您在浏览器中键入www.stackoverflow.com，您将访问该站点。如果您输入www.stackoverflow.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，浏览器会给您一个经典错误“无法访问 www.mysite.com”。但是如果你输入mysite.com:12443 你会得到想要的结果。在这种情况下，dist 文件夹的内容。

您还问：如果在服务器？

对我来说，你有两个选择：

1) 每个 Web 服务器使用不同的端口。然后，您可以根据请求使用不同的端口导航到您的特定内容：

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 来设置完美的场景。如果有人感兴趣，我会发布一些我个人在我的 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，我会看到与前两个导航内容无关的其他内容。

编辑，如果有人对如何使用 HTTPS 运行这些容器感兴趣重定向我可以添加一些带有一些细节的代码。

【讨论】：

【解决方案2】：

从技术上讲，您需要一个服务来托管您的网络应用程序，而如今不一定是网络服务器。

托管

网络服务器

当您选择使用网络服务器时，它可以是专用服务器或共享服务器。当您预计大量流量消耗大量服务器 CPU 和内存使用率时，您将使用专用服务器。

如果您要托管临时站点或演示站点，则可以使用共享服务，其中多个托管站点/网络应用程序使用相同的服务器/IP 地址。通过使用Virtual Hosts，服务器可以确定请求是针对哪个域（例如my-webapp.com）并显示正确的网络应用程序。这并不容易配置，但是有许多服务可以很容易地从一台服务器托管多个 Web 应用程序。一个例子是Runcloud。

静态托管

或者，您可以通过 Amazon S3 或 Microsoft Azure Storage 等云存储服务托管您的网络应用程序。这也非常适合利用 CDN 服务的优势。

Heroku（和/或其他）

您还可以使用Heroku 之类的服务来管理和托管您的网络应用程序。这是一篇开始使用Angular and Heroku 的帖子。

建筑

在您部署您的网络应用程序到这些或其他解决方案之前，您必须使用 Angular CLI 的Build 进程来构建/准备您的应用程序。请务必查看Deployment 上的 Angular 文档，并注意 URL 重写（针对 Web 服务器）或静态托管的后备要求。

【讨论】：

【解决方案3】：

编译（构建）您的 Angular 应用程序后，您将获得静态文件（html、css、js），并且这些文件需要托管和服务，这将允许其他人使用/使用它。这里的一些（不是全部）流行选择可能是 Nginx 或 Apache 或像 Heroku 或 Amazon 等无服务器解决方案。

【讨论】：