无法使Angular在本地域上运行

huangapple
go评论94阅读模式
英文:

Unable to get Angular to work on a local domain

问题

以下是您提供的内容的翻译部分：

我试图在自定义本地域名 blog.dev 上启动 Angular 应用程序。Angular 应用程序在 https://localhost:4200 上正常工作。但是在 blog.dev 域上无法正常工作。

我的 Angular 部署文件如下所示：

  1. apiVersion: apps/v1
  2. kind: Deployment
  3. metadata:
  4.   name: client-depl
  5. spec:
  6.   replicas: 1
  7.   selector:
  8.     matchLabels:
  9.       app: client
  10.   template:
  11.     metadata:
  12.       labels:
  13.         app: client
  14.     spec:
  15.       containers:
  16.         - name: client
  17.           image: pinakinc/client
  18.           ports:
  19.             - containerPort: 4200
  20. ---
  21. apiVersion: v1
  22. kind: Service
  23. metadata:
  24.   name: client-srv
  25. spec:
  26.   selector:
  27.     app: client
  28.   type: LoadBalancer
  29.   ports:
  30.     - name: client
  31.       protocol: TCP
  32.       port: 80
  33.       targetPort: 4200
  34.       nodePort: 31000

Nginx 配置文件如下所示：

  1. worker_processes 1;
  3. events {
  4.   worker_connections 1024;
  5. }
  7. http {
  8.   server {
  9.     listen 80;
  10.     server_name localhost;
  12.     root /usr/share/nginx/html;
  13.     index index.html index.htm;
  14.     include /etc/nginx/mime.types;
  16.     gzip on;
  17.     gzip_min_length 1000;
  18.     gzip_proxied expired no-cache no-store private auth;
  19.     gzip_types text/plain text/css application/json application/javascript 
  20.     application/x-javascript text/xml application/xml application/xml+rss 
  21.     text/javascript;
  23.     location / {
  24.       try_files $uri $uri/ /index.html;
  25.     }
  26.   }
  27. }

Angular.json 文件如下所示：

  1. {
  2.   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3.   "version": 1,
  4.   "newProjectRoot": "projects",
  5.   "projects": {
  6.     "Angular-Mean": {
  7.       "projectType": "application",
  8.       "schematics": {
  9.         "@schematics/angular:application": {
  10.           "strict": true
  11.         }
  12.       },
  13.       "root": "",
  14.       "sourceRoot": "src",
  15.       "prefix": "app",
  16.       "architect": {
  17.         "build": {
  18.           "builder": "@angular-devkit/build-angular:browser",
  19.           "options": {
  20.             "outputPath": "dist/Angular-Mean",
  21.             "index": "src/index.html",
  22.             "main": "src/main.ts",
  23.             "polyfills": "src/polyfills.ts",
  24.             "tsConfig": "tsconfig.app.json",
  25.             "assets": [
  26.               "src/favicon.ico",
  27.               "src/assets"
  28.             ],
  29.             "styles": [
  30.               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  31.               "src/styles.css"
  32.             ],
  33.             "scripts": []
  34.           },
  35.           "configurations": {
  36.             "production": {
  37.               "budgets": [
  38.                 {
  39.                   "type": "initial",
  40.                   "maximumWarning": "500kb",
  41.                   "maximumError": "1mb"
  42.                 },
  43.                 {
  44.                   "type": "anyComponentStyle",
  45.                   "maximumWarning": "2kb",
  46.                   "maximumError": "4kb"
  47.                 }
  48.               ],
  49.               "fileReplacements": [
  50.                 {
  51.                   "replace": "src/environments/environment.ts",
  52.                   "with": "src/environments/environment.prod.ts"
  53.                 }
  54.               ],
  55.               "outputHashing": "all"
  56.             },
  57.             "development": {
  58.               "buildOptimizer": false,
  59.               "optimization": false,
  60.               "vendorChunk": true,
  61.               "extractLicenses": false,
  62.               "sourceMap": true,
  63.               "namedChunks": true
  64.             }
  65.           },
  66.           "defaultConfiguration": "production"
  67.         },
  68.         "serve": {
  69.           "options": {
  70.             "host": "blog.dev",
  71.             "port": 80
  72.           },
  73.           "builder": "@angular-devkit/build-angular:dev-server",
  74.           "configurations": {
  75.             "production": {
  76.               "browserTarget": "Angular-Mean:build:production"
  77.             },
  78.             "development": {
  79.               "browserTarget": "Angular-Mean:build:development"
  80.             }
  81.           },
  82.           "defaultConfiguration": "development"
  83.         },
  84.         "extract-i18n": {
  85.           "builder": "@angular-devkit/build-angular:extract-i18n",
  86.           "options": {
  87.             "browserTarget": "Angular-Mean:build"
  88.           }
  89.         },
  90.         "test": {
  91.           "builder": "@angular-devkit/build-angular:karma",
  92.           "options": {
  93.             "main": "src/test.ts",
  94.             "polyfills": "src/polyfills.ts",
  95.             "tsConfig": "tsconfig.spec.json",
  96.             "karmaConfig": "karma.conf.js",
  97.             "assets": [
  98.               "src/favicon.ico",
  99.               "src/assets"
  100.             ],
  101.             "styles": [
  102.               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  103.               "./node_modules/bootstrap/dist/css/bootstrap.css",
  104.               "src/styles.css"
  105.             ],
  106.             "scripts": []
  107.           }
  108.         }
  109.       }
  110.     }
  111.   },
  112.   "defaultProject": "Angular-Mean"
  113. }

