Github PagesでReactアプリケーションをデプロイ

6146 ワード
React github-pages Gh-pages アプリケーション github-pages テキストリンク

はじめに

久しぶりの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にリポジトリの作成

  1. githubで新しいリポジトリ作成
  2. アプリケーションをデプロイ

自分のパッケージ管理ツールによって実行コマンドが異なります。

$ 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 [email protected]:{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