How To Deploy an Angular Application to GitHub

이 문서에서는 GitHub에 Angular 앱을 배포하는 단계별 접근 방식을 따릅니다. CLI를 사용하여 프로젝트를 생성한 다음 GitHub에 배포 Angular. 시작하겠습니다.

Step 1

CLI를 사용하여 프로젝트를 생성 Angular. 다음 명령을 실행합니다.

ng new demo

Angular CLI가 컴퓨터에 전역으로 설치되어 있는지 확인해야 합니다.

Step 2

디렉토리를 데모로 변경하고 VS Code 또는 원하는 다른 IDE에서 프로젝트를 엽니다.  아래 목록과 같이 AppComponent를 수정하여 두 숫자를 더하고, 빼고, 곱하고, 나눕니다.

export class AppComponent {
    title = 'Calculator App';
    num1: number;
    num2: number;
    result: number;
    add() {
        this.result = this.num1 + this.num2;
    }
    substract() {
        this.result = this.num1 - this.num2;
    }
    multiply() {
        this.result = this.num1 * this.num2;
    }
    divide() {
        this.result = this.num1 % this.num2;
    }
 
}

여기에서 볼 수 있듯이 AppComponent는 매우 간단하며 기본 계산기 작업을 수행하는 코드가 포함되어 있습니다.

그런 다음 AppComponent 템플릿을 수정합니다

<div class="container">
    <br />
    <div class="row">
        <h1>
            Welcome to {{ title }}!
        </h1>
    </div>
    <br />
    <div class="row">
        <div class="col-md-6">
            <input type="number" [(ngModel)]="num1" placeholder="Enter Number 1" class="form-control" />
        </div>
        <div class="col-md-6">
            <input type="number" [(ngModel)]="num2" placeholder="Enter Number 2" class="form-control" />
        </div>
    </div>
    <br />
    <div class="row text-center">
        <div class="col-md-3">
            <button class="btn btn-info" (click)='add()'>Add</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-info" (click)='substract()'>Substract</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-info" (click)='multiply()'>Multiply</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-info" (click)='divide()'>Divide</button>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-5 col-md-offset-4">
            <h2>Result = {{result}} </h2>
        </div>
    </div>
</div>

구성 요소 클래스 템플릿과 마찬가지로 매우 간단합니다. 다음을 사용합니다.

• 입력 컨트롤과 속성 간의 양방향 데이터 바인딩을 위한 ngModel
• Event Binding 버튼을 클릭하면 함수를 호출하기 위한 바인딩
• 결과를 표시하는 보간

Step 3

이 애플리케이션을 GitHub에 게시하기 전에 로컬에서 실행해 보겠습니다. 로컬로 실행하려면 다음 명령을 실행합니다

ng serve

애플리케이션은 아래 이미지와 같이 localhost의 기본 포트 4200에서 실행되어야 합니다.

Step 4

Angular 애플리케이션을 배포하려면 먼저 GitHub에 리포지토리를 만듭니다. 그렇게 하려면 https://github.com/로 이동하여 New Repository를 클릭합니다.  " demo9 "라는 저장소를 만들고 있습니다.

리포지토리를 만든 후 git 명령을 사용하여 이 리포지토리를 로컬 프로젝트에 원격으로 추가합니다. 해당 실행 명령에 대해 다음과 같이 :

git remote add origin https://github.com/USERNAME/PROJECT_NAME.git

사용자 이름과 프로젝트 이름을 변경하는 것을 잊지 마십시오. 원격 저장소가 추가되면 다음 명령을 사용하여 확인할 수 있습니다.

git remote -v

출력으로 아래와 같이 나열된 저장소를 가져와야 합니다.

Step 5

Angular 애플리케이션을 GitHub에 배포하려면 먼저 angular-cli-ghpages를 전역적으로 설치해야 합니다.

npm install -g angular-cli-ghpages

해당 ghpages를 설치한 후 Angular CLI를 사용하여 프로젝트를 빌드합니다. 해당 실행 명령의 경우 아래와 같이 다음을 수행합니다.

ng build --prod --base-href https://debugmodedotnet.github.io/demo9/

GitHub 사용자 이름 및 리포지토리 이름을 사용하고 있는지 확인합니다.  명령을 성공적으로 실행한 후 아래 이미지와 같이 bundle.js 생성해야 합니다.

마지막 단계로 ngh –no-silent 명령을 실행하여 아래 이미지와 같이 애플리케이션을 게시합니다.

게시에 성공하면 https://<username>.github.io/<reponame>/로 이동하여 애플리케이션으로 이동합니다.  이 작업은 Angular 애플리케이션을 GitHub에 배포하기 위해 수행해야 하는 전부입니다.

이 게시물이 마음에 드시나요?

이 게시물이 마음에 들면 공유해주세요. 또한Infragistics Ignite UI for Angular Components를 체크아웃하지 않으셨다면 체크아웃하시기 바랍니다! 빠른 웹 앱을 더 빠르게 코딩하는 데 도움이 되는 30+ 재료 기반 Angular 구성 요소가 있습니다.