Host 文件条目如下所示：

  1. 127.0.5.1 blog.dev

我正在使用 Minikube。

英文:

无法使Angular在本地域上运行I am trying to bring up angular application on custom local domain blog.dev. The angular application is working fine of https://localhost:4200. But on the blog.dev domain, it is not working.

My angular deployment file is given below

  1. apiVersion: apps/v1
  2. kind: Deployment
  3. metadata: 
  4. name: client-depl
  5. spec: 
  6. replicas: 1
  7. selector: 
  8. matchLabels:
  9. app: client
  10. template: 
  11. metadata:
  12. labels:
  13. app: client 
  14. spec:
  15. containers:
  16. - name: client
  17. image: pinakinc/client
  18. ports:
  19. - containerPort: 4200
  20. ---
  21. apiVersion: v1
  22. kind: Service
  23. metadata:
  24. name: client-srv
  25. spec:
  26. selector:
  27. app: client
  28. type: LoadBalancer
  29. ports: 
  30. - name: client
  31. protocol: TCP
  32. port: 80
  33. targetPort: 4200
  34. nodePort: 31000

The nginx.conf is given below

  1. worker_processes  1;
  2. events {
  3. worker_connections  1024;
  4. }
  5. http {
  6. server {
  7. listen 80;
  8. server_name  localhost;
  9. root   /usr/share/nginx/html;
  10. index  index.html index.htm;
  11. include /etc/nginx/mime.types;
  12. gzip on;
  13. gzip_min_length 1000;
  14. gzip_proxied expired no-cache no-store private auth;
  15. gzip_types text/plain text/css application/json application/javascript 
  16. application/x-javascript text/xml application/xml application/xml+rss 
  17. text/javascript;
  18. location / {
  19. try_files $uri $uri/ /index.html;
  20. }
  21. }
  22. }

The angular.json is given below

  1. {
  2. "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3. "version": 1,
  4. "newProjectRoot": "projects",
  5. "projects": {
  6. "Angular-Mean": {
  7. "projectType": "application",
  8. "schematics": {
  9. "@schematics/angular:application": {
  10. "strict": true
  11. }
  12. },
  13. "root": "",
  14. "sourceRoot": "src",
  15. "prefix": "app",
  16. "architect": {
  17. "build": {
  18. "builder": "@angular-devkit/build-angular:browser",
  19. "options": {
  20. "outputPath": "dist/Angular-Mean",
  21. "index": "src/index.html",
  22. "main": "src/main.ts",
  23. "polyfills": "src/polyfills.ts",
  24. "tsConfig": "tsconfig.app.json",
  25. "assets": [
  26. "src/favicon.ico",
  27. "src/assets"
  28. ],
  29. "styles": [
  30. "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  31. "src/styles.css"
  32. ],
  33. "scripts": []
  34. },
  35. "configurations": {
  36. "production": {
  37. "budgets": [
  38. {
  39. "type": "initial",
  40. "maximumWarning": "500kb",
  41. "maximumError": "1mb"
  42. },
  43. {
  44. "type": "anyComponentStyle",
  45. "maximumWarning": "2kb",
  46. "maximumError": "4kb"
  47. }
  48. ],
  49. "fileReplacements": [
  50. {
  51. "replace": "src/environments/environment.ts",
  52. "with": "src/environments/environment.prod.ts"
  53. }
  54. ],
  55. "outputHashing": "all"
  56. },
  57. "development": {
  58. "buildOptimizer": false,
  59. "optimization": false,
  60. "vendorChunk": true,
  61. "extractLicenses": false,
  62. "sourceMap": true,
  63. "namedChunks": true
  64. }
  65. },
  66. "defaultConfiguration": "production"
  67. },
  68. "serve": {
  69. "options": {
  70. "host": "blog.dev",
  71. "port": 80
  72. },
  73. "builder": "@angular-devkit/build-angular:dev-server",
  74. "configurations": {
  75. "production": {
  76. "browserTarget": "Angular-Mean:build:production"
  77. },
  78. "development": {
  79. "browserTarget": "Angular-Mean:build:development"
  80. }
  81. },
  82. "defaultConfiguration": "development"
  83. },
  84. "extract-i18n": {
  85. "builder": "@angular-devkit/build-angular:extract-i18n",
  86. "options": {
  87. "browserTarget": "Angular-Mean:build"
  88. }
  89. },
  90. "test": {
  91. "builder": "@angular-devkit/build-angular:karma",
  92. "options": {
  93. "main": "src/test.ts",
  94. "polyfills": "src/polyfills.ts",
  95. "tsConfig": "tsconfig.spec.json",
  96. "karmaConfig": "karma.conf.js",
  97. "assets": [
  98. "src/favicon.ico",
  99. "src/assets"
  100. ],
  101. "styles": [
  102. "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  103. "./node_modules/bootstrap/dist/css/bootstrap.css",
  104. "src/styles.css"
  105. ],
  106. "scripts": []
  107. }
  108. }
  109. }
  110. }
  111. },
  112. "defaultProject": "Angular-Mean"
  113. }

