angular - 使用 Angular 8 前端和 .NET Core 后端创建 Docker 容器

Question

我是 Docker 新手，找不到用于我的开发设置的容器示例。我有一个 Angular 8 前端，位于标有“Web”的文件夹中。我有一个标有“API”的 .NET Core 后端文件夹。要在我的计算机上本地运行应用程序，我进入 API 文件夹并运行“dotnet run”命令，然后在 Web 文件夹中执行“ng serve”。在标有“库”的单独文件夹中，我对 .NET Core 和 Angular 都有依赖项。我正在使用节点 12.13 和 angular-cli 8.13.19。

我将如何为将在上述文件夹中运行上述命令的现有项目设置 Dockerfile？为 .NET Core 和 Angular 提供单独的容器会更好，还是应该将它们合并为一个？

更新:
我将进一步解释我为什么要使用 Docker。作为六人开发团队的一员，我希望我们使用相同版本的 Node、Angular 和 .NET Core 以及随附的依赖项。我认为拥有一个 Angular/Node 容器和一个 .NET Core 容器是有意义的。现在，应用程序的前端已经设置为使用 'localhost:5000' 与后端通信。 Web 和 API 文件夹在同一个 Git 存储库中彼此相邻，而 library 文件夹是同一存储库中的 Git 子模块。我想我需要创建两个 Dockerfile 和一个 Docker Compose 文件。我找到的最接近的例子是:https://mherman.org/blog/dockerizing-an-angular-app/

Answer 1

您不会在 Docker 容器中运行“ng serve”。 ng serve是为了您的本地主机需要运行您的 Angular 应用程序并开发功能。

您的 Docker 容器是一个生产环境概念，即使使用 localhost/development/staging 也是如此。

处理 HTTP 请求的 Docker 容器将提供资源，在 Angular 的情况下是 index.html，但实际上对于从 Web 浏览器/客户端到服务器的任何初始 HTTP GET 来说，默认 index.html 是返回的资源，如果你愿意的话，主页。你不会真的想在你的 Docker 容器中使用 Angular CLI。

您将希望使用 ng build 构建您的应用程序然后将分发文件复制到 Docker 容器中，并使用 HTTP 服务器处理 HTTP 请求并提供 index.html，index.html 将引用您的 Javascript 和 CSS 资源，您的 Web 浏览器将向您的 Docker 发出其他请求那些资源文件的容器，它们是您的 ng build 的一部分dist 输出文件。

这是一个将 Nginx 包装为 HTTP 服务器的容器示例:

FROM centos:7
MAINTAINER Brian Ogden

# Not currently being used but may come in handy
ARG ENVIRONMENT
ENV NODE_VERSION 10.15.1
#ENV NODE_OPTIONS --max-old-space-size=12000

RUN yum -y update && \
    yum clean all && \
    yum -y install http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm \
    yum -y makecache && \
    yum -y install nginx-1.12.0 wget

# Cleanup some default NGINX configuration files we don’t need
RUN rm /etc/nginx/conf.d/default.conf

#############################################
# NodeJs Install
#############################################

#Download NodeJs package
RUN wget -q -O - https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-x64.tar.gz \
    | tar --strip-components=1 -xzf - -C /usr/local

# https://stackoverflow.com/a/35774741/1258525
# use changes to package.json to force Docker not to use the cache
# when we change our application's nodejs dependencies:
COPY ./package.json /tmp/package.json
RUN cd /tmp && npm cache clean --force && npm install
RUN mkdir /app && cp -a /tmp/node_modules /app/

WORKDIR /app
COPY . /app

RUN npm run build-$ENVIRONMENT

