[MavsDiary #1]NuxtJS *Netlifyでデプロイ環境を構築

こんばんは、タロウです。

弊社マーベリックスでは、NuxtJSでWebサイトを始め、システム開発でも使用しています。

そんな弊社の強みであるNuxtJSで、作成したプロジェクトをNetlifyにデプロイする方法を紹介します。

Netlifyとは

読み方：ネットリファイ Netlifyとは、静的コンテンツのホスティングサービスです。わかりやすいUIで、デプロイまで簡単な手順で進めることができ、手早く公開まで持っていくことができます。

また、GitHub　・　GitLab　・　Bitbucket のリポジトリと連携して、
ブランチに更新がかかったタイミングで自動的にデプロイをしてくれます。

有料プランでは、

ビルド時間の上限アップ
Basic認証
通信量の上限アップ
管理者ユーザが複数人

などなどチーム開発や、やや大きな規模では有料プランが向いていますが、個人で使用する分には無料プランで十分です。

動作イメージ

ローカルでソースを修正、リモートリポジトリにPush
Pushを検知してNetlifyのデプロイが走る

一度設定してしまえば、自動で反映してくれるので、
developブランチにpush　→　検証用環境へ
masterブランチにmerge　→　本番環境へ
と使い分けるのも良いですね！

Netlifyの設定方法

Netlifyに登録、GitHubと連携、デプロイ設定と簡単に３ステップで設定を行えばすぐに使えるようになります。

Netlifyに登録

まずはNetlifyに登録していきます。

ここからログインページにアクセスします。

▲今回はgithubでログインします。

▲ダッシュボード画面が表示されます。　連携済みの環境がここに一覧で表示されます。

▲ダッシュボードの"New site from Git"ボタンから新規サイトの追加画面を開きます。

githubと連携

ここからはGitHubとの連携、リポジトリの指定を行います。

▲新規サイト画面の画面下部に

GitHub
GitLab
BitBucket

の中から連携したいホスティングサービスを選択します。

デプロイの設定

最後にデプロイ時の設定を行います。 Nuxt.jsで作成したプロジェクトを動かすので、

yarn build / npm run build
yarn start / npm run start

をNetlify上から実行する設定を行なっていきます。

▲デプロイ対象のブランチ、コマンドを指定します。 Branch to deploy デプロイしたいブランチを設定します。 Build command yarn build / npm run build
どちらかを設定 Publish directory dist
デフォルトで出力されるディレクトリを設定

設定後、"Deploy site"ボタンでデプロイ開始します。