みやです:)

Vue.jsでえんやこらプロジェクト、第4回です前回はこちら、ブログ機能の肝となるCMS機能、ButterCMSを導入しました m5gf.hatenablog.com

今回はなんとロゴしか作っていないのに本番環境を用意してデプロイしちゃいます！！！

Netlify

今回本番環境として利用するのはNetlifyと呼ばれるサービスです。 f:id:ata-ata:20181024234114p:plain

Netlifyとは、静的Webページ(HTML/CSS/JSのみのページ)のホスティングサービス。近いところだとGitHub Pagesや、WebアプリなどでおなじみHerokuがあります。
その中でもNetlifyは、GitHub リポジトリから指定したブランチの変更を検知し、自動デプロイまでサクッとしてくれちゃうこれまたスゴイやつです。独自ドメインの利用・https化までできるし、HerokuのReview Appsのようなブランチ毎の検証環境まで用意してくれて非常に便利。
ねっとりファイ。

やっていきファイ

早速やっていきましょう。今回はこちらのサイトを参考に導入しました
猫本の名前で知られるVue.jsの入門書、基礎から学ぶ Vue.jsのチュートリアルページです。

cr-vue.mio3io.com

GitHubアカウントでログインし、New Site From Git を選択。 f:id:ata-ata:20181027225107p:plain

続いてGitリポジトリのリソースをGitHubで選択。該当するリポジトリを自動で表示してくれます。
僕の場合はCNRを選択。 f:id:ata-ata:20181027225256p:plain

デプロイするブランチを選択。
ビルドコマンド？？なんだ？npm run buildかな？パブリッシュディレクトリ？？チュートリアルページでは dist ディレクトリが指定されているけどそんなもの存在してなくない？ f:id:ata-ata:20181028133142p:plain

npm run について知ろう

結果的にここでビルドコマンドは npm run build 、パブリッシュディレクトリは dist を指定すれば良かったのですが、そのコマンドでは何をしているのか・そもそも開発時に立ち上げている nom run dev コマンドは一体何なのか、今一度知る必要がありました。
※ここは飛ばしてもらって大丈夫です！！

まずは npm run こちらの記事には、以下のように書かれています。
フロントエンド開発の３ステップ（npmことはじめ）

npm runとは、npm scriptsと呼ばれるタスク実行機能を呼び出すコマンドです。機能は一つしかありません。
- package.json内に書かれたシェルスクリプトを実行するだけ
これだけです。

ほんほんなるほど？ではpackage.jsonを見てみます。

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js"

これらの記述は npm init 時に自動生成されたものですが、なるほどnpm run devコマンドでは

webpack-dev-serverを立ち上げる(ファイルパスはbuild/webpack.dev.conf.js)
--inlineオプションでinlineモードで起動(変更があった際のオートリロードができる)
--progress で進捗表示

をしているようです。参考
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動

そしてnpm run buildコマンドは build.jsを実行している(何が書かれているのかはまだ理解できなかったため飛ばします)

npm run build

npm run buildをローカルで実行してみると dist ディレクトリが生成され、HTML/CSS/JSファイルがそれぞれ生成されていることを確認できました。 f:id:ata-ata:20181028150526p:plain NetlifyのPublish Didectoryには、 npm run build でビルドされるこの dist ディレクトリを指定すれば良さそうです。

Deploy Site

Build command と Publish Directory を指定したら、Deploy Siteをクリックするともうデプロイが開始します。 f:id:ata-ata:20181028152928p:plain デプロイログを見て待ちます

f:id:ata-ata:20181028153505p:plain Build complete!!!

こちらからアクセスできます！やったーー
https://affectionate-nobel-000d34.netlify.com/#/
（すでにちょっとだけレイアウトのスタイルが追加されていますが、実はこの記事を書くタイミングで3記事分くらい進んでしまっていますコード書くのは楽しい）

おわり

今後はmasterブランチにプッシュしたタイミングでビルドが行われ、自動でデプロイが行われるようになります。このタイミングで本番環境への自動デプロイを用意したため、ローカルでは動くが本番環境では動かない、といったバグをその都度検知し修正でき非常に便利です。
Netlifyの設定として残っているのはカスタムドメインの設定がありますが、それは開発終了後で問題ないでしょう。（ドメインは買ってあります）

という訳で今回はここまで！次回はレイアウトの追加をしますここまで読んでくれてサンキュー‼️

M5GF

まったり開発ブログ

Netlifyでデプロイした

Netlify

やっていきファイ

npm run について知ろう

npm run build

Deploy Site

おわり