GitHub

Nuxt.jsプロジェクトをGitHubにデプロイする

前置き

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に
パスを書く必要もなし❗️
めっちゃ便利〜!!!😉

components直下ではなく
ネストした場合は未検証ですが
<ListsListInfo />のような形で
できると思われます💡

最近HTML/CSS強化中のため
また検証したら書きます✍️
待ってられないぜ❗️
と言う方はこちらを参考に
やってみてください🌟
【Nuxt.js】コンポーネントを自動インポートしよう

ちなみにコードエディターVSCから
Nuxtプロジェクトの直下に
ディレクトリ&ファイル追加するのが
難しかったです。。。
Finderかターミナルmkdirとかで
追加した方が良さそう💡


まずはGitHubの設定を知る

アカウント登録、
リポジトリ作成は割愛します🌱

リポジトリは
publicでもprivateでもOK⭕️
まぁ公開したらprivateの意味が
あまりなさそうな気もしますが。
わざわざpublicに変更…
とかがないのは良いですね。


ざっくり全体の手順を知る

Nuxt.jsの設定は後述します✍️
なのでpushはおいといて、
URL設定と公開設定を確認👀

URL設定

赤枠どおりにやっていきましょう。
Nuxtの設定せずにpushしても
うまく表示されないだけなので、
間違えてやっても問題ないです⭕️

画像に alt 属性が指定されていません。ファイル名: Frame-44-1-1024x599.png

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.js
targetは元から書いてありますが、
router項目でリポジトリ名を
追加する必要があるみたいです💡
ユーザー名とか<>とか
余計なものが入らないように。

これでpushしても
この状態ですね。。。

これだけでは不十分🌀


push-dirのインストール

公式つづけて見ていきましょう
Command line deployment

$ npm install push-dir --save-dev

package.json
ほとんど元から書かれているので
追記するのはdeploy項目のみ。
pushとあるので、
deployコマンドを使えば
pushができるということですね💫☝️

--dirdist
--branchgh-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のパスは合っているはず。

いや待てよ…

ん!?!?!?

あーっ!!!
リポジトリ名の後ろの
スラッシューうううう!!!🤣

これでまたコミットして
deployしたらできました🙌


まとめ

エラーが出ても
今のところは公式通りやれば
デプロイできます🙌✨
何か躓いたら本記事を見直してください🍀

⬇️コマンドと追記箇所はこちらです💡

$ npm run generate
$ npm install push-dir --save-dev
$ npm run deploy

-GitHub
-,

© 2024 aLiz Nuxt