RUN cd /app && cp -a dist/* /usr/share/nginx/html
COPY ./docker/conf/frontend.conf /etc/nginx/conf.d/frontend.conf
COPY ./docker/conf/nginx.conf /etc/nginx/nginx.conf


CMD ["nginx"]

对于您的需求，配置可能过于复杂，但它确实展示了处理潜在的 CORS 问题和您在应用程序发展时可能遇到的其他挑战:

nginx.conf:

daemon off;
user  nginx;
worker_processes  2;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
    use epoll;
    accept_mutex off;
}


http {
    include       /etc/nginx/mime.types;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    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;

    client_max_body_size 300m;
    client_body_buffer_size 300k;
    large_client_header_buffers 8 64k;

    gzip  on;
    gzip_http_version 1.0;
    gzip_comp_level 6;
    gzip_min_length 0;
    gzip_buffers 16 8k;
    gzip_proxied any;
    gzip_types text/plain text/css text/xml text/javascript application/xml application/xml+rss application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;

    include /etc/nginx/conf.d/*.conf;
}

前端.conf:

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  off;
    text/css                   2d;
    application/javascript     2d;
    ~image/                    max;
    application/pdf            max;
}


server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    root   /usr/share/nginx/html;
    expires $expires;
    charset UTF-8; #a must have for AOT compilation with lazy loading: https://stackoverflow.com/questions/51451556/lazy-loaded-modules-with-aot-typeerror-is-not-a-function-when-served-from

    # Main
    location / {
        set $cors "true";
        if ($http_origin ~* (http:\/\/d\.tradeservice\.com\S*)$) {
            set $cors "true";
        }

        if ($request_method = 'OPTIONS') {
            set $cors "${cors}options";
        }

        if ($request_method = 'GET') {
            set $cors "${cors}get";
        }
        if ($request_method = 'POST') {
            set $cors "${cors}post";
        }

        if ($cors = "trueget") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "truepost") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

        if ($cors = "trueoptions") {
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }

        #index  index.html index.htm;
        try_files $uri $uri/ @index; # This will allow you to refresh page in your angular app. Which will not give error 404.    
    }

    location @index {
        expires 0;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        try_files /index.html =404;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

这是我的 Angular 应用程序的 package.json，我使用的是 Webpack，但我的 Docker 文件正在执行 npm“脚本”部分，您只需更改为使用 Angular CLI 命令:

{
  "name": "tsl-frontend",
  "version": "0.1.0",
  "scripts": {
    "test": "karma start",
    "build-localhost": "webpack --mode development --progress --colors --env.env localhost",
    "build-development": "webpack --mode development --progress --colors --env.env development",
    "build-staging": "node --max_old_space_size=5000 node_modules/webpack/bin/webpack.js --mode production --progress --colors --env.env staging",
    "build-production": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --mode production --progress --colors --env.env production",
    "build-maintenance": "webpack --mode production -p --progress --colors --env.env maintenance",
    "serve": "webpack-dev-server --mode development --inline --progress --colors --env.env development",
    "serve-production": "webpack-dev-server --mode production --inline --progress --colors --env.env production",
    "serve-staging": "webpack-dev-server --mode production --inline --progress --colors --env.env staging",
    "serve-localhost": "webpack-dev-server --mode development --inline --progress --colors --env.env localhost",
    "serve-host": "webpack-dev-server --host 0.0.0.0 --port 80 --disable-host-check --mode development --inline --progress --colors --env.env localhost",
    "serve-maintenance": "webpack-dev-server --mode development --inline --progress --colors --env.env maintenance"
  },
  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/compiler-cli": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/http": "^7.0.0",
    "@angular/material": "^7.0.0",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/platform-server": "^7.0.0",
    "@angular/router": "^7.0.0",
    "@auth0/angular-jwt": "^2.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@types/file-saver": "^1.3.0",
    "angular2-text-mask": "^8.0.5",
    "bootstrap": "^4.1.2",
    "chart.js": "^2.7.2",
    "clipboard": "^2.0.1",
    "devextreme": "^18.1.4",
    "devextreme-angular": "^18.1.4",
    "file-saver": "^1.3.8",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery.easing": "^1.4.1",
    "moment": "^2.22.2",
    "moment-timezone": "0.5.13",
    "ng2-bootstrap-modal": "1.0.1",
    "ng2-charts": "^1.6.0",
    "ng2-drag-drop": "^2.9.2",
    "ng2-page-scroll": "^4.0.0-beta.12",
    "ng2-pdf-viewer": "^5.2.3",
    "ngx-toastr": "^9.1.1",
    "popper.js": "^1.14.3",
    "raphael": "^2.2.7",
    "reflect-metadata": "0.1.8",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "systemjs": "0.19.40",
    "typescript": "3.1.6",
    "xlsx": "^0.11.19",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ngtools/webpack": "^6.0.8",
    "@servicestack/client": "^1.0.14",
    "@types/file-saver": "^1.3.0",
    "@types/jasmine": "^2.8.8",
    "@types/jquery": "^3.3.6",
    "@types/node": "7.0.7",
    "angular-router-loader": "^0.6.0",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "b64-to-blob": "^1.2.19",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^0.28.11",
    "extended-define-webpack-plugin": "^0.1.3",
    "file-loader": "^1.1.11",
    "file-saver": "^1.3.8",
    "html-webpack-plugin": "^4.0.0-beta.2",
    "jasmine": "^2.99.0",
    "karma": "^1.7.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.13",
    "ng-intercom": "^1.0.0-beta.5-2",
    "node-sass": "^4.11.0",
    "open-browser-webpack-plugin": "0.0.5",
    "path": "^0.12.7",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.13.2",
    "text-mask-addons": "^3.7.2",
    "toposort": "^1.0.7",
    "ts-loader": "^4.4.2",
    "webpack": "^4.27.0",
    "webpack-cli": "^3.1.1",
    "webpack-del-plugin": "0.0.1",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.3",
    "webpack-rev-replace-plugin": "^0.1.1",
    "xml2js": "^0.4.19"
  }
}