NetlifyにAngularのアプリケーションをデプロイする方法を説明します。
まとめる必要が無いぐらい簡単でしたが、まとめます。
この記事の内容
Angularの準備
Angularのチュートリアルを参考に、ひな型となるアプリを作成します。
npmとnodeのアップデート
まずnpmとnodeを最新にしておきます。
npmのアップデートは以下のコマンド。
npm update -g npm
nodeはWindowsの場合は最新のインストーラーを入手してアップデートします。

それ以外はnをインストールしてアップデートします。
> npm install -g n > n –stable > n –latest > n latest
Angular CLIをインストール
以下のコマンドでAngular CLIをインストールします。
npm install -g @angular/cli
Angularアプリケーションを作成
ローカル側でAngularのプロジェクトを生成します。
ng new アプリ名
リポジトリの準備
GitHub、GitLab、BitBucketいずれかでリポジトリを作成します。
私は無料でプライベートリポジトリが使いたいのでBitBucketを使いました。

リポジトリ名を決めて、「リポジトリの作成」ボタンを押します。
リポジトリを他の人に見られたくなければ「これは非公開リポジトリです
」にチェックを入れておきます。
「READMEを含めますか?」は「No」にしておきます。
バージョン管理システムはデフォルトの「Git」でOKです。
リポジトリにAngularアプリを入れる
ローカルに作成したAngularアプリのディレクトリに移動し、gitリポジトリにpushします。
cd アプリ名 git remote add origin https://*****@bitbucket.org/*****/リポジトリ名.git git push -u origin master
リポジトリをNetlifyにデプロイする
Netlifyのダッシュボードで、「New site from git」を選択します。
BitBucketを選びます。
BitBucketとアプリ連携すると、リポジトリの一覧が出てきます。
デプロイしたいアプリのリポジトリを選びます。
Deploy settingsで以下を入力します。
Production branch: master
Build command: ng build –prod
Publish directory: dist/アプリ名
Deploy siteボタンを押して少し待つと、デプロイされたサイトのURLが表示されます。
URLをクリックすると、デプロイされたサイトが見れます。
簡単でした。
Netlifyとは?
Netlifyの読み方は「ネトリファイ」
静的サイト用のWebホスティングサービスです。
無料で利用できる事から人気があります。
サーバーサイドでプログラムを実行する事はできません。
無料でサーバーアプリやデータベースを使いたい場合はHeroku等のサービスを利用しましょう。
無料でWebサイトを構築するために使えるサービスは以下にまとめています。

料金は?
複数のユーザーで権限を分けて利用したい場合は有料となります。
個人で開発するなら無料枠でじゅうぶんですね。
Netlifyの使い方でした。
コメント/ピンバック
Thank you for the wonderful post
This is truly helpful, thanks.