AngularアプリケーションをGitHubにデプロイする方法

この記事では、Angularアプリを GitHub にデプロイするための段階的なアプローチに従います。CLI を使用してプロジェクトを作成しAngularそれを GitHub にデプロイします。始めましょう。

Step 1

CLI を使用してプロジェクトを作成するAngular。次のコマンドを実行します。

ng new demo

Angular CLI がマシンにグローバルにインストールされていることを確認する必要があります。

Step 2

ディレクトリをデモに変更し、VS Codeまたはその他のIDEでプロジェクトを開きます。 以下のリストに示すように、AppComponent を変更して 2 つの数値を加算、減算、乗算、除算します。

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 入力コントロールとプロパティ間の双方向データバインディング
• ボタンのクリック時に関数を呼び出すイベントバインディング
• 結果を表示するための補間

Step 3

このアプリケーションを GitHub に公開する前に、ローカルで実行しましょう。ローカルで実行するには、コマンド

ng serve

アプリケーションは、次の図に示すように、localhost の既定のポート 4200 で実行する必要があります。

Step 4

アプリケーションAngularデプロイするには、まず GitHub にリポジトリを作成します。これを行うには、https://github.com/に移動し、[新しいリポジトリ]をクリックします。 「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コンポーネントがあり、高速なWebアプリをより迅速にコーディングするのに役立ちます。