【问题标题】:Angular Frontend Docker container doesn't send/receive data from node express backend Docker containerAngular Frontend Docker 容器不会从 node express 后端 Docker 容器发送/接收数据
【发布时间】:2020-05-01 14:50:25
【问题描述】:

所以我要去码头集装箱...

我有一个用 Angular 编写的前端应用程序。

带有proxy.conf.json 持有:

/api": {
    "target": "http://127.0.0.1:3000",
    "secure": false
}

我也加了environment.prod.ts:

export const environment = {
  production: true,
  api: 'http://127.0.0.1:3000',
};

我的后端终于用 Node.js (Express) 编写了。

在我的app.js:

...
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next()
});
...

当我构建我的应用程序并将前端添加到 Nginx 本地并正确设置配置文件时,PM2 运行后端我的应用程序运行顺利,没有任何问题。

因此,我按照指南和文档为我的前端创建了一个容器。

Dockerfile:

FROM nginx
COPY dist /usr/share/nginx/html

还有一个我的后端容器:

# Install the app dependencies in a full Node docker image
FROM node:10

WORKDIR "/app"
# Install OS updates 
RUN apt-get update \
 && apt-get dist-upgrade -y \
 && apt-get clean \
 && echo 'Finished installing dependencies'
# Copy package.json and package-lock.json
COPY package*.json ./
# Install app dependencies
RUN npm install --production
# Copy the dependencies into a Slim Node docker image
FROM node:10-slim

WORKDIR "/app"
# Install OS updates 
RUN apt-get update \
 && apt-get dist-upgrade -y \
 && apt-get clean \
 && echo 'Finished installing dependencies'
# Install app dependencies
COPY --from=0 /app/node_modules /app/node_modules
COPY . /app
ENV NODE_ENV production
ENV PORT 3000
USER node
EXPOSE 3000
CMD ["npm", "start"]

所以您可能已经猜到,当我在笔记本电脑上运行这两个容器时(在我完成 docker 构建之后)我可以访问它们中的每一个,但是当我尝试登录时出现 POST ... 404 错误(不是找到)。

如果我在本地运行前端并从容器中运行后端,它就像一个魅力......

我用谷歌搜索了很多,但似乎找不到答案。

感谢您的时间和帮助, 干杯。

编辑

按照我的 Docker 运行命令的要求:

docker run -d -p 3000:3000 myUserName/cis-backend
docker run -d -p 4200:80 myUserName/cis-frontend

【问题讨论】:

  • 能否添加docker run命令。看起来你可能没有链接容器或没有正确暴露端口
  • @AvinashReddy,感谢您的快速重播。我刚刚根据您的要求进行了编辑。

标签: node.js angular docker nginx dockerfile


【解决方案1】:

经过几个小时的挫折后,我终于弄明白了。 是的,我的一个问题是我从来没有链接我的容器,我使用一个简单的 docker composer 文件。 但主要问题是,在我在线阅读的所有指南中,都没有说我应该更新容器的 nginx 映像中的 default.conf。

所以对于像我这样挣扎的下一个人来说,这是一个简单的一步一步: 在您的 docker.compose 名称中,您的后端有一个特定的名称。就我而言,我将其命名为后端。我建议为前端创建一个简单的 docker 容器,这样您就可以在其中执行 (docker exec -it containerId bash) 以获取必要的信息,否则谷歌可能会使用 default.conf nginx docker 映像附带... 如果您创建了一个快速前端容器只是为了获取文件位于:

/etc/nginx/conf.d/default.conf

安装 vim 或任何你想要的.. 我使用的简单代码:

apt-get update
apt-get install vim

导航并打开 default.conf 文件并将其复制粘贴到某处。 在您为前端创建 dockerfile 的同一文件夹中创建一个 Nginx-custom.conf 文件。 复制您在 default.conf 中找到的完全相同的信息 并在位置 {..}

下添加以下内容
...
location /api/ {
             proxy_pass http://nameOfTheBackendContainer:portTheBackendIsRunninG;
#   Example: proxy_pass http://backend:3000
             proxy_http_version 1.1;
        }
...

在 docker 文件中添加以下复制命令:

COPY nginx-custom.conf /etc/nginx/conf.d/default.conf

现在在您的前端代码中(请注意它的角度), 如果您为您的 api 使用 proxy.conf.json 文件,您将需要更改 api url。 在我的情况下,它是从:

"target": "http://localhost:3000",

"target": "http://backend:3000",

我希望这可以帮助那些刚接触这方面并像我一样苦苦挣扎的人。

请注意,我绝不是这方面的专业人士...我实际上只是在学习所有这些并努力精通它,这可能是一个非常错误的答案,但它对我有用,也许这也将是其他人的起点。

如果有人需要更多帮助或更好的解释,请随时给我发消息。

【讨论】:

    【解决方案2】:

    前端容器中的 127.0.0.1 指的是它自己。这解释了为什么它没有连接

    尝试使用以下步骤启动

    这将启动后端容器并将名称设置为 cis-backend

    docker run -d -p 3000:3000 --name cis-backend myUserName/cis-backend
    

    启动 cis-frontend 容器并将其链接到后端容器

    docker run -d -p 4200:80 --link cis-backend:cis-backend myUserName/cis-frontend
    
    Syntax for link:
    --link <container-name>:<alias>
    
    This will add alias in the /etc/hosts file in the container
    

    在 API 配置中,不要使用 127.0.0.1,而是使用为第一个(目标)容器配置的名称 alias(顺式后端)。

    使用links 是一项旧功能,建议在多容器应用程序中使用Docker compose

    【讨论】:

    • 谢谢,我会试试这个,一有结果就更新。
    • 我试过了,不幸的是它没有帮助。我修复了 environment.prod.ts 和 proxy.conf.json 两者都有:“cis-backend:3000”我还尝试了“alias:3000”构建我的列表文件。构建 docker 容器。并使用您提供的命令与 docker 容器一起运行。同样的 404 错误。我会花时间阅读您今晚提供的两个链接。
    • 看看docker-compose
    • 你能执行到 cis-front 端容器并检查 /etc/hosts 文件吗?也尝试对 cis-backend 进行 nslookup
    • @AvinashReddy,这是我的主机:127.0.0.1 localhost ::1 localhost i[6-localhost ip6-loopback fe00::0 ip6-localnet ff00::0 ip6-mcastprefix ff02::1 ip6-allnodes ff02::2 ip6-allrouters 172.17.0.2 cis-backend d95c9438d78a 172.17.0.3 196fadb8e93b
    猜你喜欢
    • 2020-12-11
    • 2016-12-25
    • 1970-01-01
    • 2022-06-29
    • 2018-11-03
    • 2018-12-16
    • 2023-02-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多