在多个网站上部署 Angular 5 生产构建

Question

在多个站点上部署的 Angular 5 生产构建

希望生成一个可以在任何位置/域上运行的 Angular 构建。是否可以使用单个生成的构建实现这一点？

我正在使用以下命令生成构建：

ng build --prod --base-href="www.site1.com/app-name/web"

同样适用于其他网站。

ng build --prod --base-href="www.site2.com/app-name/web"
ng build --prod --base-href="www.site3.com/app-name/web"

我希望能够生成一次构建，以便我可以在多个位置部署。 有人遇到过这种情况吗？

- Developer

Answer 1

你可以将你的 package.json 文件修改为如下

"scripts": {
    ...
    "build_site1": "ng build --prod --base-href='www.site1.com/app-name/web'--output-path=dist/site1",
    "build_site2": "ng build --prod --base-href='www.site2.com/app-name/web'--output-path=dist/site2",
    "build_site3": "ng build --prod --base-href='www.site3.com/app-name/web'--output-path=dist/site3",
    "build_all": "npm run build_site1 && npm run build_site2 && npm run build_site3"
 }

然后运行

npm run build-all

你将会在不同的子文件夹或者dist中找到所有已构建的项目。

- hjbello

---

我们能否使用一个网站的dist文件来供另一个网站使用？ - Mohammad Fareed

请确认文件夹dist/site1、dist/site2、dist/site3存在。您需要使用每个文件夹中的文件分别传输到每个服务器。 - hjbello

我正在寻找一种解决方案，可以生成一次并在多个站点上使用。这是否可能？ - Mohammad Fareed

Answer 2

不要在 base-href 中指定完整的 URL。只需使用 /app-name/web。

- LoïcR

---

我们能否使用一个网站的dist文件用于另一个网站？我遇到了一些路径问题。 - Mohammad Fareed

Answer 3

--base-href标志有助于将<base href="/">标签添加到您的 HTML 文件中。这有助于解析应用程序中资源（REST API、图像、JS 等）的相对 URL。

我不清楚您的 base href 中的 "www.site1.com" 是什么？是目录还是服务器名称？

通常，对于任何 Web 应用程序 URL，您有以下重要部分：

[protocol]://[HostName]:[port]/[AppName]

如果未提供端口，则会根据协议使用默认端口（http 使用 80 作为默认端口）

几个示例：

http://www.site1.com/app-name/web

http://www.site1.com/my-app/web

http://www.site2.com:8080/app-name/web

https://www.site3.com/my-app

需要注意的重要事情是，您的Web服务器公开了一个端点（协议+主机+端口），您的Web应用程序可以在其中托管。然后，您的应用程序可以在不同路径下访问进一步的子应用程序（请参见示例URL＃1和＃2）。

现在，如果您尝试在不同的Web服务器上运行相同的应用程序，则只需将应用程序目录提供给base-href参数即可。

如果您尝试在同一Web服务器下运行多个子应用程序，则必须生成不同的构建，为--base-href参数提供不同的值。

- Suresh Patidar

Answer 4

生成应用程序构建的单个命令

ng build --prod --base-href="/cms-dev/" --output-hashing=all

如果您遇到任何构建问题并希望忽略它们，可以将以下选项添加到命令中。 --aot=false

- Mohammad Fareed