vue-cliとNetlifyで始めるお手軽サイトホスティング

この記事は 2018年 [Shinjuku.LT Advent Calendar 2018](https://qiita.com/advent-calendar/2018/shinjukult)の2日目の記事です。

Shinjuku.LTは *は世界で一番LTのハードルが低い勉強会* を目的に開催している勉強会です。詳しくは[こちら](https://shinjukult.netlify.com/)！

## はじめに

[1日目](http://honmarkhunt.hatenablog.com/entry/2018/12/01/181144) の記事でも触れられていますが、[Shinjuku.LT](https://shinjukult.netlify.com/#/aboutus) のコミュニティーのサイトは[Netlify](https://www.netlify.com/)でホスティングされています。
今回はこの Netlifyを中心に[vue-cli](https://cli.vuejs.org/)を使ったアプリケーションの作成、サイト公開やカスタマイズについてご紹介したいと思います。

![](https://i.imgur.com/l94dMip.png)

## Netlifyでのサイト公開

### vue-cliでアプリを作成する

まずはじめに、netlifyで公開するためのアプリを作成していきましょう。


```console
$ yarn global add @vue/cli
```

```console
$ vue create netlify-website-demo
```

```console
success Saved lockfile.
✨  Done in 4.40s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project netlify-website-demo.
👉  Get started with the following commands:
```

```console
$ cd netlify-website-demo
$ yarn server

  App running at:
  - Local:   http://localhost:8080/
```

基本的にはこれだけのステップでローカルで動作するVueアプリが作成されると思います。
ちなみに`vue-cli`のバージョンは3系を利用しています。

```console
$ vue -V                                                          
3.2.1
```

![](https://i.imgur.com/rnxvwRr.png)

### Netlifyの設定をする

先ほど作成したアプリをGithubで管理します。まずはリポジトリを作成しましょう。

![](https://i.imgur.com/2osHw3t.png)

あとは[Netlify](https://www.netlify.com/)のサイトにアクセスし、デプロイまでの設定を進めて行きます。

![](https://i.imgur.com/rj8RLKg.png)

`Build command` と `Publish directory`の設定を行います。
作成したアプリの `README.md` にも書いていますが、ビルド用のコマンドは
`yarn run build` になります。
またビルドした成果物は`dist`以下に生成されるので、`Publish directory`には`dist`を指定しましょう。

![](https://i.imgur.com/z6xHSDu.png)

基本的にはこれだけで、ローカルで動作したものと同様にNetlify経由でアプリケーションが配信されます。

## サイトのカスタマイズ

### サイト名の変更

`Netlify`にはサイトホスティングだけではなく、簡単にドメインを設定できたり、サイト管理にまつわる様々な機能が提供されています。手始めにサイト名を変更してみましょう。

![](https://i.imgur.com/bIaqYng.png)

デフォルトで `https://abc-defg-hijk.netlify.com ` のように配信されるサイトURLを簡単に変更する事ができます。

### 独自ドメインの設定

自分でドメインを取得している場合カスタムドメインの設定が出来ます。

### Route53によるカスタムドメイン設定

例えば、AWSのRoute53で取得したドメインの場合、`custom domain`の設定から、取得しているドメインを入力し、`Route53`側で提供される`netlify.com`のドメインに`CNAME`で登録します。

![](https://i.imgur.com/SiiVmxR.png)

Route53側で`CNAME`の設定を行います。

![](https://i.imgur.com/ja5CCBo.png)

### freenomによるカスタムドメイン設定

少し番外編になりますが、[Freenom](https://www.freenom.com/)というサービスで特定のドメインを無料で取得出来るので、そちらも試してみましょう。

[.tk](https://wired.jp/2016/09/24/tokelau-domains/ ) ドメインを始めとするドメインを基本的に無料で取得することが出来ます。

![](https://i.imgur.com/593GdN2.png)

Netlifyの画面でRoute53と同様に取得したドメインでカスタムドメインを設定します。

![](https://i.imgur.com/OiONn7U.png)


取得できたらfreenomのマネジメント画面からDNS設定が可能になります。
Netlifyの指示通り、Aレコードで提供されるIPアドレスを登録しましょう。

![](https://i.imgur.com/QZcMlIK.png)

![](https://i.imgur.com/55t5Ic6.png)

### freenom無料ドメインの運用の注意点

`.tk`で取得したドメインは*一定期間のアクセスがないと広告サイトに置き換わってしまいます*。
リリースしたばかりでアクセスが少ないサイトなど、いつの間にかドメインが無効になってしまう場合もあるので、[Uptime Robot](https://uptimerobot.com) など外形監視ツールとうまく組み合わせると割とスマートに回避出来るかなと思います。

![](https://i.imgur.com/VD46pKL.png)


また、無料ドメインの有効期限は1年間なので、定期的な更新が必要です。
有効期限切れまでの2週間の間だけ更新可能なので気をつけてください。

> Domain renewals can only be done two weeks before a domain name expires.


## ルーティングの注意点

最後に、[Vue Router](https://router.vuejs.org/ja/) と組み合わせた時の注意です。

```
$ vue add router
```

`mode`を`history`とすると `history.pushState API`を利用したルーティングを行う事ができます。


```js
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
     ...
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

```

これをそのまま、Netlifyにデプロイすると、アプリケーションから遷移する場合は問題ありませんが、`/about` というURLを直接指定すると、サーバ側にルーティング設定が無いので404エラーとなります。

![](https://i.imgur.com/7lwRgsD.png)

この問題を回避するために、Netlifyには[Redirect](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps) の設定があります。


`/public` の配下に `_redirects`ファイルを作成し、以下のようなリダイレクト設定を記述します。

```
/*    /index.html   200
```

これで、どのURLについても一度`index.html`を参照するようになるので、SPAで作成されたアプリケーションに有効です。


```
/public
├── _redirects
├── favicon.ico
└── index.html
```

## 最後に

`Netlify`にはこの他にも、AWS Lambdaを簡単にバックエンドに出来るような [functions](https://app.netlify.com/sites/netlify-website-demo/functions) や認証機能を提供する[identity](https://app.netlify.com/sites/netlify-website-demo/identity)、シンプルにA/Bテストを実施できる[splits](https://app.netlify.com/sites/netlify-website-demo/splits)など、どれも低コストで強力な機能な提供されています。[公式ブログ](https://www.netlify.com/blog/
)でも日々様々なアップデートが出ていて、とても楽しみなサービスです。

今回は、[Shinjuku.LT](https://shinjukult.netlify.com/)のサイトで使っている *高機能ホスティングサービスNetlify* について紹介させて頂きました。
[Shinjuku.LT Advent Calendar 2018](https://qiita.com/advent-calendar/2018/shinjukult)はまだまだ続きますので、よろしくお願いします！