无法访问Docker容器中的angular应用

时间:2018-12-30 12:29:20

标签: angular docker

我的目标是为我简单的有角度的网站提供泊坞窗并在本地进行测试。下面是Dockerfile。

# STEP 1 build static website
FROM node:alpine as builder
RUN apk update && apk add --no-cache make git

# Create app directory
WORKDIR /app

# Install app dependencies
COPY package.json package-lock.json  /app/
RUN cd /app && npm set progress=false && npm install

# Copy project files into the docker image
COPY .  /app
RUN cd /app && npm run build

# STEP 2 build a small nginx image with static website
FROM nginx:alpine

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' copy website to default nginx public folder
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

我正在此Dockerfile之上执行以下命令。

docker build .
docker tag a585f0653f3b abameerdeen/website:latest
docker run -p 80:8000 abameerdeen/website:latest

docker ps

给出以下结果。

enter image description here

仍然,我;无法访问http://localhost:8000上的网站。

我尝试了以下解决方案,但结果不会改变。我在也在本地安装了nginx的ubuntu机器上。

Dockerfile和dockerfile中的EXPOSE 80运行-p 80:8000 abameerdeen / website:latest

Dockerfile和docker中的EXPOSE 80运行abameerdeen / website:latest

这是本地计算机中端口的状态。 enter image description here

编辑:更新的端口号。

2 个答案:

答案 0 :(得分:1)

我一直在更改Dockerfile和不同的基本映像,以下工作终于完成了。我删除了整个nginx,并在节点上完成了此操作。但这不是理想的解决方案,因为我想要一个轻巧的图像。如果有人可以提出理想的解决方案,那就接受它作为答案。

# base image
FROM node:9.6.1

# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install -g @angular/cli@1.7.1

# add app
COPY . /usr/src/app

#expose the port
EXPOSE 5000

# start app
CMD ng serve --port 5000 --host 0.0.0.0

然后

docker build . -t my_image_tag
docker run -p 5000:5000 my_image_tag

实际上,@ Saddam Pojeee的评论促使我猛扑到容器中,查看文件是否确实存在。文件不存在,所以我更改了图像。

答案 1 :(得分:0)

nginx图像默认情况下公开端口80,因此EXPOSE 8000不是必需的...但是您将需要将本地端口8000映射到容器的端口80。

因此运行该命令的正确命令是:docker run -p 8000:80 abameerdeen/website:latest,这会将容器的端口80映射到您的本地端口8000。

现在,您应该可以访问http://localhost:8000 ...如果将文件复制到容器内的正确位置,您将看到该网页。如果没有,您应该从nginx收到一个http 404。