Edited at

Nuxt.jsで作った静的サイトをNetlifyにホスティング


この記事のターゲット


  • Nuxt.js気になる

  • Netlify気になる

  • 静的サイト作りたい


事前準備


Nuxt.jsとは

https://ja.nuxtjs.org/


Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。


はい。

Vue.jsのエコシステムであるVuexやVue Routerを簡単に利用できるようにしてくれているフレームワーク、という理解です。

今回はこのNuxt.jsを利用してHTML,CSS,JavaScriptを吐き出して静的サイトを作ります。


Netlifyとは

https://www.netlify.com/

静的サイトをホスティングできるWebサービス。

GitHubと連携して自動デプロイも簡単です。

特にデプロイ時に実行するコマンドを指定することができるため、GitHub上にビルド後のファイルを置かなくて済むのがポイントです。


作業開始

大まかな手順は以下の通り。

1. GitHub repositoryの用意

2. Nuxt.jsの用意

3. Netlifyアカウントの用意

4. デプロイ設定

それでは行きましょう。


1. GitHub repositoryの用意

普通に用意してください。

特記事項なし。


2. Nuxt.jsの用意

npx create-nuxt-app <project-name>

質問はよしなに答えます。

処理が終わったら動作確認。

cd <project-name>

npm run dev

これで https://localhost:3000 に開発環境が立ち上がっているはず。

確認できたら一旦ctrl+cで落として、静的ファイルを出力してみます。

npm run generate

無事成功するとdistディレクトリが生成されているはず。

ここまで確認できたらGithubリポジトリにpushしてしまいましょう。


3. Netlifyアカウントの用意

公式サイトからアカウントを取得します。(https://www.netlify.com/


4. デプロイ設定

アカウントが取得できたら公開サイトの用意を始めます。

Sitesタブを開くと、「New site from Git」ボタンがあるのでクリック。

サービスの候補が出るので今回はGitHubを選択。

リポジトリの候補が出るので先ほど用意したリポジトリを選択します。

Production Branch、Build command、Publish directoryを入力するページが出るので以下の通りに設定します。

パラメータ
入力

Production Branch
master

Build command
nuxt generate

Publish directory
dist

これで準備完了です。

すでにmasterブランチは最新の状態なので初回はマニュアルデプロイしましょう。


所感

ちょーかんたん。

Nuxt.jsの簡単さもさることながら、Netlifyでのデプロイも簡単でとてもDX(developer experience)が良いです。

私がNuxt.jsとNetlifyで作成したものをおいていきます。

Netlifyでは独自ドメインの設定まで楽々ですのでぜひ試して見てください。

https://www.ririli.net/