#はじめに
久しぶりのQiitaの記事投稿です！
今回はGithub PagesにReactアプリケーションのデプロイ方法を記述しました。
途中つまづいた点があったので、付録として記述しました。
また、今回は環境によって
#[Step1] Reactアプリケーションの作成
###必要なもの
- node (バージョン 8.10以上)
- npm (バージョン 5.6以上)
- Githubアカウント (アカウントが無い方はこちらから作成)
###Reactアプリケーションの作成
$ npx create-react-app {アプリケーション名}
#[Step2] gh-pagesパッケージのインストール
プロジェクトディレクトリに移動
$ cd {アプリケーション名}
gh-pagesのインストール
$ yarn add --dev gh-pages
or
$ npm install --save-dev gh-pages
#[Step3] package.jsonの変更
predeployは自分が使用したパッケージ管理ツールによって変わります。
npm => npm run build
yarn => yarn run build
{
// ...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
// 追加
"predeploy": "{yarn or npm} run build",
"deploy": "gh-pages -d build"
},
// ...
"devDependencies": {
"gh-pages": "^2.1.1"
},
// 追加
"homepage": "https://{Githubのユーザ名}.github.io/{リポジトリ名}/"
}
#[Step4] Githubにリポジトリの作成
- githubで新しいリポジトリ作成
- アプリケーションをデプロイ
自分のパッケージ管理ツールによって実行コマンドが異なります。
$ git init
$ git remote add origin https://github.com/{githubアカウント名}/{リポジトリ名}.git
$ {yarn or npm} run deploy
#[Step5] アプリケーションの確認
deployできたら
https://{githubアカウント名}.github.io/{リポジトリ名}/
にアクセスするとアプリケーションが表示されると思います。
#付録
###[Step4]のdeployでエラーが起きた場合!
...
$ gh-pages -d build
Cloning into 'node_modules/gh-pages/.cache/git@github!M01tyan!credit-card-form.git'...
ssh: Could not resolve hostname github: nodename nor servname provided, or not known
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
deployに失敗して、上のようなエラーメッセージが表示された場合は
下記のコマンドを入力して、リモートリポジトリのurlを変更する必要があります。
$ git remote set-url origin git@github.com:{githubアカウント名}/{リポジトリ名}.git
変更したら再び {yarn or npm} run deploy を実行
Published
と表示されたら成功！！
#参考記事
https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf
https://qiita.com/EisKern/items/15dcf7864fa49df8f247
https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f