こんにちは！
先日やっとの思いで、create-react-appで作成した簡単なアプリケーションをGitHubPagesにデプロイすることができたので、ここにメモとして残しておきます。
今回のトラブルシュートに関しては二つのサイトを参考にさせていただきました。大変助かりました！ありがとうございました。
前提として各種バージョンをここにまとめておきます。
| Version | |
|---|---|
| Ubuntu | 20.04 |
| node | 20.12.2 |
上記のバージョンで本記事の内容に関しては操作していますので、この記事を見て対応される方はこの設定にしてから行っていただくスムーズに進むかと思います。
まず、私の場合では、Ubuntuを用いてGithub操作をしているため、下準備しておかないといけない点がひとつあります。
Ubuntuでのpushの際の認証はユーザー名とトークンで認証を行うのですが、トークンの作成をするさいにworkflowsの項目を選択して発行したものを用いる必要があります。
また、GitHub Actionでは、現在nodeのバージョン16に対応していないので、nodeのバージョンを確認して20まで行進しておいてください。
nodeのバージョン管理の方法に関しては、さまざまな対処法がネット上に挙げられていますが、windowsなのか、macなのか、等環境によってできるできないがあるかもしれません、、、。私の場合、nを使ったバージョン管理の方法がうまくいかず、下記に記載する方法でバージョン管理を行いました。
まずはnodeのバージョンを確認してみて下さい
node -v
この結果が
v20.12.2
のように20を超えているのであれば次のセクションの内容は無視してしまって大丈夫です！
node バージョンアップするための方法
nvmのインストール
Ubuntuないのお好きなディレクトリ内で以下のコマンドを実行してください
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
これはnodeのバージョン管理をするためのnvmをインストールします。
ターミナルを再起動
ここで以下のどちらかの操作をします。
-
ターミナルを閉じて再起動
-
下記コマンドを実行して手動でnvmを読み込む
source ~/.bashrc
Node.jsをインストールします
nvm install 20
このコマンドでバージョン20のNodejsをインストールします。
デフォルトのNode.jsのバージョン管理
nvm use 20
このコマンドで現在のセッションに対してNode.jsのバージョンを20に変更します。
永続的にnodeのバージョンを20に設定する
現在のセッションでnodeのバージョンは20ですが、これはセッションを新しくするとまたリセットされてしまいます。ですので、後日ここに永続的にnodeのバージョンを設定する方法を記載したいと思います。
workfrowファイルの追加
deployに必要となる新規ファイルを作成します。
mkdir .github
cd .github
mkdir workflows
cd workflows
この手順でコマンドを実行し、本操作でデプロイするためのディレクトリに移動し、code .を実行してVS codeを開きましょう。
workflowsディレクトリの階層下に<お好きな名前.yml>ファイルを作成します。
このファイルの内容は
こちらの記事に記載していただいているので、こちらを参考にしていただけるといいと思います！nodeのバージョンなどは自身の環境に対応するように設定してみてください。
package.jsonファイルの編集
こちらの内容に関しては
この記事を参考にさせていただきました。
このように操作をすると、一通り、GitHub Pagesにデプロイすることができると思います！
手詰まりで非常に困っていましたが、上記2つの記事のおかげで解決し、無事デプロイすることができました！
私と同じ状況で困っている方がいらっしゃいましたら、この記事を参考にしていただけますと幸いです！