angular - Angular2在Docker容器中部署会干扰路由

Question

我想在Docker容器中部署我的Angular2 / ts应用程序。我发现以下教程非常有效:
Link。所以我的docker-compose.yml现在是:

version: '2'

services:
  httpd:
    image: httpd:latest
    volumes:
      - ./:/usr/local/apache2/htdocs/
      - ./node_modules:/usr/local/apache2/htdocs/node_modules
    ports:
      - "80:80"
  npm:
    image: treyjones/npm:latest
    volumes:
      - ./:/npm
  tsc:
    image: treyjones/tsc:latest
    volumes:
      - ./:/tsc

但我遇到的问题是路由无法正常工作。

我可以通过以下方式访问我的应用

http://localhost:80/

它将我重定向到

http://localhost:80/data

因此，到目前为止，一切都很好。但是我刷新页面，或尝试通过

http://localhost:80/data

我收到一个错误:

"GET /data HTTP/1.1" 404 205

在使用docker容器并使用live-server解决它之前，我已经遇到了这个问题，如
Link。这意味着我添加了脚本:

"serve": "concurrently \"live-server --port=5556 --entry-file=index.html \" \"gulp\" \"npm run tsc:w\" "

在我的package.json中。

但是我不知道如何将实时服务器集成到我的docker-configuration中，或者如何操纵httpd以便像这样的选项

--entry-file=index.html

实时服务器。

Answer 1

您必须按照此处https://httpd.apache.org/docs/2.4/rewrite/remapping.html所述配置httpd。这意味着基于httpd:latest创建自己的docker镜像，该镜像添加了路由的重新映射。

停止使用httpd并使用lite-server以所需的方式提供所需的文件。同样，创建您自己的docker镜像来执行此操作。