Question

我正在尝试创建一个用于Angular开发的docker容器。

使用与以下文件几乎相同的dockerfile，我能够为React创建一个开发容器。

FROM node:8.9.0

ENV NPM_CONFIG_LOGLEVEL warn
ARG app_env
ENV APP_ENV $app_env

RUN mkdir -p /app1
WORKDIR /app1
COPY ./app1 ./

COPY app1/package.json /app1

RUN npm install
RUN npm update
RUN npm install -g typescript

EXPOSE 4200

RUN chmod a+x /app1/node_modules/.bin/*

ENTRYPOINT ["tail", "-f", "/dev/null"]
#ENTRYPOINT npm start

要运行我使用的容器，

docker run -i -t -p 4200:4200 -v /var/react/{your app name}/{Your apps sub folder}/src:/{ Your apps sub folder } /src {container ID}

然后我进入容器并运行npm start或npm start 0.0.0.0:4200。一切都成功编译，并说它应该在localhost:4200上运行，但出现连接拒绝错误。

我将重申，使用相同的dockerfile，我可以通过react做到这一点。文件之间的唯一区别是端口号和装入的卷。

因此，这使我认为这与Angular配置有关，但我不知道从哪里开始寻找。有什么想法吗？

谢谢！

Answer 1

嗨，您可以通过简单的步骤在您的Angle Project中构建和运行Docker文件

1）创建一个.dockerignore文件并添加node_modules .git进入

2）使用

添加Dockerfile

FROM node:8.6 as node
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
ARG env=prod
RUN npm run build -- --prod --environment $env

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.13
COPY --from=node /app/dist/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

3）使用生产配置（默认设置）构建映像，例如：

docker build -t my-angular-project:prod .

注意行尾的点

4）使用开发环境（无配置）构建映像，例如：

docker build -t my-angular-project:dev --build-arg configuration="" .

5）使用以下方法测试生产环境（生产配置）中的映像：

docker run -p 80:80 my-angular-project:prod

6）在http://localhost中打开浏览器。

7）使用以下方法在开发环境中测试映像（无配置）：

docker run -p 80:80 my-angular-project:dev

希望这些步骤可帮助您运行docker文件

Answer 2

我怀疑这是一个Angular配置问题。我所需要做的就是更改我的package.json文件。

发件人：

"scripts": { "ng": "ng", "start": "ng serve"

收件人：

"scripts": { "ng": "ng", "start": "ng serve --host 0.0.0.0 --disable-host-check"

我的Dockerfile保持不变。

Angular开发Docker容器

2 个答案: