NGINX上的Angular 2
[英]Angular 2 on NGINX
问题描述
我试图在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文件被正确加载但是，然后，它只是（永远）停留在“加载”消息的<my-app>Loading...</my-app>代码。
我没有更改默认的nginx配置（假设我将我的角度应用程序直接放入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配置丢失造成的，这是否是由于运行角度应用程序所需的某些运行时组件或者是否是由于某些编译问题导致的问题（但是如果我采取了同一个目录，我npm start它应用程序渲染就好了）。
谢谢。
更新：之前我没有提到这个，因为我认为它会让事情更加混乱但是当我说我将文件从src移动到/usr/share/nginx/html我真正做的就是将nginx作为容器启动将我的src目录映射到容器内的/usr/share/nginx/html 。 因此，当我在我的本地主机上工作时，我在npm install和npm start在src目录中运行正常。 然后我开始容器映射到完全相同的目录（在/usr/share/nginx/html ），我看到如上所述的问题。 我想假设当你第一次编译应用程序并下载所有依赖项时执行npm install ，然后当你在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）...您将看到我所指的Loading页面，而Angular应用程序将永远不会启动。
当然，Dockerfile中的某个地方（或NGINX配置？）有错误。
更新＃3：现在越来越近了......但还没到那里。 如果你试图进入上面的容器，你可以做一个curl localhost:80 ，你得到你的静态html页面由nginx服务（它在容器的端口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应用程序内容。
MH ...
2 个解决方案
解决方案1
0 2017-05-27 06:05:40
我最终想到了我做错了什么。 我对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
解决方案2
0 2018-06-28 14:11:54
为了将来参考，我想添加我的生产nginx-angular构建器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 2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.