無料で使える静的サイトホスティングサーバーNetlifyにAngularをデプロイする

NetlifyにAngularのアプリケーションをデプロイする方法を説明します。

まとめる必要が無いぐらい簡単でしたが、まとめます。

Angularの準備

Angularのチュートリアルを参考に、ひな型となるアプリを作成します。

https://angular.jp/tutorial/toh-pt0

npmとnodeのアップデート

まずnpmとnodeを最新にしておきます。

npmのアップデートは以下のコマンド。

npm update -g npm

nodeはWindowsの場合は最新のインストーラーを入手してアップデートします。

https://nodejs.org/ja/

それ以外はnをインストールしてアップデートします。

Angular CLIをインストール

以下のコマンドでAngular CLIをインストールします。

npm install -g @angular/cli

Angularアプリケーションを作成

ローカル側でAngularのプロジェクトを生成します。

ng new アプリ名

リポジトリの準備

GitHub、GitLab、BitBucketいずれかでリポジトリを作成します。

私は無料でプライベートリポジトリが使いたいのでBitBucketを使いました。

https://bitbucket.org

リポジトリ名を決めて、「リポジトリの作成」ボタンを押します。

リポジトリを他の人に見られたくなければ「これは非公開リポジトリです
」にチェックを入れておきます。

「READMEを含めますか?」は「No」にしておきます。

バージョン管理システムはデフォルトの「Git」でOKです。

リポジトリにAngularアプリを入れる

ローカルに作成したAngularアプリのディレクトリに移動し、gitリポジトリにpushします。

リポジトリを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サイトを構築するために使えるサービスは以下にまとめています。

Webサイト構築に使った無料サービスまとめ

料金は?

複数のユーザーで権限を分けて利用したい場合は有料となります。

個人で開発するなら無料枠でじゅうぶんですね。

 

Netlifyの使い方でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*