为什么我的dockerize angular项目没有打开angular index.html而不是nginx default?

kadbb459  于 11个月前  发布在  Docker
关注(0)|答案(1)|浏览(96)

我dockerize一个angular项目名称demo-docker,并尝试使用我构建的docker镜像运行它。但是每当我在容器中运行docker镜像时,它都会将我带到nginx欢迎页面而不是angular应用页面。下面是我的docker构建命令

# Stage 1: Build Angular App
FROM node:20.10.0-alpine3.18 as builder

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build --prod

# Stage 2: Serve Angular App with NGINX
FROM nginx:latest

# Remove default NGINX configuration
RUN rm -v /etc/nginx/nginx.conf /etc/nginx/conf.d/default.conf

# Copy custom NGINX configuration
COPY nginx/nginx.conf /etc/nginx/nginx.conf

# Copy Angular app files from the builder stage
COPY --from=builder /usr/src/app/dist/demo-docker/ /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start NGINX
CMD ["nginx", "-g", "daemon off;"]

字符串
下面是nginx.conf文件

events {}

http {
    server {
        listen 80;
        server_name localhost;  # Update with your domain or IP address

        root /path/to/your/angular/app;  # Update with the actual path to your Angular app

        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }

        error_page 404 /index.html;

        location = /favicon.ico {
            log_not_found off;
            access_log off;
        }

        location = /robots.txt {
            allow all;
            log_not_found off;
            access_log off;
        }

        location ~ /\. {
            deny all;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            expires max;
            log_not_found off;
        }

        access_log off;
        error_log  /var/log/nginx/your-angular-app-error.log error;

        # Additional configurations can be added based on your specific requirements
    }
}


我得到的页面在下面:x1c 0d1x
运行Docker容器后我想要的页面应该像下面的

6yt4nkrj

6yt4nkrj1#

将静态应用程序内容复制到默认nginx目录,但在nginx.conf中设置了不同的根目录。
在Dockerfile中

COPY --from=builder /usr/src/app/dist/demo-docker/ /usr/share/nginx/html

字符串
但在nginx.conf中,

root /path/to/your/angular/app;  # Update with the actual path to your Angular app

相关问题