Эта сторона недоступна - angular в docker на Windows 10 - PullRequest
1 голос
/ 28 мая 2020

Я хочу использовать Docker в своем проекте для запуска api (spring), database (H2) и внешнего интерфейса (angular) вместе с помощью docker -compose. Все компилируется (сначала используется docker -compose build и docker -compose up для запуска проекта) и Терминал дает мне адрес, по которому можно связаться с моим браузером:

    D:\Applications\tasks-manager>docker-compose build
Building front
Step 1/8 : FROM node:latest
 ---> 91a3cf793116
Step 2/8 : COPY . ./frontend
 ---> 812a6411384a
Step 3/8 : WORKDIR /frontend
 ---> Running in 2fef15d985be
Removing intermediate container 2fef15d985be
 ---> ef7de8832794
Step 4/8 : COPY package.json /usr/src/app/package.json
 ---> 820662c8bbda
Step 5/8 : CMD ["npm", "i"]
 ---> Running in 84400d20cce6
Removing intermediate container 84400d20cce6
 ---> 604cd69b6330
Step 6/8 : CMD ["npm", "run", "build"]
 ---> Running in 4965a5810f46
Removing intermediate container 4965a5810f46
 ---> fa6a7f31e02d
Step 7/8 : EXPOSE 4201
 ---> Running in 7d5f682bd8bc
Removing intermediate container 7d5f682bd8bc
 ---> a3bb717ec881
Step 8/8 : CMD ["npm", "start"]
 ---> Running in 23e17c2be839
Removing intermediate container 23e17c2be839
 ---> 3ecdf3141698
Successfully built 3ecdf3141698
Successfully tagged tasks-manager-angular:latest

D:\Applications\tasks-manager>docker-compose up
Creating network "tasks-manager_default" with the default driver
Creating tasks-manager-angular ... done
Attaching to tasks-manager-angular
tasks-manager-angular |
tasks-manager-angular | > frontend@0.0.0 start /frontend
tasks-manager-angular | > ng serve --port 4201 --host 0.0.0.0 --disableHostCheck true
tasks-manager-angular |
tasks-manager-angular | WARNING: This is a simple server for use in testing or debugging Angular applications
tasks-manager-angular | locally. It hasn't been reviewed for security issues.
tasks-manager-angular |
tasks-manager-angular | Binding this server to an open connection can result in compromising your application or
tasks-manager-angular | computer. Using a different host than the one passed to the "--host" flag might result in
tasks-manager-angular | websocket connection issues. You might need to use "--disableHostCheck" if that's the
tasks-manager-angular | case.
tasks-manager-angular | WARNING: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/
webpack-dev-server-middleware-security-issues-1489d950874a for more information.
tasks-manager-angular | Compiling @angular/animations : es2015 as esm2015
tasks-manager-angular | Compiling @angular/core : es2015 as esm2015
tasks-manager-angular | Compiling @angular/animations/browser : es2015 as esm2015
tasks-manager-angular | Compiling @angular/animations/browser/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/common : es2015 as esm2015
tasks-manager-angular | Compiling @angular/common/http : es2015 as esm2015
tasks-manager-angular | Compiling @angular/common/http/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/forms : es2015 as esm2015
tasks-manager-angular | Compiling @angular/platform-browser : es2015 as esm2015
tasks-manager-angular | Compiling @angular/platform-browser/animations : es2015 as esm2015
tasks-manager-angular | Compiling @angular/core/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/platform-browser-dynamic : es2015 as esm2015
tasks-manager-angular | Compiling @angular/platform-browser/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/compiler/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/common/testing : es2015 as esm2015
tasks-manager-angular | Compiling @angular/router : es2015 as esm2015
tasks-manager-angular | Compiling @angular/router/testing : es2015 as esm2015
tasks-manager-angular |
tasks-manager-angular | chunk {main} main.js, main.js.map (main) 113 kB [initial] [rendered]
tasks-manager-angular | chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 140 kB [initial] [rendered]
tasks-manager-angular | chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
tasks-manager-angular | chunk {styles} styles.js, styles.js.map (styles) 13.1 kB [initial] [rendered]
tasks-manager-angular | chunk {vendor} vendor.js, vendor.js.map (vendor) 3.4 MB [initial] [rendered]
tasks-manager-angular | Date: 2020-05-28T07:39:06.828Z - Hash: fd51e5bdf72f071a8134 - Time: 12980ms
tasks-manager-angular | ** Angular Live Development Server is listening on 0.0.0.0:4201, open your browser on http://localhost:4201/ **

Возникшая проблема - ошибка «Эта сторона недоступна»:

enter image description here

Кажется, я перепробовал все решения, найденные в Google, и ничего не изменилось. Я думаю, что важная информация заключается в том, что я использую docker на Windows 10. IDE - IntelliJ IDEA Community Edition.

Ниже мой Dockerfile :

FROM node:latest

COPY . ./frontend
WORKDIR /frontend

COPY package.json /usr/src/app/package.json

CMD ["npm", "i"]
CMD ["npm", "run", "build"]
EXPOSE 4201
CMD ["npm", "start"]

docker -compose.yml :

version: '3'
services:
  front:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: tasks-manager-angular
    depends_on:
      - api
    ports:
      - "4201:4201"
    image: "tasks-manager-angular:latest"
    restart: always

package. json:

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4201 --host 0.0.0.0 --disableHostCheck true",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.5",
    "@angular/common": "~9.0.5",
    "@angular/compiler": "~9.0.5",
    "@angular/core": "~9.0.5",
    "@angular/forms": "~9.0.5",
    "@angular/platform-browser": "~9.0.5",
    "@angular/platform-browser-dynamic": "~9.0.5",
    "@angular/router": "~9.0.5",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.7",
    "@angular/cli": "~9.0.5",
    "@angular/compiler-cli": "~9.0.5",
    "@angular/language-service": "~9.0.5",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

Если кто-то боролся с подобными проблема и решил ее, дайте мне любой намек или идею, где найти, что я делаю не так. Все отлично работает при запуске без использования docker.

...