Question

我正在尝试使Angular应用程序得到docker化，但是由于某种原因，它无法正确映射。

FROM node:alpine as builder
RUN apk update && apk add --no-cache make git
# Create app directory
RUN mkdir /app
# Project and dependencies are here ( package.json, etc. )
COPY .  /app

WORKDIR /app
RUN npm install && npm audit fix #--force #will

# The default port from ng serve (4200)
# and 49153 for Webpack Hot Module Reload
EXPOSE 4200 49153

RUN $(npm bin)/ng serve

与我的docker-compose.yml

版本：“ 3.5”

服务：

  my-angular-app:
    container_name: my-angular-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
    ports:
      - "80:4200"
      - "49153:49153"
    expose:
      - "4200"
      - "49153"

事情是我的奔跑

输出：

...
Step 11/11 : RUN $(npm bin)/ng serve
 ---> Running in 8a50b007a0ea
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-03-07T18:45:25.430Z
Hash: 2c3511aa07ccc9ecc246
Time: 6584ms
chunk {main} main.js, main.js.map (main) 112 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 241 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 18.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.53 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

但是当我尝试localhost时无法导航，当我在容器内更改文件时，修改不会出现在项目中。而且，如果我更改了项目中的文件，则更改不会显示在容器中。

可能是一个愚蠢的错误，但我花了5个小时却一无所有:(

Answer 1

在构建映像时，不应启动Angular服务器。

构建期间无法连接到Angular实时服务器的原因是，在容器没有可访问或映射回主机的任何端口的上下文中执行构建命令。基本上，您不应该与构建映像的docker进程进行交互。您应该让它构建图像，然后将其作为容器启动，以便与其进行交互。

如果您想在高山docker容器中运行有角度的实时开发服务器-您需要做些事。

您需要使用一个脚本来更新package.json，该脚本将启动实时开发服务器，而不将其绑定到docker容器中的`localhost'。
您需要确保在启动容器时重新构建node-sass模块-因为为主机构建的本机绑定不是在高山上可用的。（除非您的主机操作系统也是Alpine）。
您需要更新Dockerfile，安装python2和g++，在重建node-sass模块时需要这些。

更新到package.json：

创建一个新的脚本元素start:docker，该脚本元素将安装依赖项，重建node-sass模块并启动实时开发服务器，而不将其绑定到localhost回送设备。

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:docker": "npm install && npm rebuild node-sass --force && ng serve --host 0.0.0.0",
    ...

更新Dockerfile：

接下来，对Dockerfile进行更新。我要从您的原始文件中删除。我删除了将应用程序复制到映像中的位置，然后运行npm install。相反，我正在安装python和g++，以准备容器何时在启动时重建node-sass模块。

对于“实时开发服务器映像”，在构建项目时不需要将项目复制到映像中。相反，我们需要在启动它时将其绑定为容器中的卷。就像您在docker-compose定义中所做的一样。然后在启动时安装依赖项。

而且，我为图像设置了ENTRYPOINT，它将运行刚刚创建的package.json脚本部分中的命令。

FROM node:alpine as builder

# Install dependencies
RUN apk add --no-cache make git
# Dependencies needed for 'npm rebuild node-sass --force'
RUN apk add --no-cache python g++

# Create app directory and set as working directory
RUN mkdir /app
WORKDIR /app

# The default port from ng serve (4200)
# and 49153 for Webpack Hot Module Reload
EXPOSE 4200 49153

ENTRYPOINT ["npm", "run", "start:docker"]

无需更新docker-compose.yml文件即可完成此工作。不过，我要提到的是，您不需要使用expose：`来做任何事情。您已经在Dockerfile中公开了这些端口。

docker-compose.yml：

version: "3.5"

services:
  my-angular-app:
    container_name: my-angular-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    ports:
      - "80:4200"
      - "49153:49153"

构建并运行：

使用以下命令构建图像：

docker-compose build

然后运行：

docker-compose up

实时开发服务器准备就绪会花费一些时间，因为它需要安装依赖项并重建node-sass模块（这需要一段时间）

完成后，在浏览器中访问http://localhost，以从主机查看它。（您已将其映射到主机端口80，因此URL中不需要端口）

node_module不与主机同步

1 个答案: