個人の技術ブログを作り直しました（３回目）


Netlifyで環境変数の設定方法をまとめました。
Gitで公開したくないAPIキーなどが扱いやすくなりました。

**環境変数にはサイトのビルドの最中だけアクセスできます。**

## 環境変数の設定方法

**Settings > Build & deploy > Environment > Environment variables**と辿ると環境変数の設定まで行けます。

![ev](/images/posts/140/149/environment-variables.png)

Keyに環境変数名、Valueに値を入力して「Save」するだけです。

## Netlifyの環境変数について 

[Environment Variables](https://www.netlify.com/docs/continuous-deployment/?_ga=2.145029364.1758994632.1556165585-2127875035.1550103446#environment-variables)

詳しくは上記のドキュメントをご確認ください。

### 設定済みの環境変数

いくつか設定済みの環境変数があります。

| 環境変数名     | 説明                                                 |
| -------------- | ---------------------------------------------------- |
| REPOSITORY_URL | GitリポジトリのURL                                   |
| BRANCH         | チェックアウトしたブランチ名                         |
| PULL_REQUEST   | プルまたはマージリクエストからビルドしたかどうか     |
| HEAD           | Name of the head branch received from a Git provider |
| COMMIT_REF     | Reference of the commit we’re building.              |
| CONTEXT        | `production`, `deploy-preview`, `branch-deploy`      |
| REVIEW_ID      | プルまたはマージリクエストのID                       |

※ 理解が曖昧だった箇所は英語のままです。

## Teamで共通の環境変数を使う

プラン**Pro**または**Business**では、Teamで共通の環境変数を使うことができます。
個別のサイトで共通の環境変数を指定した場合、そのサイトでは値が上書きされます。

**Starter**では使えません。

![sev](/images/posts/140/149/Shared-environment-variables.png)

Netlifyで環境変数を設定する方法


Netlifyはホスティングサービスの一つで、無料での配信の上限が100GBまでと他に比べて非常に高いことが魅力です。
ただ、現在の通信量がどれほどなのか書いてある場所が分りづらかったので、まとまておきます。

無料枠についてはこちらにまとめています。

[Netlifyの無料枠のまとめ](https://www.suzu6.net/posts/92-netlify-monthly)

## 配信量の見方

追記：2019/04/09

コンソール画面など変更があったようで、配信量の表示箇所も変わりました。
無料枠の個人でもチームの表示となり、料金体系も変わっているようです。

![new-bandwidth](/images/posts/109/new-bandwidth.png)

1. 左上のチーム名をクリック
2. 「Team settings」をクリック
3. メニューの「Billing」から「Plan details」を選ぶ
4. 「Bandwidth」の項に直近30日間の配信量が載っています

追記おわり

---

### 以前のバージョン

ログインしたTOPページに自身のアイコンが右上にあります。
アイコンをクリックして「Account setting」を選びます。

左のメニューから「Billing」を選択すると配信量を表示しているページへたどり着きます。

![bandwidth](/images/posts/109/bandwidth.png)

この図の**Bandwidth**の箇所が配信量です。

Netlifyでホスティングしているサイトの合算が表示されます。
また、期間は直近の過去30日の配信量みたいです。

## １PVあたりの配信量は？

このサイトはGoogleAnalyticsで測定したPV数は、直近の過去30日が約6,000です。
１pvあたりおよそ800kB程でした。

無料枠が100GBあるので、**125,000PVぐらいまでは無料で使えそう**です。
まだまだ、先は長い。

## 無料枠について

無料枠についてはこちらにまとめています。

- [Netlifyの無料枠のまとめ](https://www.suzu6.net/posts/92-netlify-monthly)


その他のホスティングサービスとの比較はこちら

- [静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想](https://www.suzu6.net/posts/55-hosting-service)

Netlifyでネットワーク通信量を確認する方法


**Netlify**は楽にWEBサイトのホスティングができるサービスです。
2018年12月にこのブログを移行してから数か月経ちました。
実際の利用状況と一緒に料金プランについて紹介していきます。

追記：2019/04/09 料金体系の変更を反映しました
追記：2020/01/25 無料枠での利用状況を更新しました
追記：2020/04/14 無料枠での利用状況を更新しました

## Contents

## Netlify

[Netlify](https://www.netlify.com/)

無料枠が大きい！CIも簡単！最初からSSL！使い方がシンプル！なホスティングサービスです。
[Nuxt.js](https://ja.nuxtjs.org/)や[GatsbyJS](https://www.gatsbyjs.org/)などで作った静的サイトや、[Contentful](https://www.contentful.com/)を使ったSPAと相性が良く使いやすいです。

![netlify](/images/posts/55/netlify.png)

[FireBase Hosting](https://firebase.google.com/docs/hosting/?hl=ja)や[GitHub Pages](https://pages.github.com/)が競合です。

個人的には、他のホスティングサービスの中でNetlifyが使いやすいと感じました。

- [静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想](https://www.suzu6.net/posts/55-hosting-service/)

## 無料枠について

**Starter**, **Pro**, **Business**の３つのプランがあります。
Starterが無料枠に当たります。

[料金表](https://www.netlify.com/pricing/)

Starterプランの料金は以下の通りです（2019/04/09時点）

- 無料SSL
- 通常のCDNよりすごいADN（[Application Delivery Network](https://www.netlify.com/features/adn/)）
- 転送量: 100GB/月
- ストレージ: 100GB
- リクエスト制限: 500 requests/分

これに加えて、最近はやりのサーバレスアーキテクチャが使えます。
Firebaseのような**Identity**、**Functions**やシンプルなフォームができる**Forms**もある。
starterプランでは、クレジットカードを登録せず利用できます。

転送量やプランについて具体的な定義は、[こちら](https://www.netlify.com/tos/)に載っています。

## Netlifyの利用量

Netlifyではこのブログだけ運用しています。
上記の無料枠は１つのアカウントの枠なので複数サイトは合算の値になります。

### このブログの利用状況

- pv数：30,000 pv/month
- デプロイ数：１ time/day
- 転送量：868 MB
- 0.5~3MB/page (広告など含む)

![aaa](/images\/posts\/92\/ava.png)

~~写真は少ないので配信だけで6GBも使いません。おそらく、デプロイするときの通信も含まれていると思います。~~

転送量（bandeidth）の定義が変わったかもしれない。
2019/04/09には8,000pv/monthで6GBだった転送量が、2020/01/25には30,000pv/monthで868 MBになっていた。。。。
このブログはNuxtjsで作成しており、アップデートでwebpack周りの圧縮も良くなったとはいえ下がりすぎている。
デプロイの時にnpm installされていた分がキャッシュされているのかも。
AWSなどに移行するモチベーションがさらに下がった。

無料枠上限の100GBには程遠いので心配せずに運用できそうです。

#### 2020/04/14 追記

月4.5万PVで46GBになってました。
2020/01/25にあったバグが直ったようです。

![bandwidth](/images/posts/92/bandwidth.png)

## 料金に関するFAQの要約

[FAQ](https://www.netlify.com/docs/billing-faq/)の要約です。
（誤訳の可能性があります。ご容赦ください。）

### 制限を超えそうになったら

~~制限を超えた場合は無料枠からもProへ自動で移行します。~~

「追加パッケージ」を利用できるようになりました。
制限を超えた場合、チームレベルは上がらず「$20/100GB」の追加料金が加算されます。
その月の請求期間分だけ加算され、翌月に繰り越しはありません。
チームプランを上げるとその分だけ枠が大きくなります。

どのチームレベルも「追加パッケージ」は「$20/100GB」です。
Starterチームで300GB/月を超える場合は、Proに変更した方がお得です。

### チームレベルを下げるには

その月の使用量が下位レベルの制限を超えている場合、ダウングレードできません。
次の請求以降のチームレベルを下げることはできます。

### 使用制限を設定できない

機能を停止するほか、料金に応じて制限をかけることはできない。
制限に近づいたときにアラートメールが来るので、適宜対応してください。

### 請求サイクルについて

Netlifyの請求は、有料プランをチームに追加した最初の日、またはチームが所有するサイトでメータリング機能を使用し始めた日から30日間の周期で実行されます。

これらの点に注意してください。

## こちらもどうぞ

- [静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想](https://www.suzu6.net/posts/55-hosting-service/)
- [Netlifyでリダイレクトの設定をする](http://www.suzu6.net/posts/47-netlify-redirect)


Netlifyの無料枠と料金に関してのまとめ


このブログは`Netlify`というホスティングサービスで動いています。
設定ミスからリダイレクトループを起こしてしまったため、
`ERR_TOO_MANY_REDIRECTS`が起きる事例として書き留めます。

このエラーは初めて見ました。
せっかくなので他の要因についても予習してまとめます。

## 繰り返しリダイレクトで接続できない

2019/01/18 にリダイレクト設定をいじったところ下のようなエラーがでて接続できなくなった。

![error](/images/posts/47/error.png)

どうやらリダイレクトが繰り返し行われたため、エラーが返ってきたらしい。
その時の設定がこちら。

```txt
# Redirect default Netlify subdomain to primary domain
https://www.suzu6.net/* https://www.suzu6.net/:splat 301!
# 記事の一覧へ
/posts           /tags/all 301!
# ブログの移行
/article/*  /posts/:splat  301!
```

2行目。。。まあ、そうなりますよね。
同じドメインの間でリダイレクトしあうようになっていました。

## 原因

```txt
https://suzu6-nuxt-blog.netlify.com/* https://www.suzu6.net/:splat 301!
```

もともと上のようにNetlifyのサブドメインからカスタムドメインへリダイレクトしていました。  
原因は、ブログの内部リンクを一括変換したときにリダイレクトの設定ファイルも変更してしまったことです。
ローカル環境では問題がなく、本番環境へデプロイしてから気づきました。

VSCodeの機能でプロジェクト内全体のファイルに対して変換していた。
対策は、ディレクトリを絞って変換するように気をつける。

## ERR_TOO_MANY_REDIRECTSに関して

せっかくなのでリダイレクトループに関してまとめます。

![error](/images/posts/47/error.png)

`ERR_TOO_MANY_REDIRECTS`が起きた時、**Cookie**を消去するよう指示を受けます。
今回の事例とは異なりますが、多くの要因は**Cookie**に因るようです。

以下、要因をまとめようと調べましたが、なぜCookieがこのエラーを引き起こす要因は特定できませんでした。
対処方法は多く見つかります。

[Amazonのページ](https://saketorock.com/chrome-redirects/)や、[誤ったブラウザ拡張機能が原因である可能性](https://www.drivereasy.com/knowledge/how-to-fix-err-too-many-redirects-error/)での報告もあるようです。

### 解決方法

ブラウザの Cookieの削除、ページの履歴の削除を行うことで問題が解消します。
Cookieの削除う方法については、**Cookieの削除方法**で検索をすることで多くの削除方法が見つかりますので、ここでの説明方法は省略します

### それでも解消しないときは？

サイトのリダイレクトの不具合分析には、無料のウェブツール
[Redirect Checker tool](http://www.redirect-checker.org/index.php)
が使えます。リダイレクトのログを追うことができるため、原因の推定に役立ちます。

また、こちらの[対策事例](https://blog.s-giken.net/96.html)を参照してください。

## まとめ

リダイレクトループするとエラーになる。
一括変換はフォルダを指定して影響範囲を制限する。

[Netlifyでのリダイレクトの設定方法](https://www.suzu6.net/posts/47-netlify-redirect)もどうぞ。

## 参考

[リダイレクトループが原因で「ERR_TOO_MANY_REDIRECTS」「このページを表示できません」が出たときの対策12事例＋α](https://blog.s-giken.net/96.html)

設定をミスしてリダイレクトループが起きた話 | Netlify

静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想


このブログの構成を`Flask` + `AWS Lambda`から`Nuxt` + `Netlify`へ移行しました。
その際に記事のURLも変更したため、過去のURLからリダイレクト設定を行います。

## リダイレクトの設定

Netlifyでは公開サイトのルートに`_redirects`を置き、その中にリダイレクトの設定を書き込みます。
今回の変更では記事のURLを`/article/{記事名}` から `/posts/{記事名}` に変更したため以下のようにしています。  

```_redirects
# 記事の一覧へ
/posts           /tags/all 301!
# ブログの移行
/article/*  /posts/:splat  301!
```

`/:splat`はアスタリスクの文字と一致することを表します。

httpのステータスコードは301（永久的なリダイレクト）としてます。  
常にリダイレクトするため`!`をつけます。
`!`がない場合は、ファイルが実際に存在するときパスはそのファイルの内容をレンダリングするようです。

### その他の使い方

今回のブログの移行は変更箇所が少ないため2行で終わりました。  

他にも便利な使い方があるのでいくつかまとめておきます。
以下、[公式のドキュメント](https://www.netlify.com/docs/redirects/)を参考にまとめました。

## 基本的な書き方

```sh
# Redirect with a 301
/home         /              301

# Redirect with a 302
/my-redirect  /              302

# Rewrite a path
/pass-through /index.html    200

# Show a custom 404 for this path
/ecommerce    /store-closed  404
```

`/`はサイトのルート、`#`はコメントです。

## スプラットとプレースホルダ

```sh
/news/*  /blog/:splat
```
アスタリスクとスプラットは、`/`の構造も保持します。  
`/news/2004/01/10/my-story`では`/blog/2004/01/10/my-story`へリダイレクトします。

```sh
/news/:year/:month/:date/:slug  /blog/:year/:month/:date/:slug
```

また、このように`プレースホルダ`も利用することができます。

## 順序について

```python
# This will redirect /jobs/customer-ninja-rockstar
/jobs/customer-ninja-rockstar  /careers/support-engineer

# This will redirect all paths under /jobs except the path above
/jobs/*                        /careers/:splat

# This will never trigger, because the rule above will trigger first
/jobs/outdated-job-link        /careers/position-filled
```

マッチングは上から逐次行うようです。  
３つ目は`/jobs/* `の後ろにあるため`/careers/outdated-job-link`へのリダイレクトしてしまいます。


## クエリパラメータ

クエリパラメータを使用することができます。

```sh
/store id=:id  /blog/:id  301

/articles id=:id tag=:tag /posts/:tag/:id 301
```
クエリパラメータはスペースで指定します。

<font color='red'>※ リダイレクト時にクエリパラメータは渡されません。よって、パラメータを含んだパスを設定するようにした方が良いです。</font>

```python
# これはできない。
/articles id=:id tag=:tag /posts  id=:id tag=:tag 301
```

## 繰り返しリダイレクトで接続できない

2019/01/18 にリダイレクト設定をいじったところ下のようなエラーがでて接続できなくなった。

![error](/images/posts/47/error.png)

詳細は[こちら](https://www.suzu6.net/posts/62-redirect-loop)

## 参考

- [Netlfy Redirect & Rewrite Rules](https://www.netlify.com/docs/redirects/)
- [Netlifyを独自ドメインで使うときにやっておくべきリダイレクトの設定 diwao日記](https://diwao.com/2017/07/netlify-redirect-settings-for-original-domain.html)