Борьба за запуск angular приложения с производственной конфигурацией - PullRequest
0 голосов
/ 04 мая 2020

Я создал приложение angular 8 и использую docker для его обслуживания. Я использую RUN npm run build --env=prod --prod для сборки приложения в производственном режиме, как описано в нескольких интерактивных руководствах.

Если я запускаю свое приложение с помощью Dockerfile и команды npm run build --prod, всегда будет использоваться конфигурация разработки (api звонки с localhost: 7000 / api, например, а не some_url.de/api ..)

Я не знаю, что я делаю неправильно. Во всех уроках только с тегом сборки выбрана правильная конфигурация ..

Dockerfile

FROM node:alpine AS build-stage

ARG env=prod

WORKDIR /app

# to use cache on node_modules
COPY package*.json /app/
RUN npm install

COPY . /app/
RUN npm run build --prod

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=build-stage /app/dist/ /usr/share/nginx/html/

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

nginx .conf

events {}

http{
    server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
        }
    }
}

В моем main.ts у меня есть этот фрагмент:

if (environment.production) {
  enableProdMode();
}

В папке src/app/environments Мне нужно env конфигурации:

среда. ts

export const environment = {
  production: false,
  appURL: 'http://localhost:7000/api',
  dev_mode: false,
  show_all_tabs: true,
};

environment.prod.ts

export const environment = {
    production: true,
    appURL: 'http://some_url.de/api',
    dev_mode: false,
    show_all_tabs: true,
  };

пакет. json

{
  "name": "test",
  "version": "1.0.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "5.2.2",
    "@angular/common": "5.2.2",
    "@angular/compiler": "5.2.2",
    "@angular/compiler-cli": "5.2.2",
    "@angular/core": "5.2.2",
    "@angular/forms": "5.2.2",
    "@angular/http": "5.2.2",
    "@angular/platform-browser": "5.2.2",
    "@angular/platform-browser-dynamic": "5.2.2",
    "@angular/platform-server": "5.2.2",
    "@angular/router": "5.2.2",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-charts": "^7.3.0",
    "@types/angular": "^1.6.54",
    "@types/file-saver": "^1.3.1",
    "@types/jasmine": "2.5.45",
    "@types/node": "^6.14.0",
    "angular-2-local-storage": "^2.0.0",
    "angular2-multiselect-dropdown": "2.1.2",
    "bootstrap": "^4.3.1",
    "copy-webpack-plugin": "^4.5.3",
    "core-js": "2.4.1",
    "express": "^4.16.3",
    "file-saver": "^2.0.0-rc.4",
    "font-awesome": "4.7.0",
    "jquery": "^3.4.1",
    "jw-bootstrap-switch-ng2": "1.0.10",
    "ng2-nouislider": "1.6.1",
    "ng5-slider": "^1.2.1",
    "ngx-chips": "1.6.3",
    "ngx-gallery": "3.1.4",
    "ngx-pagination": "^4.0.0",
    "ngx-spinner": "^2.0.0",
    "nouislider": "9.2.0",
    "popper.js": "1.12.6",
    "rellax": "1.4.0",
    "rxjs": "5.5.6",
    "typescript": "2.6.1",
    "xlsx": "^0.15.5",
    "xml-writer": "^1.7.0",
    "zone.js": "0.8.4",
    "node-sass": "^4.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "5.2.2",
    "@angular/language-service": "4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "^6.14.0",
    "codelyzer": "2.0.0",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.6.1"
  }
}
...