堆栈内存溢出
  繁体   English   中英

如何配置 nginx 来运行 angular4 应用程序

[英]How to config nginx to run angular4 application

 原文  2017-07-24 09:40:43  6   3    angular/ nginx

问题描述

我是 angular 的新手，我想将应用程序放在Nginx服务器上的 docker 容器上。

1.通过@angular/cli运行angular应用

为此，我执行了以下步骤：

1.1. 安装@angular/cli 并创建 angular4 应用程序

sudo npm install -g @angular/cli
ng new angular4-on-nginx-with-docker

1.2. 通过npm start为应用程序提供服务

角度应用程序通过以下方式正常工作

npm start

现在，我想避免使用npm start命令，因为我正在考虑开发一个 dockerized 应用程序。 要做到这一点，下面是：

2.在nginx上运行angular应用

2.1. 用于 nginx 的Dockerfile文件

FROM debian:jessie

MAINTAINER NGINX Docker Maintainers "docker-maint@nginx.com"

ENV NGINX_VERSION 1.11.9-1~jessie


RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 \
    && echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" >> /etc/apt/sources.list \
    && apt-get update \
    && apt-get install --no-install-recommends --no-install-suggests -y \
                        ca-certificates \
                        nginx=${NGINX_VERSION} \
    && rm -rf /var/lib/apt/lists/*

# forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
    && ln -sf /dev/stderr /var/log/nginx/error.log


EXPOSE 80 443

CMD ["nginx", "-g", "daemon off;"]

2.2. nginx的配置如下：

server {
    server_name angular4.dev;
    root /var/www/frontend/src;

    try_files $uri $uri/ index.html;

    error_log /var/log/nginx/angular4_error.log;
    access_log /var/log/nginx/angular4_access.log;
}

2.3. docker-compose.yml

version: '2'

services:
  nginx:
    build: nginx
    ports:
      - 88:80
    volumes:
      - ./nginx/frontend:/var/www/frontend
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./nginx/logs/nginx/:/var/log/nginx

2.4. 构建 docker 镜像并运行容器

docker-compose up -d --build

2.5. 识别容器的IP地址

docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA
            #"SecondaryIPAddresses": null,
            #"IPAddress": "",
            #        "IPAMConfig": null,
            #        "IPAddress": "172.18.0.2",

在172.18.0.2上打开浏览器

问题

我认为 npm 包不可访问......我不确定到底出了什么问题。 但是，我可以说的是该页面是空的，并且控制台中没有任何错误消息。

下面是使用nginx时得到的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular4 on nginx with docker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

这是使用命令npm start得到的页面代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular4 on nginx with docker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.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>
</html>

所以，怎么了？？？

该示例的存储库可在github 上找到

3 个解决方案

解决方案1
 27  2018-03-24 08:39:17

如果有人还在为 angular 2/4/5 应用程序 + Nginx（即没有 Docker）的生产设置而苦苦挣扎，那么这里是完整的解决方案：

假设您想在 HOST 上部署 angular 应用程序： http://example.com : http://example.com和 PORT： 8080注意 - 在您的情况下，HOST 和 PORT 可能不同。

确保你的 index.html head 标签中有<base href="/"> 。

  1. 首先，转到您机器上的角度存储库（即 /home/user/helloWorld）路径。

  2. 然后使用以下命令为您的生产服务器构建 /dist：

    ng build --prod --base-href http://example.com:8080

  3. 现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您机器的 angular 存储库复制到您要托管生产服务器的远程机器。

  4. 现在登录到您的远程服务器并添加以下 nginx 服务器配置。

     server { listen 8080; server_name http://example.com; root /path/to/your/dist/location; # eg. root /home/admin/helloWorld/dist index index.html index.htm; location / { try_files $uri $uri/ /index.html; # This will allow you to refresh page in your angular app. Which will not give error 404. } }

  5. 现在重启nginx。

  6. 就是这样！！ 现在您可以通过http://example.com:8080访问您的 angular 应用程序

希望它会有所帮助。

解决方案2
 10  2017-07-24 09:49:31

错误的一件事是您正在尝试发布源文件，而不是使用 cli 进行生产构建并发布这些文件的输出。 ng start用于本地开发。 当您对结果感到满意时，您可以使用ng build --prod来构建您的应用程序，并且/dist文件夹中的任何内容都应放置在 docker 中。

如果你想在你的ng build --prod拥有所有东西，你应该在创建新项目后ng build --prod ，然后将你的nginx的根目录指向/var/www/frontend/dist; . 不过，这会大大增加 docker 的启动时间。 显然取决于您的项目的大小

解决方案3
 1  2020-05-21 13:38:37

如果有人仍然在使用 docker 和 ssl 服务 angular 时遇到问题。

文件

FROM nginx:stable

## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /app/dist/my-app /usr/share/nginx/html/


## Skip this if you are using kubernetes config map 
COPY nginx.conf /etc/nginx/nginx.conf

## Serve
CMD ["nginx", "-g", "daemon off;"]

通过 kubernetes 配置映射定义提供 nginx.conf 如下：

volumeMounts:
- mountPath: /etc/nginx/nginx.conf
  name: config
  subPath: nginx.conf
volumes:
- configMap:
    defaultMode: 420
    name: config-map-name

配置文件

worker_processes auto;
pid /tmp/nginx.pid;

events {
  worker_connections 1024;
  use epoll;
  multi_accept on;
}

http {
  # this is necessary for us to be able to disable request buffering in all cases

  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  keepalive_timeout  65;

  log_format timed_combined 'remote_addr - '
    '"$request" $status $body_bytes_sent '
    '"$http_referer" "$http_user_agent" '
    '$request_time $upstream_response_time $pipe';

  access_log /dev/stdout timed_combined;

  server {

    listen 0.0.0.0:443 ssl;
    listen [::]:443 ssl default_server;
    server_tokens off;


    root /usr/share/nginx/html;

    # SSL
    ssl_certificate /etc/nginx/cert/tls.crt;
    ssl_certificate_key /etc/nginx/cert/tls.key;

    # Recommendations from https://raymii.org/s/tutorials/Strong_SSL_Security_On_nginx.html
    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_ciphers '!aNULL:kECDH+AESGCM:ECDH+AESGCM:RSA+AESGCM:kECDH+AES:ECDH+AES:RSA+AES:';
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;

    # disable any limits to avoid HTTP 413 for large image uploads
    client_max_body_size 0;

    # required to avoid HTTP 411:
    chunked_transfer_encoding on;

    location / {
        try_files $uri$args $uri$args/ /index.html;
    }
  }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法运行 Angular4 应用程序 如何更改角度应用程序的 nginx 配置文件 如何配置路由Angular4路由器 Angular4和NGINX权限被拒绝 如何在Bitbucket管道中运行angular4测试用例 如何使用单个命令同时运行nodejs和angular4？ 在angular4应用程序上处理RTL 在angular4应用程序中上传FormData 如何在angular4中内嵌框架？ 如何在Angular4应用程序中集成聊天功能？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM