我有一个位于某些服务器上的 REST 后端服务和以 Angular 制作的前端应用程序。
我正在使用 Angular CLI 来构建应用程序。我的后端服务器的位置位于环境文件中。
我的应用程序的要求是我提供两个 docker 图像。一个是我的后端服务器(Java Spring Boot 应用程序)，第二个是使用 ng build myApp 命令构建的静态 html。然后我将内容 od dist 目录复制到 docker 图像上的适当目录，如此处所示 Nginx docker image .
问题是，后端和前端可能在不同的服务器上工作。有什么方法可以配置我的前端应用程序，以便我可以根据容器的启动更改后端服务器位置？
最佳答案
我知道这是一个老问题，但我遇到了完全相同的问题，我花了一段时间才解决。希望这对那些来自搜索引擎的人有所帮助。
我找到了 2 个解决方案(我最终选择了第二个)。两者都允许您在 docker 中使用环境变量来配置您的 API URL。
解决方案 1(“客户端”):env.js Assets + sed
我们的想法是让您的 Angular 客户端从您的 HTTP 服务器加载一个 env.js 文件。此 env.js 将包含 API URL，并且可以在容器启动时对其进行修改。这就是您在问题评论中讨论的内容。
在你的 Angular 应用程序 Assets 文件夹中添加一个 env.js(src/assets 对于我使用 angular-cli):
var MY_APP_ENV = {
apiUrl: 'http://localhost:9400',
}
在您的 index.html 中，您将加载您的环境:
<head>
<meta charset="utf-8">
<base href="/">
<script src="env.js"></script>
</head>
在您的 environment.ts 中，您可以使用变量:
declare var MY_APP_ENV: any;
export const environment = {
production: false,
apiUrl: MY_APP_ENV.apiUrl
};
在您的 NGINX Dockerfile 中执行:
FROM nginx:1.11-alpine
COPY tmp/dist /usr/share/nginx/html
COPY run.sh /run.sh
CMD ["sh", "/run.sh"]
run.sh 脚本是 sed 魔术发生的地方:
#!/bin/sh
# API
/bin/sed -i "s|http://localhost:9400|${MY_API_URL}|" /usr/share/nginx/html/env.js
nginx -g 'daemon off;'
在您的 Angular 服务中，使用 environment.apiUrl 连接到 API(您需要导入环境，请参阅 Angular 2 文档)。
方案二(纯服务器端):nginx proxy config + envsubst
我对之前的解决方案不满意，因为 API URL 需要从主机的 Angular 来看，它不能在我的 docker-compose 设置中使用另一个容器主机名。
于是我想:很多人用NGINX做代理服务器，为什么不这样把/api代理到我的另一个容器呢。
docker 文件:
FROM nginx:1.11-alpine
COPY tmp/dist /usr/share/nginx/html
COPY frontend.conf.template /etc/nginx/conf.d/frontend.conf.template
COPY run.sh /run.sh
CMD ["/bin/sh", "/run.sh"]
前端.conf.模板:
server {
listen 80;
server_name myserver;
# API Server
location /api/ {
proxy_pass ${MY_API_URL}/;
}
# Main
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri$args $uri$args/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
运行.sh:
#!/bin/sh
# Substitute env vars
envsubst '$MY_API_URL' \
< /etc/nginx/conf.d/frontend.conf.template \
> /etc/nginx/conf.d/default.conf
# Start server
nginx -g 'daemon off;'
envsubt 允许您使用类似 shell 的语法替换字符串中的环境变量。
然后使用 /api/xyz 从 Angular 应用程序连接到 API。
我认为第二种解决方案更简洁。 API URL 可以是 docker-compose 设置中的 API docker 容器名称，这很好。客户不参与，它是透明的。但是，这取决于 NGINX。
关于angularjs - Angular2应用的配置——nginx和docker，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40598876/