角 Nginx 码头工人 404

Posted 2023-03-15

【中文标题】角 Nginx 码头工人 404

【英文标题】：Angular Nginx Docker 404

【发布时间】：2019-10-12 13:23:31

【问题描述】：

一直在让自己发疯，试图弄清楚这一点。

我有一个非常简单的带有路由的 Angular 项目，下面是 app.module.ts、nginx.conf 和 docker 文件。

我通过容器启动

docker run --rm -d -p 80:80/tcp demo:latest

浏览到http://localhost，网站可以渲染所有路由

如果我在 http://localhost/contact 并刷新页面或直接输入 Url，我会从 Nginx 得到 404。

nginx.conf 中有 try_files $uri /index.html;这是所有有类似问题的帖子都说需要设置的。

知道我做错了什么。

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import  HomeComponent  from './home/home.component';
import  ContactComponent  from './contact/contact.component';
import  AboutComponent  from './about/about.component';

const routes: Routes = [
   path: '', component: HomeComponent ,
   path: 'contact', component: ContactComponent ,
   path: 'about', component: AboutComponent 
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule 

nginx.conf

server 
    listen   80;

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

    server_name _;

    location / 
        try_files $uri /index.html;
    

码头文件

FROM nginx

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

RUN rm -rf /usr/share/nginx/html/*

COPY ./dist /usr/share/nginx/html

【参考方案1】：

愚蠢的我，我没有覆盖 docker 文件中的默认 docker conf

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

【讨论】：

谢谢，这对我帮助很大！

谢谢迈克！感谢您的帖子，我注意到 nginx 中有另一个配置文件！我修改了一个，路由对我来说工作正常

非常感谢！这是我第一次使用 docker 创建镜像并运行它，这对我来说真的很有效

【参考方案2】：

在AppRoutingModule 中使用 "useHash" : true 。

imports: [RouterModule.forRoot(routes , useHash : true  )]

当你输入34.**.**.**:8080/anyroute 时，Nginx 将搜索他的服务器中可用的路由，而不是 Angular 应用程序。这就是发生 404 错误的原因。使用 useHash true ，它会自动使用哈希格式化您的网址。

34.**.**.**:8080/#/anyroute

# 之后 Nginx 将无法读取 它将重定向到您的应用