静的webホスティング比較

# 比較対象サービス

今回は静的webホスティングサービスの選択肢として頻繁に目にする以下のサービスについての比較を行います。

* **Netlify**
* **AWS Amplify console( ≒ s3 + cloudfront )**
* **firebase hosting**
* **Github Pages**
* **Azure Static WebApps**
(+Vercel。気が向いたら詳細追記します)

# 結論
`Github Pages`または`Vercel`が良さそう

後述しますが`Netlify`はレスポンス性能の観点から敬遠した方が良いかと思われます(Pro版は解消されているのやも。ドキュメント読むに)

## 比較基準

「**個人ブログ、サービスのホスティング**」に焦点を当てて評価します。

評価における優先順位は
コスパ/レスポンス速度 > 堅牢性/可用性

とします

## 評価方法
* 機能(コストや無料枠）
* デプロイ ~ CIパイプライン構築までの手軽さ
* レスポンス

を各々評価します。

計測は[Nuxt](https://ja.nuxtjs.org/) + [Contentful](https://www.contentful.com/)で作ったブログアプリケーションをデプロイした上でapach bench + lighthoueにより計測します


## 基本性能比較

| プロバイダー          | 自動デプロイ | 帯域幅(無料) | CDN  | ストレージ(無料) | プレビュー環境 
| --------------------- | :----------- | ------------ | ---- | ---------------- | -------------- 
| Azure Static Web Apps | ○         | 100GB        | x | 0.5GB            | ○          
| Amplify Console       | ○        | 0            | ○ | 15GB             | ○           
| Firebase Hosting      | ○         | 10GB         | ○ | 1GB              | ○          
| Netlify               | ○         | 100GB        | ○ | 10GB             | ○           
| Github Pages          | x         | 100GB        | ○ | 1GB              | x           

カスタムドメイン、SSL/TLS対応は当たり前の様に付いていたので除外しました。

注目したいポイントは「帯域幅、CDN、自動デプロイの有無」あたりでしょうか。

パッと見`Netlify`が抜けていて、継いで`Static Web Apps`、`Github Pages`が良い感じに見えますね。

Static Web Appsに関してはCDNが無い点、ストレージ要領が少ない点が気になりますが

* 近くのエッジロケーションから配信している
* 個人開発SPAアプリケーションのビルド後アセットが0.5GB超える事まあ無い（はず）

のでそこまで大きなマイナスには感じられませんでした。

同様に`Github Pages`も自動のCICDパイプラインこそサポートされていませんが、`Github Actions`と併用すれば解決する為大きなマイナス要素ではないと考えられます


## レスポンス比較
最後に各サービスのレスポンスを比較します。比較には`Lighthouse`と`apache bench`を使います

| プロバイダー          | Light House Performance | AB (time per request) | AB(Transfer rate)  | 
| --------------------- | ----------------------- | --------------------- | ------------------ | 
| Azure Static Web Apps | 97                      | 94.133                | 30.77 [Kbytes/sec] | 
| Amplify Console       | 98                      | 55.795                | 55.38              | 
| Firebase Hosting      | 99                      | 114.294               | 26.75              | 
| Netlify               | 90                      | 157.934               | 17.94              | 
| Github Pages          | 94                      | 65.634                | 51.17              | 

| プロバイダー          | AB (time per request) | AB(Transfer rate)  | 
| --------------------- | --------------------- | ------------------ | 
| Azure Static Web Apps | 94.133                | 30.77 [Kbytes/sec] | 
| Amplify Console       | 55.795                | 55.38              | 
| Firebase Hosting      | 114.294               | 26.75              | 
| Netlify               | 157.934               | 17.94              | 
| Github Pages          | 94                      | 65.634                | 51.17              | 

`Github Pages`のlighthouseパフォーマンスがabと比較して悪いのは殆どキャッシュ設定してないからだと思います。まあLighthouseは多少ブレるので目安程度にお願いします

目立つポイントとしては

* `Amplify Console`が最高値で`Netlify`が最低値
* CDNが懸念点だった`Azure Static Web Apps`の性能が2番手 ~ 3番手

あたりでしょうか。

特に`Netlify`の性能の悪さは以外でした。スループットも抜群に悪いです。

調べたところ[Netlifyは遅い](https://www.yuuniworks.com/blog/2020-09-14-netlify-is-slow/)で言及されていて

> Netlify の無料プランの場合、CDN は世界で 8 箇所しかなく、日本は含まれていない

らしいです。それにしても遅い気がする。

性能を追求したいなら`Amplify Console`、`Github Pages`が良さそうですね。

## まとめ
**基本的にGithub Pages | Vercel**がお勧めです。性能を求めるなら**aws**

また、VScodeユーザーであれば`Static Web Apps`も良さげ。機能面は網羅的にサポートされていますし、何より開発体験が良い感じ

修正等御座いましたら是非教えていただけると幸いです！


## おまけ: デプロイ/CICDの比較
各サービスの特徴、デプロイフローを軽くさらっていきます

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

* 100GBの無料帯域幅、10GBのストレージ
* CDN標準搭載
* Lambdaをラップしたサーバレス環境の構築
* シンプルなUI

更に有料プランに加入すれば

* adn(cdnより凄いらしい)
* 10倍の帯域幅/ストレージ
* 認証機能やフォーム機能

が使える様になります。**安い！上手い！早い！**みたいなサービス

### デプロイフロー

[Get Started](https://docs.netlify.com/cli/get-started/)

```bash
$ npm install netlify-cli -g
$ netlify login
$ netlify init
$ netlify deploy
$ netlify deploy --prod
```

`netlify deploy`でプレビュー環境が作成され、`deploy --prod`で本番環境に以降します

コマンドも直感的で分かり安いですよね。

GUIの場合も`New site from Git`ボタンからスルスル設定できてしまいます

github等のレポジトリーと連携させる事で自動でCICDパイプラインも作ってくれます

これ以上省くところがないくらいシンプルで良いですね。

## Amplify console
awsで静的webサービスをホスティングする一般的なワークフローをAmplifyを使って簡略化してくれるサービスです。

* s3 + cloudfrontによるホスティング
* githubやcode commitと連携させたCICDパイプラインの作成
* プルリクエストのプレビュー環境
* パスワード保護
* ワンクリックのカスタムドメイン設定

等の機能がサポートされています。

料金体系は

![スクリーンショット 2021-09-07 14.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431769/ac212c5d-5e6a-f5da-f9e4-41960efc37be.png)


１年間の無料枠の後、従量課金に代わり転送量は100GB当たり1200円前後掛かってしまうみたいですね。ただ実際使っていた感覚としては幸か不幸か3ドル前後の範囲に収まるんじゃないかな〜と思います（）

### デプロイフロー
[GET STARTED](https://aws.amazon.com/jp/amplify/getting-started/)

こちらの記事([AngularのアプリをAmplifyでホスティングしてみた](https://dev.classmethod.jp/articles/amplify-add-hosting-with-angular-app/))が凄く参考になりました

まずプロジェクトを作成します。GET STARTEDのHost Your Static Web Appをクリックすれば自動で飛びます

![スクリーンショット 2021-09-07 14.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431769/5cfb41df-b682-a2d6-2b49-4be9d26c2a73.png)

好きなプロバイダーを選んだら指示に従いレポジトリとブランチを選択した後ビルド設定を行います

![スクリーンショット 2021-09-04 18.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431769/205bb3a1-f677-9bdc-3571-dbb859ebc3af.png)


`amplify.yaml`はamplifyの設定ファイルでビルドコマンド等はこのファイルで定義します。さっそく書き換えたい所ですが、初回デプロイでは編集できない様です。一旦スルーしてそのままデプロイします。

2~3分待つとデプロイが完了しエンドポイントにアクセス出来る様になります。が、まだ`Access Denied`の画面が表示されるだけなのでメニューのビルド設定から先ほど言及した`amplify.yaml`を書き換えます

![スクリーンショット 2021-09-07 14.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431769/f0be3932-ec7b-80f8-5173-380fd7404377.png)


再度デプロイしてデプロイフローは完了です。

`cloud front + s3 + cicdパイプライン`が自動構築されている！と考えると優秀ですが、**個人開発アプリのホスティング**という用途には適していないですね。多機能さがあだになってる気がします。cliで完結出来ない、デプロイが長過ぎる、無料枠が限定的　な点も不満です。

「静的ホスティングサービスを使いたい」ではなく「awsのサービスを使いたい」場合には滅茶苦茶便利なサービスだと思います。

## github pages
> GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです

Netlifyと同じくく`Let's Encrypt`を使ったssl/tlsに対応しており、cdnも無料で使えます。

### デプロイフロー
[Deploy Nuxt on GitHub Pages](https://nuxtjs.org/docs/2.x/deployment/github-pages)

github pagesのエンドポイントは`http://<username>.github.io/<repository-name>`の形式になるらしく、カスタムドメインを使わない場合は`nuxt.config.js`に以下の設定を加筆する必要があるみたいです。


```js
export default {
  target: 'static',
  router: {
    base: '/<repository-name>/'
  }
}
```

後はデプロイします

```bash
npm install push-dir --save-dev
```

```json
"scripts": {
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
}
```
これで`origin/gh-pages`にdist以下がデプロイされます。githubレポジトリーのPagesからエンドポイントが参照できるはずです。

次にcicdパイプラインの構築ですが、`github actions`を使う事で簡単に設定する事ができます。

githubリポジトリの`Actions`をクリックし`.github/workflows/xx.yaml`を編集しましょう

```yaml
name: cd

on:
  push:
    branches:
      - master

jobs:
  cd:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Install dependencies
        run: npm install

      - name: build && export
        run: npm run build && npm run export

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
```

`peaceiris/actions-gh-pages@v3`がgithub pagesにデプロイする為のactionで、`publish-dir`に設定したdirectory(nuxtなら`dist`)を`gh-pages`ブランチにデプロイしてくれます。

後はcommitして終わりです。

自動のCICDはサポートされていませんが、`github actions`との連携が簡単なので気になりませんでした。全てがgithub上で完結する点も管理が楽で良い感じです。

ただカスタムドメインを使わない場合はroutingにbase urlを設定する必要が有ったり、yaml書く面倒までは省けないという事でnetlifyには一歩劣るかな〜

## firebase hosting
GCPのfirebaseが提供するホスティング機能です。デフォルトでCDNが搭載されています。


### デプロイフロー

```bash
$ firebase login
$ firebase init

...

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
? File dist/index.html already exists. Overwrite? No

...

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm install && npm run build && npm run export
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master

✔  Firebase initialization complete!
```

これでプロジェクトとcicdパイプラインが作成されます。後はdeployするだけです。

```bash
$ firebase deploy --only hosting
```
ホスティング完了です。CICDパイプライン整備されている為当然`git push origin master`でも更新できます。

又、プレビュー環境も用意されていてpull requestを出すと自動で一時的なプレビュー環境を立ち上げてくれます。cliからも以下のコマンドでプレビュー環境を作成する事ができます。

```bash
$ firebase hosting:channel:deploy preview
```


cliで完結する点、cicdの自動生成、プレビュー環境と文句なしです。netlifyと同じくらいデプロイしやすいです。コンソール画面はこっちの方が優れてるかな？


## Azure Static Web Apps
最近GAとなったAzureの静的webホスティングサービス

* GitHub Actions又はAzure DevOpsを使ったCICDパイプラインの自動構築
* Azure Functionsと連携する事でサーバレスなバックエンドAPIを利用可能
* 無料SSL証明
* Firebase的なルーティング規制
* swa cliによるローカル開発
* カスタム認証機能

と、機能面で言えばここまで紹介した他プロバイダーと同程度のサービスを提供している様に思います。特にfirebaseとの類似点が多いな〜って印象です。

マイナス点としてはCDNが存在しない点ですが、クライアント近くのエッジから配信されるみたいなので気にならないと思います。後述しますが普通に早いです。


### デプロイフロー
[クイックスタート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/getting-started?tabs=vanilla-javascript)

[Azure Static Web Apps でのデプロイ](https://ja.nuxtjs.org/docs/2.x/deployment/deployment-azure-static-web-apps)

ドキュメント的に推しっぽいVscodeの拡張機能を使ってみます。nuxtの方にも既にstatic web apps用のクイックスタートが用意されていました。

まずデプロイ準備として`package.json`の`build`コマンドにビルドに必要なコマンドをまとめます。どうやらstatic web appsはデフォルトで`npm run build`コマンドを実行するらしく、他のコマンドを使う際は別途設定が必要になるみたいです。

```json
"scripts": {
  "build": "NODE_ENV=production nuxt build && NODE_ENV=production nuxt export",
}
```

次にvscodeの拡張機能を使います。

サイドバーにAzureのロゴがない場合はコマンドパレットから`azure static web apps`と打ち込んでinstallしてください。

ロゴが表示されたらクイックスタート通りazureロゴ => +ボタンを押します。

![スクリーンショット 2021-09-06 21.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431769/93a1d673-3b4c-eae9-ce35-38e6153f9b3e.png)


すると**アプリ名**、**location**、**framework**、**root path**、**ビルド先のフォルダ名**を聞かれるのでそれぞれ入力。frameworkに`nuxt`がなかったので私の場合は`vue`を選択しておきました。

これだけでリソース作成から`github actions`のyamlファイルの作成まで終わってるみたいです。少し待つとデプロイが終わり、リソースを右クリック => browse siteでエンドポイントが表示されます。

vscodeユーザーなら対話型のcliより楽にデプロイ出来ますね

### デプロイフローまとめ
`Netlify`、　`Static Web Apps`、`Firebase`がかなりお手軽でした。特にStatic Web AppsのVscode拡張機能は良い差別化だと思います。