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

时间：2017-07-24 09:40:44

标签： angular nginx

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

1。通过@ angular / cli

运行角度应用程序

为此，我做了以下步骤：

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 个答案:

答案 0 :(得分：19)

如果有人仍在努力进行角度2/4/5 app + Nginx（即没有Docker）的生产设置，那么这里是完整的解决方案：

假设您要在主持人处部署角度应用：http://example.com和PORT：8080 注 - 在您的情况下，HOST和PORT可能会有所不同。

确保index.html头标记中有<base href="/">。

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

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

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

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

  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

    7. 访问角度应用

    希望它会有所帮助。

答案 1 :(得分：9)

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

如果您希望在泊坞窗中拥有所有内容，则应在创建新项目后ng build --prod，然后将nginx的根目录指向/var/www/frontend/dist;。这会大大增加docker的启动时间。显然取决于项目的大小

答案 2 :(得分：1)

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

Dockerfile 

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

nginx.conf 

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;
    }
  }
}
相关问题
最新问题