로컬 호스트 외부에서 액세스를 허용하는 방법

Angular2에서 로컬 호스트 외부의 액세스를 허용하려면 어떻게합니까? localhost:3030/panel쉽게 탐색 할 수 있지만와 같은 IP를 작성할 때 탐색 할 수 없습니다 10.123.14.12:3030/panel/.

어떻게 고칠 수 있습니까? npm(노드 프로젝트 관리-노드 설치 / 노드 시작)을 사용하여 프로젝트를 설치하고 실행 하지 않습니다 .

원하는 경우 내 package.json및을 제공 할 수 있습니다 index.html.

를 사용 ng serve --host 0.0.0.0하면 ng serve대신 IP를 사용하여 연결할 수 있습니다 localhost.

편집하다

최신 버전의 cli에서는 대신 로컬 IP 주소를 제공해야합니다.

편집 2

최신 버전의 cli (v5 이상)에서는 0.0.0.0네트워크의 모든 사용자가 대화 할 수 있도록 ip로 다시 사용할 수 있습니다 .

Mac 사용자 :

1. 시스템 환경 설정-> 네트워크-> Wi-Fi로 이동하십시오.
2. 상태 아래에 IP 주소를 복사하십시오 (보통 192.168.1.x)
3. 당신의 ng 봉사에 그것을 붙여 넣으십시오 : ng serve --host 192.168.1.x

그런 다음를 통해 다른 기기에서 페이지를 볼 수 있어야합니다 192.168.1.x:4200.

명령을 실행

ng serve --host=0.0.0.0 --disable-host-check

이것은 호스트 확인을 비활성화하고 IP 주소로 외부 (localhost 대신) 외부에서 액세스 할 수있게합니다

다음 명령을 사용하여 IP로 액세스 할 수 있습니다.

ng serve --host 0.0.0.0 --disable-host-check

npm을 사용하고 매번 명령을 실행하지 않으려면 scripts 섹션 의 package.json 파일에 다음 행을 추가 할 수 있습니다 .

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

그런 다음 아래 명령을 사용하여 동일한 네트워크의 다른 시스템에서 액세스 할 수있는 앱을 실행할 수 있습니다.

npm start

angular.json아래처럼 프로젝트에서 파일을 편집 하면 작동합니다.

...

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "project:build",
        "host": "0.0.0.0"
      },

...

ngrok을 사용하여 터널을 통해 실행되는 모든 HTTP 트래픽을 검사 할 수 있습니다.ngrok http --host-header=rewrite 4200

cmd를 열고 프로젝트 위치로 이동하십시오. 즉 프로젝트에 대해 npm install 또는 ng serve를 실행하십시오.

그런 다음 명령을 실행 하십시오-IP 주소는 ng serve --host 10.202.32.45어디에 있습니까 10.202.32.45?

10.202.32.45:42004200이 포트 번호 인 페이지에서 액세스 할 수 있습니다.

참고 : 이 명령을 사용하여 앱을 제공하면 액세스 할 수 없습니다localhost:4200

문제는 방화벽이었습니다. Windows에있는 경우 노드가 다음을 통해 허용되는지 확인하십시오.

누군가를 도울 수있는 빠른 솔루션 :

이 줄을 시작 값으로 추가 ng serve --host 0.0.0.0 --disable-host-check 하십시오.package.json

전의:

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

그리고 단순히 start또는npm run start

다른 로컬 IP에서 프로젝트에 액세스 할 수 있습니다.

Docker 내에서 동일한 문제가 발생하면 CMDDockerfile에서 아래 를 사용할 수 있습니다 .

CMD ["ng", "serve", "--host", "0.0.0.0"]

또는 완전한 Dockerfile

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

작성 proxy.conf.json하고이 구성을 붙여

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

바꾸다:

let url = 'api/'+ your path;

CLI에서 실행 :

ng serve  --host port.number —-proxy-config proxy.conf.json

나를 위해 "ng serve --open --host 0.0.0.0"을 사용하여 작동하지만 경고가 있습니다.

경고 : 이것은 Angular 응용 프로그램을 로컬에서 테스트하거나 디버깅하는 데 사용하기위한 간단한 서버입니다. 보안 문제에 대해서는 검토되지 않았습니다.

이 서버를 열린 연결에 바인딩하면 응용 프로그램이나 컴퓨터가 손상 될 수 있습니다. "--host"플래그로 전달 된 것과 다른 호스트를 사용하면 웹 소켓 연결 문제가 발생할 수 있습니다. 이 경우 "--disableHostCheck"를 사용해야 할 수도 있습니다.

package.json을 변경할 필요가 없습니다.

나를 위해 다음을 사용하여 작동합니다.

ng serve --host = 0.0.0.0 --port = 5999 --disable-host-check

호스트 : http : // localhost : 5999 /

• 사용하십시오 ng serve --host<Your IP> --port<Required if any>.

• ng serve --host = 192.111.1.11 --port = 4545.

• 이제 컴파일이 끝날 때 아래 줄을 볼 수 있습니다.

Angular Live Development Server가 192.111.1.11:4545에서 청취 중입니다 http://192.111.1.11:4545/. **에서 브라우저를여십시오 .

노드 프로젝트 관리자를 사용하는 사람들에게는 package.json에 추가하는이 줄이면 충분합니다. 앵귤러 CLI 사용자의 경우 mast3rd3mon의 답변이 맞습니다.

추가 할 수 있습니다

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

package.json에