静的サイトをホスティングしてみる

# はじめに
この記事は[LIFULL Advent Calendar 2019](https://qiita.com/advent-calendar/2019/lifull)の20日目の記事です。
今更ながら、ふと静的サイトをホスティングしてみたくなったので、いくつかの方法で試してみました。

# 静的サイトホスティング
今回は以下のようなサンプルアプリケーションのホスティングを行っていきます。
詳しくは[Nuxt.jsの公式ドキュメント](https://ja.nuxtjs.org/guide/installation/)をご覧ください。

```bash
$ yarn create nuxt-app hosting_sample
```

以下二つのサービスを試します。

* [GitHub Pages](https://pages.github.com/)
* [Netlify](https://www.netlify.com/)

## GitHub Pages
ご存知の方も多いかと思いますが、GitHubには[GitHub Pages](https://pages.github.com/)という静的ホスティングサービスがあります。

### 簡単ホスティング
まずはサンプルアプリケーションをホスティングする前に、簡単なファイルでホスティングを試してみましょう。[公式ドキュメント](https://pages.github.com/)にしたがって静的サイトの公開を行ってみます。

#### 1. リポジトリを作成
`<username>.github.io`という名前でリポジトリを作成します。
(GitHub Freeユーザの場合は、PublicリポジトリでないとGitHub Pagesを利用できないのでご注意ください。)
<img width="1439" alt="img1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/340bd60d-6e11-bf0e-fcb1-c89d9b430723.png">

#### 2. デプロイするファイルを作成する
デプロイするファイルを適当に作成し、先ほどのリポジトリにpushします。

```bash
$ echo 'Hello World' > index.html
$ git add index.html
$ git commit -m 'Initial commit'
$ git push origin master
```

#### 3. 確認
以上でホスティング完了です。
`https://<username>.github.io`にアクセスすると先ほどのファイルがホスティングされていることが確認できます。
<img width="1439" alt="img2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/44b7b2d9-5f89-e2f4-e83a-eb45722f0364.png">

### ビルドプロセスを利用する
次にサンプルアプリケーションのホスティングを行なってみます。
しかし、GitHub Pages自体にはビルド機能はないため、ただ先ほどと同様にサンプルアプリケーションをpushしただけでは、もちろんnuxtアプリケーションを閲覧することはできません。
<img width="1439" alt="img10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/ce000594-a0a6-4028-a99a-0c6bf9099691.png">

サンプルアプリケーションをホスティングするためには、`yarn generate`コマンドでファイルをビルドする必要があります。今回は、GitHub Actionsを利用してビルドを行なってみます。GitHub Pagesのデプロイには、[peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages)を使用します。

#### 1. ビルド用のブランチを作成する
現在の設定ではmasterブランチの内容がホスティングされるため、ビルドのためのブランチを別に作成し、それをデフォルトブランチとします。今回は以下のようにしました。

* master: デプロイ用ブランチ
* develop: ビルド用ブランチ
<img width="994" alt="img11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/90f2301b-4af9-511a-bef5-dfd27d04ea9e.png">

#### 2. デプロイ周りのキーの設定を行う
[peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages)のドキュメントを参考に、デプロイ用の以下2つのキーをリポジトリに設定します。

* Deploy keys
* Secrets

#### 3. GitHub Actions用の設定ファイルを追加する
以下のような設定ファイルをdevelopブランチに追加し、pushします。

```yml:.github/workflows/gh-pages.yml
name: github pages

on:
  push:
    branches:
    - develop

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v2

    - uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Get yarn cache
      id: yarn-cache
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - uses: actions/cache@v1
      with:
        path: ${{ steps.yarn-cache.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
        restore-keys: |
          ${{ runner.os }}-yarn-

    - name: Install packages
      run: yarn install

    - name: Build files
      run: yarn generate

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v2
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: master
        PUBLISH_DIR: ./dist
```

#### 4. 確認
設定ファイルをpushするとすぐにGitHub Actionsのビルドが開始されます。
<img width="1421" alt="img12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/23a268d5-1302-0f3d-2c43-78613b200da3.png">

ビルドが完了すると、無事にデプロイされていることが確認できます。
<img width="1439" alt="img13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/e258ea88-8a1d-de8c-a381-d1676d84b615.png">

## Netlify
次に、静的ホスティングサービスの[Netlify](https://www.netlify.com/)を利用してみます。

### 簡単ホスティング
GitHub Pages同様に、まずは簡単なファイルでホスティングを試してみます。

#### 1. デプロイするファイルを作成する
デプロイする適当なファイルを作成します。なんでもいいです。

```bash
$ mkdir sample
$ echo 'Hello World' > sample/index.html
```

#### 2. Netlifyにアップロードする
先ほど作成したディレクトリを丸ごとドラッグ&ドロップでNetlifyにアップロードします。
<img width="1439" alt="img3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/0e178d1e-ba2d-28ce-0fc3-2d251073ea30.png">

#### 3. 確認
以上でホスティング完了です。`https://<random>.netlify.com`のような特定のURLが作成され、ページにアクセスすると先ほどのファイルがホスティングされていることが確認できます。
<img width="1439" alt="img4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/1841f4da-54ba-d782-8496-934351dc45ce.png">

### GitHubと連携し、ビルドプロセスを利用する
Netlifyには標準でビルド機能があるので、それを利用してサンプルアプリケーションのホスティングを行います。

#### 1. GitHubのリポジトリと連携
`New site from Git`ボタンよりGitHubとの連携を行います。
以下のようにリポジトリが選択可能なので、ホスティングしたいリポジトリを選択します。
<img width="1439" alt="img5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/faa1a641-7381-6730-b944-634995ace750.png">

#### 2. ビルド設定をする
デプロイしたいブランチを選択し、ビルドの設定を行います。
今回のサンプルアプリケーションでは、`yarn generate`コマンドにより、静的ファイルを`dist`ディレクトリに作成するので、それぞれビルドコマンドと公開したいディレクトリに設定します。
<img width="1439" alt="img6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/8c16cdaa-8275-91e3-86b6-03dbd560d7e6.png">

#### 3. 確認
ステータスが`Published`になったらデプロイ完了です。
<img width="1439" alt="img7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/262f3ad5-d44e-42f2-6109-f4a6a62767f8.png">

指定のURLよりアクセスすると無事デプロイされていることが確認できます。
<img width="1439" alt="img14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/f1f303ce-77c9-170d-440f-079fc2eec193.png">

### (補足)便利機能Deploy Previews
Netlifyでは、PRを作成すると自動で該当ブランチのビルドを行い、デプロイを行います。
それにより、各ブランチごとの動作を確認することが可能になります。
以下のようにGitHub上でPRを作成するとデプロイが行われます。
<img width="1439" alt="img8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210983/f4bf6bcb-882e-3b52-e11c-b532c0c2c32d.png">

# おわりに
他にもホスティングサービスはたくさんありますが、ビルドプロセスを導入しやすいものを試してみました。サーバを用意せずに簡単にデプロイできるので便利ですね。他にも試してみたら随時追加してみようと思います。
次は、簡単なファンクションが実行できるような形で試してみたいなと思います。