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

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

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

Angularの準備

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

Angular 日本語ドキュメンテーション

angular.jp

npmとnodeのアップデート

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

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

npm update -g npm

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

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

それ以外は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を使いました。

Bitbucket | The Git solution for professional teams

Collaborate on code with inline comments and pull requests. Manage and share your Git repositories to build and ship software, as a team.

bitbucket.org

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

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

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

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

Game Tweet RankigというWebサイトを作りまして、自動更新で運用中です。ドメイン代以外は無料で公開することができたので、参考まで利用しているサービスをまとめます。

mrkmyki.com

料金は？

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

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

Netlifyの使い方でした。