React.js は、コンポーネントベースのライブラリで、インタラクティブなユーザーインターフェースを効率的に構築するための強力なツールです。本記事では、React.js を用いて作成したアプリ（今回は、前回の記事で作成方法を紹介した TODO リストをウェブ上で公開します）を GitHub Pages にデプロイし、インターネット上で公開する方法を詳しく説明します（ちなみに TODO リストの作り方はこちら）。GitHub の使い方、必要な設定、実際のデプロイ手順についても触れますので、ぜひ最後までお読みください。
GitHub リポジトリの作成
まず、GitHub でプロジェクトを管理するために新しいリポジトリを作成します。このリポジトリにアプリのソースコードをアップロードし、GitHub Pages でホスティングします。
GitHub アカウントの作成
もしまだ GitHub アカウントをお持ちでない場合は、GitHub にアクセスしてアカウントを作成してください。
リポジトリの作成手順
- GitHub にログイン後、画面右上の「+」アイコンをクリックし、「New repository」を選択します。
- リポジトリ名（例:
todo-app）を入力します。 - リポジトリの説明（任意）を記入し、「Public」を選択します。これにより、誰でもあなたのリポジトリにアクセスできるようになります。
- 「Create repository」ボタンをクリックします。
ローカルでのプロジェクト設定
次に、ローカル環境で React.js プロジェクトを作成します。このプロジェクトが GitHub にアップロードされるアプリになります。
React アプリの作成
- ターミナルを開き、次のコマンドを実行して新しい React アプリを作成します。
npx create-react-app todo-app- アプリが作成されたら、プロジェクトフォルダに移動します。
cd todo-app- プロジェクトが正しく作成されたか確認するために、以下のコマンドでローカルサーバーを起動します。
npm startブラウザが開き、http://localhost:3000 でアプリが表示されるはずです。
GitHub へのアップロード
ローカルで作成したアプリを GitHub にプッシュするための手順です。
Git リポジトリの初期化
- ターミナルで、プロジェクトのルートディレクトリに移動し、Git リポジトリを初期化します。
git init- リモートリポジトリを追加します。以下のコマンドを実行します。
git remote add origin https://github.com/your-username/todo-app.gitここで your-username を自分の GitHub ユーザー名に置き換えてください。
ファイルのコミットとプッシュ
- すべてのファイルをステージングし、最初のコミットを作成します。
git add .
git commit -m "Initial commit"- リモートリポジトリにプッシュします。
git push -u origin mainこれでローカルのソースコードが GitHub リポジトリにアップロードされました。
GitHub Pages の設定
GitHub Pages は、GitHub リポジトリにホストされているウェブサイトを簡単に公開できるサービスです。このセクションでは、React アプリを GitHub Pages でホストするための設定方法を説明します。
gh-pages パッケージのインストール
- プロジェクトディレクトリで、
gh-pagesパッケージをインストールします。
npm install --save gh-pagespackage.json の設定
package.jsonファイルを開き、次のようにhomepageフィールドを追加します。your-usernameとtodo-appをそれぞれの値に置き換えてください。
"homepage": "https://your-username.github.io/todo-app"- 同じく
package.jsonに、デプロイ用のスクリプトを追加します。scriptsセクションに次の行を追加します。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}アプリのビルドとデプロイ
- 以下のコマンドを実行して、アプリをビルドし、GitHub Pages にデプロイします。
npm run deployこのコマンドが成功すると、GitHub Pages にアプリが公開されます。
GitHub Pages のブランチ設定
GitHub Pages が正しく設定されているかを確認するために、リポジトリの設定を確認します。
5.1 GitHub Pages のブランチ設定
- GitHub リポジトリの「Settings」タブを開きます。
- 左側のメニューから「Pages」を選択します。
- 「Source」の設定が
gh-pagesブランチにされているか確認します。もしリストに表示されていない場合は、デプロイが正しく行われていない可能性がありますので、再度npm run deployを実行してみてください。
公開されたアプリを確認
最後に、公開されたアプリが正しく表示されるかを確認します。以下の手順でアプリにアクセスします。
アプリの確認
- ブラウザを開き、次の URL にアクセスします。
https://your-username.github.io/todo-app正常に公開されていれば、TODO リストアプリが表示されるはずです。
結論
以上の手順を通じて、React.js で作成した TODO リストアプリを GitHub Pages を使って公開する方法を学びました。GitHub リポジトリの管理、デプロイの準備、実際の公開に至るまで、これらの知識は他のプロジェクトにも応用できます。
GitHub Pages は非常に便利なホスティングサービスであり、無料でウェブサイトを公開できるため、ぜひ活用してみてください。今後もさまざまなプロジェクトに挑戦し、学んでいくことをお勧めします。何か質問や問題があれば、いつでも聞いてください！
コメント