The host file entry is given below

127.0.5.1 blog.dev

I am using minikube

答案1

得分: 0

Your application running on port 4200 so the target port should be 4200 in service also.

So traffic flow like service port 80 > target port 4200 > container port 4200

Target point and container port should get matched.

  • name: client
    image: pinakinc/client
    ports:

    • containerPort: 4200

apiVersion: v1
kind: Service
metadata:
name: client-srv
spec:
selector:
app: client
type: LoadBalancer
ports:
- name: client
protocol: TCP
port: 80
targetPort: 4200
nodePort: 31000

英文:

Your application running on port 4200 so the target port should be 4200 in service also.

So traffic flow like service port 80 > target port 4200 > container port 4200

Target point and container port should get matched.

  1. - name: client
  2. image: pinakinc/client
  3. ports:
  4. - containerPort: 4200
  5. ---
  6. apiVersion: v1
  7. kind: Service
  8. metadata:
  9. name: client-srv
  10. spec:
  11. selector:
  12. app: client
  13. type: LoadBalancer
  14. ports: 
  15. - name: client
  16. protocol: TCP
  17. port: 80
  18. targetPort: 4200
  19. nodePort: 31000

答案2

得分: 0

我已经成功解决了问题。解决问题所采取的措施如下：

  1. 更改了nginx配置文件如下：
  1. worker_processes  1;
  3. events {
  4.   worker_connections  1024;
  5. }
  7. http {
  8.   server {
  9.     listen 80;
  10.     server_name  localhost;
  12.     root   /usr/share/nginx/html;
  13.     index  index.html index.htm;
  14.     include /etc/nginx/mime.types;
  16.     gzip on;
  17.     gzip_min_length 1000;
  18.     gzip_proxied expired no-cache no-store private auth;
  19.     gzip_types text/plain text/css application/json 
  20.     application/javascript 
  21.     application/x-javascript text/xml application/xml 
  22.     application/xml+rss 
  23.     text/javascript;
  25.     location / {
  26.       try_files $uri $uri/ /index.html;
  27.     }
  28.   }
  29. }

部署文件如下：

  1. apiVersion: apps/v1
  2. kind: Deployment
  3. metadata: 
  4.   name: client-depl
  5. spec: 
  6.   replicas: 1
  7.   selector: 
  8.     matchLabels:
  9.       app: client
  10.   template: 
  11.     metadata:
  12.       labels:
  13.         app: client 
  14.     spec:
  15.       containers:
  16.         - name: client
  17.           image: pinakinc/client
  18.           ports:
  19.             - containerPort: 4200
  20. ---
  21. apiVersion: v1
  22. kind: Service
  23. metadata:
  24.   name: client-srv
  25. spec:
  26.   selector:
  27.     app: client
  28.   type: LoadBalancer
  29.   ports: 
  30.     - name: client
  31.       protocol: TCP
  32.       port: 80
  33.       targetPort: 80
  34.       nodePort: 32000

希望这对你有所帮助。

英文:

I was able to resolve the issue. Things that were done to resolve the issue

  1. nginx config file was changed as follows:

    1.  worker_processes  1;
    2. events {
    3. worker_connections  1024;
    4. }
    5. http {
    6. server {
    7. listen 80;
    8. server_name  localhost;
    9. root   /usr/share/nginx/html;
    10. index  index.html index.htm;
    11. include /etc/nginx/mime.types;
    12. gzip on;
    13. gzip_min_length 1000;
    14. gzip_proxied expired no-cache no-store private auth;
    15. gzip_types text/plain text/css application/json 
    16. application/javascript 
    17. application/x-javascript text/xml application/xml 
    18. application/xml+rss 
    19. text/javascript;
    20. location / {
    21. try_files $uri $uri/ /index.html;
    22. }
    23. }
    24. }

The deployment file is given below

  1. apiVersion: apps/v1
  2. kind: Deployment
  3. metadata: 
  4. name: client-depl
  5. spec: 
  6. replicas: 1
  7. selector: 
  8. matchLabels:
  9. app: client
  10. template: 
  11. metadata:
  12. labels:
  13. app: client 
  14. spec:
  15. containers:
  16. - name: client
  17. image: pinakinc/client
  18. ports:
  19. - containerPort: 4200
  20. ---
  21. apiVersion: v1
  22. kind: Service
  23. metadata:
  24. name: client-srv
  25. spec:
  26. selector:
  27. app: client
  28. type: LoadBalancer
  29. ports: 
  30. - name: client
  31. protocol: TCP
  32. port: 80
  33. targetPort: 80
  34. nodePort: 32000

huangapple
  • 本文由 发表于 2023年2月10日 15:51:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/75408249.html
  • angular
  • kubernetes
  • local
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定