こんにちは！

先日やっとの思いで、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 バージョンアップするための方法

Ubuntuないのお好きなディレクトリ内で以下のコマンドを実行してください

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

これはnodeのバージョン管理をするためのnvmをインストールします。

ここで以下のどちらかの操作をします。

source ~/.bashrc

nvm install 20

このコマンドでバージョン20のNodejsをインストールします。

nvm use 20

このコマンドで現在のセッションに対してNode.jsのバージョンを20に変更します。

現在のセッションでnodeのバージョンは20ですが、これはセッションを新しくするとまたリセットされてしまいます。ですので、後日ここに永続的にnodeのバージョンを設定する方法を記載したいと思います。

workfrowファイルの追加

deployに必要となる新規ファイルを作成します。

mkdir .github

cd .github

mkdir workflows

cd workflows

この手順でコマンドを実行し、本操作でデプロイするためのディレクトリに移動し、code .を実行してVS codeを開きましょう。

workflowsディレクトリの階層下に<お好きな名前.yml>ファイルを作成します。

このファイルの内容は

こちらの記事に記載していただいているので、こちらを参考にしていただけるといいと思います！nodeのバージョンなどは自身の環境に対応するように設定してみてください。

こちらの内容に関しては

この記事を参考にさせていただきました。

このように操作をすると、一通り、GitHub Pagesにデプロイすることができると思います！

手詰まりで非常に困っていましたが、上記2つの記事のおかげで解決し、無事デプロイすることができました！

私と同じ状況で困っている方がいらっしゃいましたら、この記事を参考にしていただけますと幸いです！