在Docker中使用Angular和Nginx时,可以通过共享卷来解决文件传递的问题。下面是一个解决方法的示例代码:
创建一个名为docker-compose.yaml
的文件,并将以下内容复制到文件中:
version: '3'
services:
angular:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./src:/usr/share/nginx/html
nginx:
image: nginx:latest
ports:
- 8080:80
volumes:
- ./nginx.conf:/etc/nginx/conf.d/default.conf
创建一个名为Dockerfile
的文件,并将以下内容复制到文件中:
FROM node:latest AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist/angular-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
创建一个名为nginx.conf
的文件,并将以下内容复制到文件中:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
在项目根目录中运行以下命令来构建和启动容器:
docker-compose up --build
这将构建Angular项目并运行Nginx服务器。Angular项目中的文件将通过共享卷传递到Nginx容器中,并且Nginx配置文件将被替换为nginx.conf
文件。
现在,您可以通过访问http://localhost:8080
来查看运行中的Angular应用程序。