nginx에 Angular 프로젝트를 배포하는 방법

저는 평소 Angular를 좋아했는데, 최근 프로젝트에서 우연히 사용하게 되어서 공유하고 싶었습니다. 다음 글은 주로 Angular 프로젝트 생성부터 패키징, nginx 배포까지 관련 정보를 소개하는 글입니다. 샘플 코드를 통해 소개합니다. 매우 자세하게 설명되어 있어 도움이 필요한 친구들이 참고할 수 있습니다.

머리말

현재 AngularJS는 Javascript의 MVC(어떤 사람들은 MV*라고 하지만 지금은 걱정하지 마세요) 프레임워크로 널리 사용되고 있습니다. 이는 반응형 웹을 더 빠르고 빠르게 개발할 수 있는 강력한 방법을 제공합니다. 더 쉬운 메커니즘. MVC 프레임워크로서 웹 프런트 엔드 코드를 모델, 뷰 및 컨트롤러의 세 가지 구성 요소로 나눕니다. 따라서 데이터 모델, 애플리케이션 로직(컨트롤러) 및 뷰 표현이 명확하게 구분되어 있어 핵심 개발 영역에 더 쉽게 집중할 수 있습니다. 뷰는 표시할 모델로부터 데이터를 받습니다. 사용자가 키보드를 클릭하거나 입력하여 애플리케이션과 상호 작용하면 컨트롤러는 모델의 데이터를 변경하여 응답합니다. 결국 모델에서 발생한 변경 사항이 뷰에 통보되므로 표시된 콘텐츠를 업데이트할 수 있습니다.

최근에 컴퓨터를 잘 모르는 친구를 위해 작은 애플리케이션을 만들고 있는데 Angular를 사용하여 만들고 싶습니다. 일반적으로 IDE에서 개발할 때 npm start 또는 ngserv를 사용하여 내부 서버를 시작합니다. 그런데 개발한 프로그램을 친구에게 주면 어떻게 친구의 브라우저에서 열 수 있도록 할 수 있나요? 내 프로그램을 배포하기 위해 여기에서 nginx 서버를 선택했습니다.

1. 새로운 Angular 프로그램을 생성합니다

2. Taobao 미러 설치

npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 새로운 프로젝트를 생성합니다. packages

IDE에서 package.json

이 있는 디렉터리에서 cnpm install

6을 실행하고 localhost:4200에서

을 확인합니다. 2.

ng serve 或 npm install

ng 빌드를 팩하면 dist 파일이 생성됩니다. 프로젝트 폴더 안에는 패키지 파일이 있습니다. 3. 배포nginx 공식 웹사이트에서 nginx를 다운로드하세요

dist 폴더에 있는 패키지 파일을 nginx/html로 복사하고 이름을 myProj로 바꿉니다.

npm install -g @angular/cli

nginx.exe를 클릭하여 nginx를 시작하세요

브라우저에 localhost를 입력하세요. :80 프로젝트 보기

이번에는 nginx를 패키징하여 친구에게 보낸 다음 nginx.exe를 클릭하고 브라우저에 localhost:80을 입력하라고 지시하기만 하면 됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript에서 관찰자 패턴을 구현하는 방법

Javascript에서 명시적 변환과 암시적 변환을 구현하는 방법

ReactNative에서 Redux 아키텍처를 사용하는 방법

위 내용은 nginx에 Angular 프로젝트를 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!