Dockerize Angular与布线和nginx

我正在尝试对接一个简单的Angular 9应用程序，该应用程序具有路由

我有以下资料：

Dockerfile

FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY /dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

我运行：

docker build --pull --rm -f "Dockerfile" -t ng-nexct-approval-ui-image:latest "."
docker run --rm -d  -p 4200:80/tcp --name ng-nexct-approval-ui-container ng-nexct-approval-ui-image:latest

当我访问：

http://localhost:4200/

http://localhost:4200/nexct-approval-ui/index.html

我得到了预期的nginx页面

如果我访问：

http://localhost:4200/

http://localhost:4200/nexct-approval-ui/index.html

我可以访问/dist目录中的index.html文件

问题

如何访问角度组件

e、 g.关于：

http://localhost:4200/login

及

我得到了一个

404

问题

如何配置docker以便访问以下角度路由：

const routes: Routes = [
    { path:'login', component:LoginComponent, canActivate: [AuthGuard] },
    { path: 'approval-list', component: ApprovalListComponent, canActivate: [ApprovalListGuard] },
    { path: 'approval-edit/:tripId', component: ApprovalEditComponent, canActivate: [ApprovalEditGuard] }
];

更新

我将以下内容添加到Dockerfile：

COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

server {
    listen   80;

    root /usr/share/nginx/html;
    index index.html;

    server_name _;

    location / {
        try_files  $uri /index.html
    }

}

我可以访问：

http://localhost:4200/nexct-approval-ui/index.html

（但这只是在

ng build

上的

/dist

文件夹中生成的一个空白html文件

如果我尝试访问任何路由，我现在会得到一个

500

2020/07/21 15:40:35 [error] 29#29: *24 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 172.17.0.1, server: _, request: "GET /nexct-approval-ui/login HTTP/1.1", host: "localhost:4200"

172.17.0.1 - - [21/Jul/2020:15:40:35 +0000] "GET /nexct-approval-ui/login HTTP/1.1" 500 579 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36" "-"

---

当然，在nginx服务器上运行Angular应用程序是很常见的。我在任何地方都很难找到一个明确的答案。

这将使它返回接收到的任何URL的index.html，因此所有Angular router URI都应该工作，即使是直接转到URL，而不是从应用程序的内部部分重定向

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

此外，请确保您没有对base_href做任何疯狂的事情

我上次这么做是在Angular4，所以我可能已经过时了：）
希望这对你有用

---

编辑以回答评论中的问题：

---

上面的nginx.conf将在

/usr/share/nginx/html

下找到

index.html

文件。根据ng构建的执行方式，您需要将包含索引文件的文件夹的内容复制到根位置。有时，这是在dist.下的嵌套文件夹中创建的。

这将使其返回接收到的任何URL的index.html，因此，即使直接转到URL，而不是从应用程序的内部部分重定向，所有角度路由器URI也应能工作

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

此外，请确保您没有对base_href做任何疯狂的事情

我上次这么做是在Angular4，所以我可能已经过时了：）
希望这对你有用

---

编辑以回答评论中的问题：

---

上面的nginx.conf将在

/usr/share/nginx/html

下找到

index.html

文件。根据ng构建的执行方式，您需要将包含索引文件的文件夹的内容复制到根位置。有时这是在dist下的嵌套文件夹中创建的。

复制/dist文件夹时，问题出现在我的Dockerfile中。所以我从：

COPY /dist /usr/share/nginx/html

到

---

现在它工作了

当我复制/dist文件夹时，问题出在我的Dockerfile中。所以我从：

COPY /dist /usr/share/nginx/html

到

---

现在它可以工作了

我不确定我是否理解您使用

server\u name\u我不确定我是否理解您使用
服务器\u名称\uu你好，尼奥，谢谢你的回答。当我尝试访问
http://localhost:4200/login
，我得到
“get/login HTTP/1.1”404
和
“/usr/share/nginx/html/login”失败（2：没有这样的文件或目录）
。如果我将其更改为：
请尝试_files$uri$uri//index.html，我得到以下信息：
[错误]29#29:*2在内部重定向到“/index.html”时重写或内部重定向周期，客户端：172.17.0.1，服务器：，请求：“获取/登录HTTP/1.1”，主机：“localhost:4200”172.17.0.1---[22/Jul/2020:06:48:48+0000]“获取/登录HTTP/1.1”500 579“-Mozilla/5.0（麦金塔；英特尔Mac OS X 1015_5）AppleWebKit/537.36（KHTML，像Gecko）Chrome/83.0.4103.116 Safari/537.36”“-”
。如果在根目录下没有索引，就会发生这种情况
/usr/share/nginx/html
。在这种情况下，您可以连接到容器并查看是否所有东西都在那里：
docker exec-ti sh
，然后是ls/usr/share/nginx/htmltanks Neo，问题是当我将/dist文件夹复制到nginx时（请参见答案）。嗨，Neo，谢谢你的回答。当我尝试访问
http://localhost:4200/login
，我得到
“get/login HTTP/1.1”404
和
“/usr/share/nginx/html/login”失败（2：没有这样的文件或目录）
。如果我将其更改为：
请尝试_files$uri$uri//index.html，我得到以下信息：
[错误]29#29:*2在内部重定向到“/index.html”时重写或内部重定向周期，客户端：172.17.0.1，服务器：，请求：“获取/登录HTTP/1.1”，主机：“localhost:4200”172.17.0.1---[22/Jul/2020:06:48:48+0000]“获取/登录HTTP/1.1”500 579“-Mozilla/5.0（麦金塔；英特尔Mac OS X 1015_5）AppleWebKit/537.36（KHTML，像Gecko）Chrome/83.0.4103.116 Safari/537.36”“-”
。如果在根目录下没有索引，就会发生这种情况
/usr/share/nginx/html
。在这种情况下，您可以连接到容器并查看是否所有东西都在那里：
docker exec-ti sh
，然后是ls/usr/share/nginx/htmlhanks Neo，问题是当我将/dist文件夹复制到nginx时（参见答案）。