Nuxt2で作成したアプリをGitHub-Pagesでホスティングし、誰でも閲覧できるように公開します
Nuxt2 は 2024年6月30日 に EOL を迎えました。Nuxt2 の利用、及び、この記事の内容は推奨されません
GitHubはインターネット上に静的ウェブページ公開のためのGitHub Pagesというホスティングサービスを提供しています
GitHubで公開したプログラムの説明やドキュメント整備のほか、ブログやホームページなど多種多様な利用ができます
今回はGitHub Pagesを使って、Nuxt2で作成したアプリをデプロイ(配置)してみます
folklore(このWebページ)もこの方法でホスティングされています 現在はこの方法を利用していません
無料プランの場合はソースコードを公開する必要がある
GitHubの無料プランの場合、GitHub Pagesを使うためにはリポジトリをPublic(公開)にする必要があります
有料プランの場合は、Private(非公開)リポジトリでデプロイすることができます
GitHub Pagesで公開するためのリポジトリをPublicで作成します
Nuxt2の生ソースと同じリポジトリで管理しても問題ありませんが、無料プランの場合には全て公開されてしまうため、別に分けることをお勧めします
今回はnpmで配布されている push-dir モジュールを使って公開します
そのためまず、公開したいNuxt2プロジェクトで push-dir をインストールします
npm i -D push-dir または yarn add -D push-dir簡単にデプロイできるよう、package.jsonにコマンドを追加します
"scripts" に deploy を以下のように追加します
{"scripts": {... ,"deploy": "nuxt generate && push-dir --dir=dist --branch=gh-pages --remote=deploy --cleanup"},... ,}
リモートは deploy、ブランチは gh-pages でPushします。オプションはお好みで適宜変えてください
GitHub Pages用のルーティング設定を行います
以下の repository を公開用リポジトリ名に読み替えてください
export default {router: {base: '/repository/'},}
また、nuxt.config.js でローカルファイルを参照しているURLは、同じ要領で全て書き換えてください
例えば favicon.ico についても以下のように書き換える必要があります
head: {link: [{ rel: 'icon', type: 'image/x-icon', href: '/repository/favicon.ico' }]},
作成したNuxt2プロジェクトで公開用リポジトリを登録します
GitHubにて公開用リポジトリのリンクをコピーし、deploy と名をつけてリモートの接続先に追加します
git@github.com:username/repository.git の部分は公開用リポジトリに読み替えてください
git remote add deploy git@github.com:username/repository.git次に登録した deploy コマンドを呼び出します
npm run deploy または yarn deploy正しくコマンドが実行されれば、GitHub Pagesで公開されます 🎉
なお、公開URLはGitHubのリポジトリ設定の”Pages”から確認することができます
同じく deploy で可能です。実際には更新というよりも上書きという形になります
npm run deploy または yarn deploy