1

我正在尝试在 NGINX 服务器上托管 Angular 2 种子。

我能够克隆种子，npm install它和npm start它，它在嵌入式 Web 服务器上工作得很好。

然后我尝试移动src种子的同一目录的内容（包含index.html文件和其中的所有其他 Angular 组件）在我的 nginx 服务器的默认根目录下（/usr/share/nginx/html）。

我的 Angular index.html 看起来像这样：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clarity Seed App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

目录内部的结构src（复制到/usr/share/nginx/html）是这样的：

drwxr-xr-x 14 root root   476 May 26 11:47 .
drwxr-xr-x  3 root root  4096 Nov  8  2016 ..
drwxr-xr-x 11 root root   374 May 26 10:40 app
drwxr-xr-x  4 root root   136 May 26 10:40 environments
-rw-r--r--  1 root root 15086 May 26 10:40 favicon.ico
drwxr-xr-x  3 root root   102 May 26 10:40 images
-rw-r--r--  1 root root   310 May 26 10:40 index.html
-rw-r--r--  1 root root   351 May 26 10:40 main.ts
drwxr-xr-x  2 root root    68 May 26 11:47 node_modules
-rw-r--r--  1 root root   604 May 26 10:40 polyfills.ts
-rw-r--r--  1 root root    80 May 26 10:40 styles.css
-rw-r--r--  1 root root  1005 May 26 10:40 test.ts
-rw-r--r--  1 root root   702 May 26 10:40 tsconfig.json
-rw-r--r--  1 root root   147 May 26 10:40 typings.d.ts

在app目录里面有我实际的 Angular 应用程序。

当我尝试连接到 nginx 服务器时，index.html文件已正确加载，但随后，它没有加载 angular 应用程序，而是（永远）停留在每个<my-app>Loading...</my-app>代码的“加载”消息中。

我没有更改默认的 nginx 配置（假设我将我的 Angular 应用程序直接放入 Web 服务器的默认根目录中）。nginx服务器的配置文件如下。

主要的 nginx 配置文件：

cat /etc/nginx/nginx.conf 

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
   }

导入主配置的 Nginx 配置文件：

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

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

我无法弄清楚这个问题是否是由于缺少一些 nginx 配置，这是否是由于运行 angular 应用程序所需的一些运行时组件，或者这个问题是否是由于一些编译问题（但如果我再次使用相同的目录，我npm start的应用程序渲染得很好）。

谢谢。

更新：我之前没有提到这一点，因为我认为这会使事情更加混乱，但是当我说我将文件从移动src到/usr/share/nginx/html我真正做的是将 nginx 作为容器启动并将我的src目录映射到/usr/share/nginx/html容器内部时。因此，当我在本地主机上工作时，我npm install在npm start目录中src工作正常。然后我启动容器映射到完全相同的目录（在 下/usr/share/nginx/html），我看到了如上所述的问题。我想假设当您npm install第一次实际编译应用程序并下载所有依赖项时，然后src在 nginx 容器的上下文中使用相同的应用程序（in ）时，该应用程序准备好运行了吗？

更新＃2：我认为这对我来说有点蓬松，所以我决定编纂我正在尝试做的事情。我认为围绕一段实际代码进行讨论比假设要好。您可以使用此 Dockerfile 重新创建我的问题：

FROM nginx:1.11.5

RUN apt-get update
RUN apt-get -y install git

RUN git clone https://github.com/vmware/clarity-seed.git

RUN apt-get -y install build-essential
RUN apt-get -y install curl
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash -
RUN apt-get -y install nodejs
RUN npm install -g @angular/cli

RUN sed -i -- 's#/usr/share/nginx/html#/clarity-seed/src#g' /etc/nginx/conf.d/default.conf

WORKDIR /clarity-seed/src

RUN npm install  

RUN ng build --prod

您可以按如下方式构建和运行它：

docker build -t mreferre/nginxangular .

docker run -d -p 8080:80 mreferre/nginxangular

如果您将浏览器指向容器正在运行的 docker 主机（端口 8080）……您将看到我所指的加载页面，并且 Angular 应用程序将永远不会启动。

可以肯定的是，某处的 Dockerfile 中有错误（或 NGINX 配置？）。

更新＃3：现在有点接近了..但还没有。如果您尝试进入上面的容器，您可以执行 acurl localhost:80并获得由 nginx 提供的静态 html 页面（在容器的端口 80 上运行）。有趣的是要注意这部分回复：

<body>
<my-app>Loading...</my-app>
</body>

如果我然后尝试启动 ng Web 服务器 ( ng serve)，它会出现并开始侦听端口 4200。现在您可以执行此操作curl localhost:4200。响应几乎相同，除了...

<body>
<my-app>Loading...</my-app>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

不幸的是，我没有真正的浏览器来测试它，但我敢打赌这是可行的（因为我看到返回的 Javascript 代码）。

问题似乎是由于某些原因，nginx 服务器未在响应中提供 Javascript 应用程序内容。

嗯...

4

2 回答 2

0

为了将来参考，我想添加我的生产 nginx-angular builder Dockerfile 以响应您的文件。由于 docker 添加了一个称为多阶段构建的功能，因此可以非常轻松地创建非常小的图像，而无需使用容器构建器管道。

FROM node:alpine as builder
COPY frontend /app

# build the app
RUN npm install
RUN npm run build


# now the fun part
FROM nginx:stable-alpine

# copy nginx configs
COPY nginx.conf /etc/nginx/nginx.conf
COPY dhparams.pem /etc/nginx/dhparams.pem
COPY example.com.crt /etc/nginx/example.com.crt
COPY example.com.key /etc/nginx/example.com.key

# copy the prebuild frontend from the previous build stage
COPY --from=builder /app/dist /app/dist

# expose both http and https port that nginx listens on
EXPOSE 80
EXPOSE 443

# because the nginx:stable-alpine image already has an CMD, nginx automatically starts up
于 2018-06-28T14:11:54.967 回答
0

我最终发现我做错了什么。我对 Angular 不是很熟悉，我不确定构建的工件是在哪里构建的。我一直将我的 NGINX 实例指向该目录，但我错过了在该目录src中创建的生产工件。dist

一旦我将 nginx Web 服务器根目录指向dist应用程序开始工作的目录。

这是一个示例（绝对未优化）工作 Dockerfile 供参考：

FROM nginx:1.11.5

RUN apt-get update
RUN apt-get -y install git

RUN git clone https://github.com/vmware/clarity-seed.git

RUN apt-get -y install build-essential
RUN apt-get -y install curl
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash -
RUN apt-get -y install nodejs
RUN npm install -g @angular/cli

RUN sed -i -- 's#/usr/share/nginx/html#/clarity-seed/dist#g' /etc/nginx/conf.d/default.conf

WORKDIR /clarity-seed/src

RUN npm install  

RUN ng build --prod
于 2017-05-27T06:05:40.613 回答