Zenn
💻

Angular8アプリをNetlifyで無料でホスティングしてみよう

2020/02/12に公開
Angular
JavaScript
Netlify
TypeScript
tech

こんにちは、たつきちです。

エンジニア歴12年ぐらいで今はベンチャー企業のCTOをしています。

この記事では、Angularのアプリを最近流行りのNetlifyを使って無料でホスティングする方法について解説していきます。

Angularのバージョンは8を例に説明します。

ぜひ最後までお付き合いください。

Netlifyとは

Netlify （「ネットリファイ」と読むようです）は、静的サイトを無料からホスティングできるWebサービスです。

GitHubリポジトリと連携しておけば、リポジトリが更新されたタイミングで自動でビルド＆デプロイしてくれるので、GitHub Pagesをもっと便利にした感じのサービスと言うと分かりやすいかもしれませんね。

Netlifyにサイトを登録する

キャプチャを並べながら実際の手順を説明していきます。

まずは、

https://app.netlify.com/signup

にアクセスしてアカウントを登録しましょう。GitHubアカウント等でサインアップ可能です。

GitHubアカウント等でサインアップ

サインアップに成功すると、このような「サイト一覧画面」になります。

Netlifyのサイト一覧画面

初めは1つもサイトがないので、右上の New site from Git からサイトを追加します。

ちなみに、ユーザー（チーム）名はデフォルトだと Takashi Kanemoto's team のような名前になりますが、メニュー右端の Team Settings から Edit team information へ行くとチーム名を変更できます。

New site from Git をクリックすると以下のような画面になりますので、連携したいサービスを選択します。

Netlifyのサイト作成画面

さらに、連携したいリポジトリを、リポジトリ名の一部で検索するなどして見つけ、選択します。

連携するリポジトリを選択

選択すると以下のような画面になり、デプロイとビルドの設定ができます。

  • どのブランチを自動デプロイするか
  • ビルドコマンドは何か
  • 公開ディレクトリのパスはどこか

デプロイとビルドの設定

Angularアプリの場合なら、

  • ビルドコマンド： ng build
  • 公開ディレクトリ： dist/{app-name}

とう感じになるかと思います。

入力したら、 Deploy site をクリックするとサイトの追加は完了です。（この辺りの設定は後から変更もできます👌）

作成されたサイトを選択すると、サイト概要画面が見られます。

サイト概要画面

デプロイの完了を待って、上図の赤枠の部分に表示されている公開用URLにアクセスすれば、サイトが閲覧できるかと思います🙌

サイト名・URLを分かりやすいものに変更する

ところで、作成直後はサイト名が複雑な文字列になっているので、分かりやすい名前に変更しておきましょう。（サイト名がそのままURLのサブドメインになります）

Site settings をクリックします。（または、メニュー右端の Settings からでも同じ画面に行けます）

サイト概要画面

Site information ブロックの Change site name をクリックします。

Change site nameを選択

好きな名前に変更しましょう。

サイト名変更画面

index.htmlへのリダイレクトを設定する

AngularアプリのようなSPAの場合、ルートパス（ /index.html ）以外へのアクセスを すべてルートパスにリダイレクトしてあげる必要があります。

今のままだと、

  • / は開ける
  • / から画面遷移した場合は他のページも開ける
  • でも / 以外のURLに直接アクセスすると404になる

という動作になってしまいます。

というわけで、リダイレクトの設定をしてあげましょう。

Netlifyでは、ドキュメントルートに _redirects という特殊な設定ファイルを置いておくことによって 自由にリダイレクトを設定できる ようになっています。

今回のような場合なら、ドキュメントルートに

/*   /index.html   200

という内容で _redirects というテキストファイルを設置すればよいです。

Angularでこれを実現するには、 _redirects ファイルをアセットとしてドキュメントルートに配置してくれるように angular.json を設定する必要があります。

具体的には以下のようにすればOKです。

  • src/_redirects を作成
  • angular.json の build.assets に "src/_redirects" を追加
"assets": [
  "src/favicon.ico",
- "src/assets"
+ "src/assets",
+ "src/_redirects"
],

これをGitHubにpushしてデプロイしてもらえば対応完了です👍

まとめ

  • Netlifyは無料でSPAのホスティングができてめっちゃ便利！
  • SPAの場合は _redirects ファイルの設定を忘れずに！

では、よきNetlifyライフを！

GitHubで編集を提案

Discussion