Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
96
Help us understand the problem. What is going on with this article?
@tiwu_dev

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

More than 1 year has passed since last update.

はじめに

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

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

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

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

https://holy-place-photo.netlify.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のところなら自由に変更できるので下記のように変更できます(すごい)

スクリーンショット 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/

↓2018/11/1 追記↓

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

↑2018/11/1 追記↑

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/

↓2018/11/1 追記↓

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

↑2018/11/1 追記↑

自動デプロイ

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

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

おわりに

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

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

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

よき。

96
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tiwu_dev
gamewith
GameWithは、ゲームをプレイされる皆様がより深くゲームを楽しんで頂ける環境を提供するべく設立されました。あなたがゲームをする時のお供になる。これが私達の目標です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
96
Help us understand the problem. What is going on with this article?