Angular NGINX上的角度2_Angular_Nginx_Vmware Clarity

Angular NGINX上的角度2

angular nginx

Angular NGINX上的角度2,angular,nginx,vmware-clarity,Angular,Nginx,Vmware Clarity,我正在尝试在NGINX服务器上托管Angular 2种子我能够克隆种子，npm安装it和npm启动it，它在嵌入式web服务器上运行良好然后，我尝试移动种子的相同src目录的内容（其中index.html文件和所有其他角度组件位于我的nginx服务器的默认根目录下（/usr/share/nginx/html） My Angular index.html如下所示： <!doctype html> <html> <head> <meta char

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

我能够克隆种子，

npm安装

it和

npm启动

it，它在嵌入式web服务器上运行良好

然后，我尝试移动种子的相同

src

目录的内容（其中

index.html

文件和所有其他角度组件位于我的nginx服务器的默认根目录下（

/usr/share/nginx/html

）

My 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>

在

app

目录中有我的实际角度应用程序

当我尝试连接到nginx服务器时，

index.html

文件被正确加载，但随后，它没有加载angular应用程序，而是（永远）停留在

加载…

代码的“加载”消息处

我没有更改默认的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应用程序所需的一些运行时组件造成的，或者是由于一些编译问题造成的（但是，如果我使用相同的目录，并且I

npm start

it，则应用程序呈现得很好）

谢谢

更新：我之前没有提到这一点，因为我认为这会使内容更加混乱，但当我说我将文件从

src

移动到

/usr/share/nginx/html

时，我真正做的是将nginx作为一个容器启动，并将我的

src

目录映射到容器内的

/usr/share/nginx/html

。因此，当我在本地主机上工作时，我在

src

目录下安装

npm

和

npm start

，它工作正常。然后我开始将容器映射到完全相同的目录下（在

/usr/share/nginx/html

下）我看到了如上所述的问题。我想假设，当您第一次实际编译应用程序并下载所有依赖项时进行

npm安装时，以及当您在nginx容器的上下文中使用相同的应用程序时（在src
），应用程序已经准备好运行了吗
更新#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：现在有点接近了……但还不是很接近。如果你试图进入上面的容器，你可以做一个curl localhost:80
，你会得到nginx提供的静态html页面（它在容器的端口80上运行）。有趣的是，注意到这部分响应：
<body>
<my-app>Loading...</my-app>
</body>

不幸的是，我没有一个真正的浏览器来测试它，但我敢打赌这是可行的（因为我看到Javascript代码被返回）
问题似乎是由于以下事实造成的：出于某些原因，nginx服务器没有在响应中提供Javascript应用程序内容
Mh…
我最终找到了我做错的地方。我对Angular不太熟悉，也不确定构建的工件是在哪里构建的。我一直将我的NGINX实例指向src
目录，我不知道生产工件是在dist
目录中创建的
当我将nginxweb服务器根指向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 

我最终发现我做错了什么。我对Angular不太熟悉，也不确定构建的工件是在哪里构建的。我一直将我的NGINX实例指向src
目录，但我不知道生产工件是在dist
目录中创建的
当我将nginxweb服务器根指向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 

作为将来的参考，我想添加我的生产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

作为将来的参考，我想添加我的生产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

检查开发人员控制台是否有错误。这将是一个很好的开始。然后，应该使用ng build
发布angular项目。他说，他试图“移动”src
目录。我猜他实际上是在移动源TypeScript
文件！正如你所看到的那样，main.ts
仍在运行。@PierreDuc开发人员控制台对呈现“加载”很满意页面。它什么也没说。根据ng build…在线程中查看我的更新。我如何使用ng build在nginx上发布？我知道src目录已经编译，因为我已经安装/启动了npm？@borislemke原来您对您的评论有所了解。请参阅我自己的答案。谢谢。che