この記事のターゲット
- Nuxt.js気になる
- Netlify気になる
- 静的サイト作りたい
事前準備
Nuxt.jsとは
Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
はい。
Vue.jsのエコシステムであるVuexやVue Routerを簡単に利用できるようにしてくれているフレームワーク、という理解です。
今回はこのNuxt.jsを利用してHTML,CSS,JavaScriptを吐き出して静的サイトを作ります。
Netlifyとは
静的サイトをホスティングできる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では独自ドメインの設定まで楽々ですのでぜひ試して見てください。