JavaScript
vue.js
Netlify
vue-cli
Vue.js #1Day 21

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

はじめに

vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話の記事で、vue-cliで実装したものをGitHubPagesでリリースしました。

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

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

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

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

Netlify

https://www.netlify.com/

スクリーンショット 2017-12-18 19.26.57.png

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

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

HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった

アカウント登録

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

スクリーンショット 2017-12-18 19.27.35.png

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

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

リリース

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

スクリーンショット 2017-12-18 19.29.04.png

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

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

スクリーンショット 2017-12-18 19.30.55.png

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

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

スクリーンショット 2017-12-18 19.32.37.png

スクリーンショット 2017-12-18 19.32.49.png

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

Branch to deployはmasterのまま

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

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

Publish directoryはdistをいれました。

Deploy siteで完了。

スクリーンショット 2017-12-18 19.34.16.png

スクリーンショット 2017-12-18 19.34.25.png

管理画面に遷移します。

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

スクリーンショット 2017-12-18 19.49.47.png

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

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

ドメインの変更

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

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

スクリーンショット 2017-12-18 19.57.46.png

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

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

スクリーンショット 2017-12-18 20.03.42.png

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

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

スクリーンショット 2017-12-18 20.06.47.png

saveを押したら怒られる

スクリーンショット 2017-12-18 20.13.51.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をクリック。

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

スクリーンショット 2017-12-18 20.23.18.png

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

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

スクリーンショット 2017-12-18 20.18.12.png

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

スクリーンショット 2017-12-18 20.22.18.png

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

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

これでDNSの設定が完了!

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

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

HTTPSの設定

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

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

スクリーンショット 2017-12-18 20.27.01.png

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

Verify DNS configurationをクリック。

スクリーンショット 2017-12-18 20.28.17.png

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

スクリーンショット 2017-12-18 20.29.07.png

Provision certificateをクリック。

スクリーンショット 2017-12-18 20.30.13.png

これでHTTPS化が完了!

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

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

自動デプロイ

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

スクリーンショット 2017-12-18 20.51.54.png

おわりに

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

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

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

よき。