Zenn
🤖

Nuxt.jsでアプリを作って、GitHub Pagesでデプロイする：Vue.js Step by Step

2021/05/05に公開
Nuxt
Vue.js
GitHub Pages
tech

このシリーズでは、Vue.jsを簡単なところから使い始めて、徐々に本格的に使う手順を記録しています。今回は、Vue.js製のアプリケーションフレームワークNuxt.jsを使い始める手順です。ほとんどは公式サイトのチュートリアルに書いてありますが、Github Pagesにデプロイするには、ちょっと工夫が必要です。

Nuxt.jsの特徴

Nuxt.jsは、Vue.jsでWebアプリケーションを作るときの土台になるツールです。Webアプリに必要なライブラリがいろいろ入ってますし、ページを追加すると、自動的にルーティングしてくれます。何より、サーバーサイドレンダリングや静的サイトジェネレーションに対応しています。

2021年5月現在、Vue.js Ver2.0に対応しています。

まとめて生成する

これは、次のcreateコマンドで簡単にできます。途中、利用するライブラリや開発ツールを確認してくるので、順番に答えていきます。

$ yarn create nuxt-app my-nuxt-project
|
| ✨  Generating Nuxt.js project in nuxt-app
| ? Project name: nuxt-app
| ? Programming language: JavaScript
| ? Package manager: Yarn
| ? UI framework: Vuetify.js
| ? Nuxt.js modules: Axios - Promise based HTTP client
| ? Linting tools: ESLint, Prettier
| ? Testing framework: None
| ? Rendering mode: Single Page App
| ? Deployment target: Server (Node.js hosting)
| ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
| ? Continuous integration: None
| ? Version control system: Git

できたら、次のコマンドで動作確認します。

$ cd my-nuxt-project
$ yarn dev

http://localhost:3000/ に、こんなアプリができています。ここでは、pagesディレクトリに「inndex.vue」と「inspire.vue」というファイルがあって、そこから自動的にルーティングを設定しています。

./images/install_nuxtjs/my-nuxt-project.png

Github Pagesでデプロイする

Nuxt.jsで作ったアプリをGithub Pagesでデプロイする場合、masterブランチのdocsディレクトリを公開するのが簡単だと思います。

そこで、ビルド先をdocsにするよう、nuxt.config.jsに次のコードを追加します。base: には、Githubのリポジトリ名を指定します。両端のスラッシュを忘れずに。

nuxt.config.js
  router: {
    base: '/my-nuxt-project/'
  },

  generate: {
    dir: 'docs'
  },
}

それから、公開するファイルをビルドします。

$ yarn build

これで、docs ディレクトリに静的ファイルが生成されました。

GitHubに、docsディレクトリごとコミットします。

公開したアプリ

今回、nux.jsで作成したアプリケーションを GitHub Pages で公開しています。このデモページでは、ダークモードをオフにして、Helloというページを追加しています。

./images/install_nuxtjs/demo-nuxt-project.png

参考になるページ

チュートリアル

GitHubで編集を提案

Discussion