何の話かと言うと
上記の続きになります。今回は、サンプルアプリケーションを GitHub Pages で公開する手順を説明します。今後作成するアプリケーションも同様の手順で公開することができます。
GitHub Pages の準備
まずは、公開用のリポジトリを作成して、GitHub Pages の設定を行います。ここでは、「react_apps」という名前のリポジトリを作成したものとします。作成したリポジトリの「Settings」タブを選択して、左側のメニューの「Pages」をクリックします。
GitHub Pages の設定画面が表示されるので、Branch の設定に「main」「/(root)」を指定して Save をクリックします。
これで GitHub 側の準備は完了です。
ターミナルから次のコマンドを実行して、作業用ディレクトリーにリポジトリーの内容をクローンしておきます。リポジトリ名「username/react_apps.git」の部分は、実際のリポジトリにあわせて変更してください。
% cd ~/Documents/work % git clone git@github.com:username/react_apps.git
サンプルアプリケーションを保存するディレクトリーを作成しておきます。
% cd react_apps % mkdir -p contents/example
サンプルアプリケーションのビルド
パート1で用意したサンプルアプリケーションを本番用にビルドします。この際、公開先の URL を事前に設定しておく必要があります。
GitHub Pages の設定画面を再度開くと、公開ページの URL が表示されているので、これをメモしておきます。
サンプルアプリケーションのディレクトリーにある設定ファイル package.json をエディターで開きます。（使用するエディターは vi に限る必要はありません。）
% cd ~/Documents/work/example % vi package.json
下記の様に、先頭部分に "homepage" の設定を追加して、先ほどメモした URL に「/contents/example」を追加した URL を指定します。
{ "homepage": "https://username.github.io/react_apps/contents/example", "name": "example", "version": "0.1.0", "private": true, "dependencies": { ...
次のコマンドで、アプリケーションをビルドします。
% yarn build ---- Output ---- yarn run v1.22.19 $ react-scripts build Creating an optimized production build... Compiled successfully. ...
ディレクトリー「build」以下にビルド済みのバイナリーが用意されているので、これを先ほど用意した公開用のディレクトリーにコピーしておきます。
% cp -a build/* ../react_apps/contents/example/
サンプルアプリケーションの公開
公開用リポジトリーのディレクトリーに移動して、コピーした内容をコミット＆プッシュします。
% cd ~/Documents/work/react_apps % git add -A % git commit -a -m "adding example application" % git push
GitHub のリポジトリ画面で「Actions」タブを選択すると、プッシュした内容を公開するためのワークフローの実行状況が確認できます。次の様に、2つ目のワークフローが完了するのを待ちます。
この後、先ほど "homepage" に設定した URL （先程の例では「https://username.github.io/react_apps/contents/example」）にアクセスすると、サンプルアプリケーションが表示されます。
これで、アプリケーションをビルドして公開できることが確認できました。
次回予告
次回からは、具体的なアプリケーションの例として、「リバーシ」を作成していきます。まずは、バックエンドは持たず、同じ画面上で二人が交代で打っていくというシンプルな構成でいきたいと思います。
パート3はこちらです。
