Question

我想将我的angular6项目部署到docker，但是我遇到了问题。我创建了Dockerfile：

# stage 1
    FROM node:latest as node
    WORKDIR /app
    COPY . .
    RUN npm install
    RUN npm run build --prod
    RUN npm install -g @angular/cli

    # stage 2
    FROM nginx:alpine
    COPY --from=node /app/dist/ClientAp /usr/share/nginx/html

当我这样做的时候，我写道：

docker build -t cltapp .

然后运行：

docker run --rm -d -p 4200:4200 cltapp

我没有错误，但是当我尝试打开应用程序localhost:4200/时，我有空白页。我以为这是角度cli的问题，但是我在RUN npm install -g @angular/cli中添加了这行到我的dockerfile中，但对我没有帮助。如果可以的话请帮助我。谢谢您的回答。

Answer 1

通常，在运行ng build --prod之后，index.html将直接放在dist下（dist/index.html）的下面。我认为这是您的情况，而不是dist/ClientAp/index.html。您可以通过在项目中运行ng build --prod并检查创建的dist文件夹来进行检查。

--prod标志应放在package.json => scripts部分中：

"scripts": {
  ...
  "build": "ng build --prod",
  ...
}

如果它不存在，并且您想在npm run build之后添加它，则应在--之后添加它，例如：

npm run build -- --prod

因此，请尝试以下操作：

Dockerfile

# stage 1
FROM node:alpine as node

# Create app directory
WORKDIR /usr/src/app

# Bundle app source (make sure you have package.json copied)
COPY . .

# install dependencies, @angular cli will be installed here as well
RUN npm install

# build your project into dist folder
RUN npm run build

# stage 2
FROM nginx:alpine

WORKDIR /usr/share/nginx/html
COPY --from=node /usr/src/app/dist/ .

Nginx将在端口80上运行。如果要使用端口4200，请运行以下命令：

docker run --rm -d -p 4200:80 cltapp

现在，您应该在localhost：4200看到了角度应用程序

我的代码处于空运行模式（我没有对其进行测试），因此请对其进行测试并根据需要进行修改。

来源：

将Angular6项目部署到Docker

1 个答案: