Question

我有一个REST后端服务，位于某个服务器和前端应用程序中。我使用Angular CLI构建应用程序。我的后端服务器的位置位于环境文件中。我的应用程序的要求是我提供两个泊坞窗图像。一个是我的后端服务器（Java Spring Boot应用程序），另一个是带有ng build myApp命令的静态html构建。然后我将内容od dist目录复制到docker image上的正确目录，如Nginx docker image所示。

问题是，后端和前端可能在不同的服务器上运行。有没有办法可以配置我的前端应用程序，我可以根据容器的启动更改后端服务器位置？

Answer 1

我知道这是一个老问题，但我遇到了同样的问题，我花了一些时间来解决。这对来自搜索引擎的人有帮助。

我找到了2个解决方案（我最终选择了第二个解决方案）。两者都允许您在docker中使用环境变量来配置API URL。

解决方案1（＆＃34;客户＆＃34; -side）：env.js asset + sed

我们的想法是让您的Angular客户端从HTTP服务器加载env.js文件。此env.js将包含API网址，并可在容器启动时由其修改。这就是您在问题评论中讨论的内容。

使用angular-cli为我的角度应用资源文件夹（env.js）添加src/assets：

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;'

在您的角度服务中，使用environment.apiUrl连接到API（您需要导入环境，请参阅Angular 2文档）。

解决方案2（纯服务器端）：nginx proxy config + envsubst

我对以前的解决方案不满意，因为API URL需要从主机角度来看，它不能在我的docker-compose设置中使用另一个容器主机名。

所以我想：许多人使用NGINX作为代理服务器，为什么不以这种方式将/api代理到我的其他容器。

Dockerfile：

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"]

frontend.conf.template：

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;
    }
}

run.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。

Angular2应用程序的配置 - nginx和docker

1 个答案:

解决方案1（＆＃34;客户＆＃34; -side）：env.js asset + sed

解决方案2（纯服务器端）：nginx proxy config + envsubst