Nuxt.jsとNetlifyでサイトを公開する

Nuxt.jsで作成したサイトをNetlifyにデプロイする流れを試してみます。

開発環境の用意

まずNuxt.jsの環境の準備ですが、基本的な導入方法は以前記事にしていますので、下記記事を参照ください。
Nuxt.jsを使ってみる

また以前のNetlifyの記事と同様に、NetlifyとGitHubを連携して使用するので、GitHubで作成したリポジトリに開発環境を作成していきます。

package.jsonを以下のように設定します。

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

nuxtをインストールします。

npm install nuxt

pagesディレクトリにindex.vueを作成して、以下を記述します。

<template>
  <h1>Hello world</h1>
</template>

最後に.gitignoreを追加して、下記ファイルを管理外にします。

node_modules
.nuxt
dist

これで環境の作成はいったん完了なので、コミットしてGitHubへプッシュしてください。

Netlifyの設定

次にNetlifyの連携ですが、NetlifyとGitHubの連携は以前の記事を参照ください。
Netlifyを使ってみる

Netlifyの管理画面にログインして、今回使用するサイトの Site settings > Build & deploy を選択します。
Build settingsの項目に「Build command」と「Publish directory」があるので、それぞれ「npm run generate」と「dist」を設定します。

npm run generateが静的ファイルを生成するコマンドで、distが生成先になります。

ローカルの開発環境に戻って、pages/index.vueの内容を以下のように変更します。

<template>
  <h1>Edit test</h1>
</template>

コミットとプッシュを行ってみて、Netlify側でビルドされた状態を確認できればOKです。