我是Docker的新手，找不到用于我的开发设置的容器示例。我在标记为“ Web”的文件夹中有一个Angular 8前端。我有一个标记为“ API”的.NET Core后端文件夹。要在我的计算机上本地运行该应用程序，我进入API文件夹并运行“ dotnet run”命令，然后在Web文件夹中执行“ ng serve”。在一个单独的标记为“库”的文件夹中，我同时具有.NET Core和Angular的依赖项。我正在使用Node 12.13和angular-cli 8.13.19。
如何为现有项目设置一个Dockerfile，该项目将在上述文件夹中运行上述命令？为.NET Core和Angular设置单独的容器会更好还是将它们合并为一个容器？</ p>
更新： 我将进一步解释为什么要使用Docker。作为六人开发团队的一部分，我希望我们使用相同版本的Node，Angular和.NET Core及其附带的依赖项。我认为拥有Angular / Node容器和.NET Core容器是有意义的。现在，应用程序的前端已经设置为使用“ localhost：5000”与后端通信。 Web和API文件夹在同一Git存储库中彼此相邻，并且库文件夹是同一存储库中的Git子模块。我想我需要创建两个Dockerfile和一个Docker Compose文件。我发现的最接近的示例是：https://mherman.org/blog/dockerizing-an-angular-app/
答案 0 :(得分：4)
您不会在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资源，然后您的网络浏览器将向您的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;
}
frontend.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"
}
}