angular - 努力使用生产配置启动 Angular 应用程序
问题描述
我创建了一个 Angular 8 应用程序并使用 docker 来提供它。我使用RUN npm run build --env=prod --prod
在生产模式下构建应用程序,如几个在线教程中所述。
如果我使用 Dockerfile 启动我的应用程序并且该npm run build --prod
命令始终将使用开发配置(使用 localhost:7000/api 的 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
中,我必须环境配置:
环境.ts
export const environment = {
production: false,
appURL: 'http://localhost:7000/api',
dev_mode: false,
show_all_tabs: true,
};
环境.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"
}
}
解决方案
您需要将参数传递给 ng 构建,并且不能将它们直接传递给 npm。添加--
让 npm 知道下一个参数不是针对它,而是针对在脚本 package.json 中运行的 ng 命令。然后您可以传递--prod
使用您的 environment.prod.ts 的参数。
例如
RUN npm run build -- --prod
推荐阅读
- azure - 在 Azure 的数据工厂中为 Postgresql(源)创建链接服务时无法连接服务器
- python - 如何在 Visual Studio Code 中获取 Code Runner 扩展以使用选定的 Python 解释器?
- javascript - 为什么我无法收到服务器的响应
- ios - 如何在 Swift 中从图像中检测条形码?
- bluetooth-lowenergy - 如何找到BLE设备不同UUID对应的句柄
- apache-spark - 此查询不支持从检查点位置恢复。删除检查点/testmemeory/offsets 重新开始
- keras - 在循环中创建密集层
- sqlite - SQLite Window 函数避免聚合重复
- php - 防止 Jqueryvalidation 在打开模式时验证远程
- javascript - 我如何将 html 输入数据传递给 javascript