NGINX上的Angular 2

Question

我試圖在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 ...

Answer 1

我最終想到了我做錯了什么。 我對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

Answer 2

為了將來參考，我想添加我的生產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

問題描述

2 個解決方案

解決方案1
0 2017-05-27 06:05:40

解決方案2
0 2018-06-28 14:11:54

NGINX上的Angular 2

問題描述

2 個解決方案

解決方案1 0 2017-05-27 06:05:40

解決方案2 0 2018-06-28 14:11:54

解決方案1
0 2017-05-27 06:05:40

解決方案2
0 2018-06-28 14:11:54