【自作ブログ】Nuxt.jsをNetlifyで公開する

今回はNuxt.jsのプロジェクトを作ってhello worldするところから始めて、それをNetlifyで公開するところまでを解説していきます。
前提としてGitHubやGitBucketなどのリポジトリが必要になります。このブログではGitHubを使って進めていきますが、基本的にどのリポジトリでも同じような作業で進めることができるので、好きなものを使ってください。

前提条件

OSはMacを想定しています
Node.jsがインストールされている（筆者の環境ではv12.14.1を使用しています）
GitHubのアカウントを持っている（GitBucket、GitLabでもOKです）

Hello Nuxt

では早速Nuxt.jsのプロジェクトを作ってHello worldしていきます。
まずは作業用のディレクトリを作っていきます。

$ mkdir projects
$ cd projects

create-nuxt-app

Nuxtではプロジェクトの土台（scaffold）が用意されていて、それがcreate-nuxt-appというツールです。
Node.jsがインストールされていればnpxが使えると思いますので、これを使ってプロジェクトを作ります。

# npxで実行
$ npx create-nuxt-app <project-name>
# yarnでもいけます
$ yarn create nuxt-app <project-name>

<project-name>にはプロジェクトの名前を入れてください。何でもOKです。以下、「sample_blog」として進めていきます。
上記のコマンドを実行するといくつか質問されますので、答えていきます。

項目	意味	選択肢
Project name	プロジェクト名	そのままEnter
Project description	プロジェクトの説明	そのままEnter
Author name	作者名	任意に入力
Choose the package manager	パッケージマネージャ	Npm (今回はNpmで進めます)
Choose UI framework	UIフレームワーク	お好きなもので（今回はBuefyで進めますが、Vuetify.jsがおすすめです）
Choose custom server framework	サーバサイドのフレームワーク	None(今回はSSGするので)
Choose Nuxt.js modules	使用するモジュール	Axios, DotEnv (DotEnvは後々使うので先に入れておきます）
Choose linting tools	検証ツール	ESLint
Choose test framework	テストフレームワーク	None（簡単のため今回は使用しません）
Choose rendering mode	レンダリングモード	Universal (SSR)
Choose development tools	開発用ツール	jsonconfig.json

お疲れ様でした。ここまで答えるとインストールが自動的に開始されるはずですので終わるのを待ちましょう。


🎉  Successfully created project sample_blog

  To get started:

	cd sample_blog
	npm run dev

  To build & start for production:

	cd sample_blog
	npm run build
	npm run start

上記のメッセージが表示されたらインストール完了なので、言われた通りにプロジェクトフォルダに移動して開発用サーバを立ち上げてみましょう。

$ cd sample_blog
$ npm run dev

起動できたら`http://localhost:3000`にアクセスしてみましょう。
（環境によっては別のポートになっている場合があります）

hello_buefy

UIフレームワークにBuefyを選択したので、トレードマークカラーであるどぎつい紫のトップページが表示されています。
あまり目に優しくないので、Hello worldにしちゃいましょう。

トップページを変更する

テキストエディターを開いてlayouts/default.vueとpages/index.vueを編集していきます。

layouts/default.js

<template>
  <div class="columns">
    <div class="column is-8">
      <nuxt />
    </div>
  </div>
</template>

<script>
export default {
}
</script>

pages/index.vue

<template>
  <div>
    <h1 class="title">
      Hello world
    </h1>
  </div>
</template>

<script>

export default {

}
</script>

layouts/default.vueはサイト全体の基本レイアウトを定義するファイルになっています。<nuxt />にはURLに対応した内容が表示されます。
pages/index.vueはサイトのルートパス(/)、つまりトップページの内容を定義しています。
後々解説していきますが、Nuxt.jsではpagesディレクトリ配下の構造がそのままURLとしてルーティングされるようになっています。
例）pages/blogs/index.vueは/blogsにアクセスした時に表示されるようになります。

ではもう一度http://localhost:3000にアクセスしてみましょう。

hello_vue

Hello worldできてますね。
ここで一旦プロジェクトをgit commitしておきます。

$ git add -A
$ git commit -m "Initialize repository"

リモートリポジトリはあとで追加するので、今はこのままにしておきます。
では次はこのプロジェクトをNetlifyにデプロイしていきましょう。

Hello Netlify

NetlifyとGitHubを連携する

まずはNetlifyのサイトからGitHubアカウントでログインしていきます。
トップページ右上にある「Log in」をクリックしてGitHubを選択します。

Netlify_01

GitHubのEメールとパスワードを入力すると、以下の画面が表示されます。
緑色の「Authorize netlify」をクリックして連携を許可しましょう。

git_netlify

アカウント連携が終わったら次はGitHubにデプロイ用のリポジトリを作ります。

GitHubにプロジェクトをPushする

まずはGitHubにリポジトリを作成します。
リポジトリ作成の手順についてはここでは説明しませんが、今回は下記のようなリポジトリを作りました。
git_repos

次に先ほど作ったNuxt.jsのプロジェクトにリモートリポジトリを追加していきます。

$ git remote add origin git@github.com:ユーザ名/sample_blog.git
$ git push -u origin master

これでリモートリポジトリへのpushが完了です。

NetlifyにGitHubリポジトリを追加する

いよいよNetlifyにデプロイしていきます。
ここからは怒涛のスクリーンショットラッシュになりますが、お付き合いください。

まずはNetlifyのマイページトップから「New site from Git」をクリックします。

連携先に「GitHub」を選択します。
choose_github

緑色の「Authorize Netlify by Netlify」ボタンをクリックします。
authorize_N_by_N

緑色の「Install」ボタンをクリックします。
netlify_install

先ほど作ったリポジトリを選択します。
select_repos

デプロイの設定をしていきます。
deploy_setting

上から順に簡単に説明すると、

Owner
プロジェクトの管理チーム名になります。今回は変更しません。
Branch to deploy
デプロイ対象とするブランチを選択します。masterのまま変更しません。
ここで指定したブランチにコミットが発生した時に自動でビルドが実行されるようになります。
Build command
プロジェクトをビルドする際に実行するコマンドを指定します。
npm run build && npm run generateのコマンドで静的なHTMLファイルをdistディレクトリに出力します。
※デプロイが上手くいかない場合はnuxt build && nuxt generateに変更して試してみてください。
publish directory
公開するディレクトリを指定します。上述の通り、出来上がったHTMLファイルはdistに出力されるので、distを指定します。

最後に「Deploy site」ボタンを押してデプロイを実行します。
しばらくすると以下の画像のように「Published」と表示されれば無事デプロイ完了です。
Netlify_published

また、上の画像にNetlifyが発行してくれたサイトのURL(https://xxxx-xxxx-xxxx.netlify.com)が記載されています。
実際にアクセスして確認してみましょう。
confirm_netlify

しっかりと世界中にむけて「Hello world」できていることが確認できました。
これでNetlifyへのデプロイ作業はひとまず完了です。

終わりに

今回はNetlifyへデプロイするところまでまとめました。
GitHubのリポジトリに連携しているので、今後はpushするたびにリビルドされるようになります。
肝心のブログサイトの作り方については全く触れていませんが、大事な下準備なのでご勘弁ください💦
なお、次回は「Contentfulの設定」を予定しています。
下準備が続きますね…。早くコーディングしたいです。
それではまた次回。