前置き
Nuxtが新しくなってから
GitHubのデプロイが
簡単になりました❣️(たぶん)
直面したエラーも含め
手順をまとめておきます✨
たぶん、というのは
今までGitHubで
デプロイできると知らず💦笑
Firebase Hostingしか
使用してなかったので、
比較ができないためです🐸
また、
「Nuxt GitHub 404」とググると
色々な原因がでてきます🔎
ただ、現在はdeployコマンドで
大体は解決しそうです🧹✨
GitHub Pagesは
_が先頭にあるものを無視、
_nuxtが404になる。
.nojekyllを
-tコマンドでpushが必要…
みたいなのが
昔はあったみたいですね💡
NuxtプロジェクトをそのままGitHub Pagesに上げると_nuxt配下が404になる
nuxtのコードをGitHub Pagesにデプロイして上手くいかないときの対応
参考:
Nuxt.jsで作成した静的サイトをGitHub Pagesにデプロイする方法
新しくなったNuxt.js
twitterで呟いた通りです🌟
https://twitter.com/aLizlab/status/1415144022138527750?s=20
https://twitter.com/aLizlab/status/1415144268142977026?s=20
サンプル: layoutsディレクトリ&自動インポート
templateに
コンポーネントを書くだけで
表示させることが可能です❣️
nuxt.config.jsに
パスを書く必要もなし❗️
めっちゃ便利〜！！！😉
|
1 2 3 4 5 6 |
<template> <div> <HeaderDefault /> <Nuxt /> </div> </template> |
|
1 2 3 4 5 |
<template> <div> <p>headerです</p> </div> </template> |
components直下ではなく
ネストした場合は未検証ですが<ListsListInfo />のような形で
できると思われます💡
最近HTML/CSS強化中のため
また検証したら書きます✍️
待ってられないぜ❗️
と言う方はこちらを参考に
やってみてください🌟
【Nuxt.js】コンポーネントを自動インポートしよう
ちなみにコードエディターVSCから
Nuxtプロジェクトの直下に
ディレクトリ&ファイル追加するのが
難しかったです。。。
Finderかターミナルmkdirとかで
追加した方が良さそう💡
まずはGitHubの設定を知る
アカウント登録、
リポジトリ作成は割愛します🌱
リポジトリは
publicでもprivateでもOK⭕️
まぁ公開したらprivateの意味が
あまりなさそうな気もしますが。
わざわざpublicに変更…
とかがないのは良いですね。
ざっくり全体の手順を知る
Nuxt.jsの設定は後述します✍️
なのでpushはおいといて、
URL設定と公開設定を確認👀
URL設定
赤枠どおりにやっていきましょう。
Nuxtの設定せずにpushしても
うまく表示されないだけなので、
間違えてやっても問題ないです⭕️
URLの設定をしたら
一致しているかも確認します👀
$ git remote add origin <URL>
$ git remote -v
いろんな所をすっ飛ばすと
違うURLになっている場合があります。
新しく作成したフォルダ、ファイルでも
なぜか違うところに。
fatal: remote origin already exists.
この場合はoriginを削除してから
やり直しましょう〜❗️
$ git remote rm origin
公開設定
公開の設定場所はココ🌍
Settings > GitHub Pages
push後に選択できます。
青字のリンクを押して設定します。
Sourceで設定します。
ブランチとフォルダを選択。
Nuxt.jsにはdocsがなく
distの直下になるため
rootを選択することになります💫☝️
この辺を間違えたり、
全ての手順を踏んでいないと
上手く表示されません🌀
Nuxt.jsプロジェクトの設定
公式を見ながら進めます🏃♀️
Deploy Nuxt on GitHub Pages
generate
まずはgenerate
静的デプロイ
$ npm run generate
処理が終わると
route "/" とあるので
公開フォルダの選択は
docsではなく
rootで間違いなさそうです💫
baseのパスを追記
nuxt.config.jstargetは元から書いてありますが、router項目でリポジトリ名を
追加する必要があるみたいです💡
ユーザー名とか<>とか
余計なものが入らないように。
|
1 2 3 4 5 |
export default { router: { base: '/upload-sample' }, } |
これでpushしても
この状態ですね。。。
これだけでは不十分🌀
push-dirのインストール
公式つづけて見ていきましょう
Command line deployment
$ npm install push-dir --save-dev
package.json
ほとんど元から書かれているので
追記するのはdeploy項目のみ。pushとあるので、deployコマンドを使えばpushができるということですね💫☝️
|
1 2 3 4 5 6 |
"scripts": { "dev": "nuxt", "generate": "nuxt generate", "start": "nuxt start", "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" // 追記 }, |
--dirがdistで--branchがgh-pages…
つまりブランチ名は任意に変更可能🍀
しかしデフォルトブランチのmainでもエラー💥
そのブランチがなくても
自動生成されるようなのでgh-pagesでやってみましたがエラー。
aborted: git not clean
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! upload-sample@1.0.0 deploy: push-dir --dir=dist --branch=gh-pages --cleanup
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the upload-sample@1.0.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
しかしよく見ると最初に
git not clean
あ、普通にコミットしてなかった🙄笑
$ git add .
$ git ci -m "add command"
そしてデプロイコマンド使ってpush❗️
$ npm run deploy
gh-pagesブランチが作成され、
こんな構成になりました👀
これならrootでいけるかと思いきや、
ページがずっと読み込み状態🌀
favionのパスはともかく
baseのパスは合っているはず。
|
1 2 3 4 5 |
export default { router: { base: '/upload-sample' }, } |
いや待てよ…
ん！？！？！？
あーっ！！！
リポジトリ名の後ろの
スラッシューうううう！！！🤣
|
1 2 3 4 5 |
export default { router: { base: '/upload-sample/' }, } |
これでまたコミットしてdeployしたらできました🙌
まとめ
エラーが出ても
今のところは公式通りやれば
デプロイできます🙌✨
何か躓いたら本記事を見直してください🍀
⬇️コマンドと追記箇所はこちらです💡
$ npm run generate
$ npm install push-dir --save-dev
$ npm run deploy
|
1 2 3 4 5 |
export default { router: { base: '/upload-sample/' // 自分のリポジトリ名 }, } |
|
1 2 3 4 5 6 |
"scripts": { "dev": "nuxt", "generate": "nuxt generate", "start": "nuxt start", "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" // 追記 }, |