vue-cliでwebアプリケーションを作って、Netlifyを使って無料で爆速でリリースした話

# はじめに

[vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話](https://qiita.com/tiwu_official/items/43dc554ec43dd951812a)の記事で、vue-cliで実装したものをGitHubPagesでリリースしました。

今回の記事はNetlifyが熱いと最近聞いたので、アカウント登録からvue-cliで作ったwebアプリケーションのリリース、カスタムドメインとHTTPSの設定をしたので書いていきたいと思います。

※vue-cliに関しては上記記事に詳しく書いてあるのでこの記事では触れません

リリースしたサイト（中身はGitHubPagesでリリースしたサイトと同じ）

[https://holy-place-photo.netlify.com/](https://holy-place-photo.netlify.com/)

# Netlify

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

<img width="1086" alt="スクリーンショット 2017-12-18 19.26.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/68925ad2-821d-3cf3-2877-7ff54e4f7362.png">

静的なサイトなら簡単にリリースができるサービスです。

下記Qiitaの記事に詳しく特徴が載っています（下記Qiitaの記事で自分は初めて知りました）

[HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった](https://qiita.com/shogomuranushi/items/6ab5bc29923b3f82c9ed)

# アカウント登録


トップページのSign Upボタンから登録画面へ。

<img width="905" alt="スクリーンショット 2017-12-18 19.27.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/5f7f789a-e546-02d1-c82e-508a653b24c1.png">

今回はGitHubアカウントによる登録をするためGit Hubボタンをクリック。

GitHubのサイトが開き承認して完了です。

# リリース

登録後、New site from Gitボタンをクリック。

<img width="1263" alt="スクリーンショット 2017-12-18 19.29.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/97757be9-d47d-00ba-1b3b-b7f6df049a22.png">


Create a new site画面が開くので、Continuos DeploymentのGitHubボタンをクリック。

GitHubのサイトが開き承認して完了。


<img width="853" alt="スクリーンショット 2017-12-18 19.30.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/19cb87d8-0fcb-7b6b-b40e-2a9c3c3b9cf2.png">


承認が終わると下記のようにリポジトリ一覧が表示されるので、リリースしたいリポジトリをクリック。

今回は「holy-place-photo」を選択。

<img width="813" alt="スクリーンショット 2017-12-18 19.32.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/7458c356-94d9-7142-0fae-2490a30015be.png">

<img width="777" alt="スクリーンショット 2017-12-18 19.32.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/1743803a-ad75-bf39-3ac0-34ae97ffc491.png">

リポジトリを選ぶとリリースの設定画面に遷移します。

Branch to deployはmasterのまま

Build commandにはビルドコマンドを、Publish directoryにはビルドで吐かれるディレクトリを。

vue-cliを利用しているのでBuild commandは`npm run build`。

Publish directoryは`dist`をいれました。

Deploy siteで完了。

<img width="758" alt="スクリーンショット 2017-12-18 19.34.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/72c12bdc-7c13-ed25-e5fd-f05b0f572a82.png">

<img width="797" alt="スクリーンショット 2017-12-18 19.34.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/54ba7f18-eddb-ec3d-a164-76d9b6027a50.png">

管理画面に遷移します。

待っているとYour site is deployedと表示され、デプロイが完了します。


<img width="1237" alt="スクリーンショット 2017-12-18 19.49.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/cc68f3f2-0e9d-d053-67b5-2c4a4e34b6cf.png">



管理画面の上部にあるURLが表示されるのでアクセスすると無事リリースされているのがわかります。

`http://XXXX-XXXX-XXXXX.netlify.com/`

# ドメインの変更

次にURLがかっこ悪いので変更してみます。

管理画面のSet up a custom domainをクリックし、ドメイン設定画面に遷移します。

<img width="950" alt="スクリーンショット 2017-12-18 19.57.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/ffe2a48c-bf19-f7bf-a258-491b215df26b.png">

General settingsからXXXのところなら自由に変更できるので下記のように変更できます（すごい）

https://holy-place-photo.netlify.com/

<img width="615" alt="スクリーンショット 2017-12-18 20.03.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/8a46b884-d05c-d54d-dcc9-f5c6c5e5071f.png">


ただ、今回はお名前.comで買ったドメインを設定します。

Add a custom domainをクリックし、domainを入力


<img width="940" alt="スクリーンショット 2017-12-18 20.06.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/885588ad-7c64-bdb9-5c98-934a3771b3b4.png">

saveを押したら怒られる

<img width="901" alt="スクリーンショット 2017-12-18 20.13.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/82681b2f-448b-b936-bb9b-5679f9e10ba4.png">

DNSらへんが疎いのですが、どうやらDNSレコードをDNS providerで作るか、Netlify DNSを利用して自動で設定しろと言われます。

「Go to your DNS provider’s dashboard and create the DNS records listed below, or use Netlify DNS to manage your domain and set up the DNS records for your site automatically.」

Use Netlify DNSをクリック。

ちょっと待つと下記のようにいわれる

<img width="836" alt="スクリーンショット 2017-12-18 20.23.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/d4190679-78f5-6857-6867-85de2a7817e2.png">


ドメインのネームサーバーを下記に変更してと言われるので、お名前.comの管理画面を開いてみる

```
dns1.p06.nsone.net
dns2.p06.nsone.net
dns3.p06.nsone.net
dns4.p06.nsone.net
```


<img width="318" alt="スクリーンショット 2017-12-18 20.18.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/77444141-1da4-dd33-0d17-8b7b99f283c1.png">

ネームサーバーの変更から

<img width="708" alt="スクリーンショット 2017-12-18 20.22.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/db440917-c4ab-a830-093a-b42a7f171762.png">

取得したドメインを選択し、「他のネームサーバーを利用」タブを開く。

上の４つを順に入力して、完了。

これでDNSの設定が完了！

下記URLでアクセスできます。

`http://holy-place-photo.com/`

↓2018/11/1 追記↓

上記URLは現在アクセスできません。
※設定方法は合っています

↑2018/11/1 追記↑

# HTTPSの設定

最後にHTTPSの設定をします。

管理画面のSecure your site with HTTPSをクリック

<img width="1214" alt="スクリーンショット 2017-12-18 20.27.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/101cfb16-ab7a-9b6e-70a8-e0c6304efcb9.png">


最初にDNSが有効か確認する。

Verify DNS configurationをクリック。

<img width="933" alt="スクリーンショット 2017-12-18 20.28.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/60eab76c-2c9b-10f6-e418-d37f38774a96.png">

確認が取れたらLet's Encrypt certificateをクリック。


<img width="917" alt="スクリーンショット 2017-12-18 20.29.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/b02e8051-f884-5958-12f2-a6f00a856539.png">

Provision certificateをクリック。

<img width="673" alt="スクリーンショット 2017-12-18 20.30.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/979addf8-7c22-f9e0-95c5-09450188af14.png">


これでHTTPS化が完了！

下記URLでアクセスできます。

[https://holy-place-photo.com/](https://holy-place-photo.com/)

↓2018/11/1 追記↓

上記URLは現在アクセスできません。
※設定方法は合っています

↑2018/11/1 追記↑

# 自動デプロイ

リポジトリに紐付いているのでpushする度に自動でビルドが走りリリースされます。

<img width="622" alt="スクリーンショット 2017-12-18 20.51.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/9b9afa58-36a3-70aa-dd59-b39b1418c0d2.png">

# おわりに

驚くほど簡単だった（英語の読解力が高ければもっと楽だった）。

GitHub Pagesもいいですが、やっぱりドメイン自由にできたりHTTPS対応も簡単にできてNetlifyも最高だ。

どうやら、ブランチ使ってABテストできたり、フォームが作れたり、PR毎に？環境を作ってくれたりとあると助かるツールが揃っているっぽいです。

よき。