React-Redux アプリ開発の学習

React-Redux 及び RailsAPI モードのアプリ開発の学習のためのリポジトリです（更新中）。

• Reactの実装
• Reduxの実装
• RailsAPI モードの実装
• carrierwaveを用いた AmazonS3 への画像アップロード
• axios、redux-thunkを用いた非同期通信処理の実装
• react-bootstrapを用いた View の実装
• devise、devise_token_auth、redux-token-authを用いたトークン認証の SPA の実装
• react-notification-system、react-notification-system-reduxを用いたメッセージ通知の実装

Ruby version

• See .ruby-version.

Rails version

• See Gemfile.

Devise version

devise： 4.6.2

devise_token_auth： 1.1.0

# Gemfile
gem 'devise_token_auth', github: 'lynndylanhurley/devise_token_auth'

# Gemfile.lock
remote: https://github.com/lynndylanhurley/devise_token_auth.git
revision: f929fb458012a91474f92cd948739cea98bcb419
specs:
  devise_token_auth (1.1.0)
    devise (> 3.5.2, < 4.7)
    rails (>= 4.2.0, < 6)

redux-token-auth： 0.19.1

# package.json
  "redux-token-auth": "zopelee/redux-token-auth"

# yarn.lock
redux-token-auth@zopelee/redux-token-auth:
  version "0.19.1"
  resolved "https://codeload.github.com/zopelee/redux-token-auth/tar.gz/3189f4d20025bcf316a43ce8d5fea72fb9f6edad"
  dependencies:
    "@callstack/async-storage" "^1.1.0"
    "@types/react" "^16.7.9"
    "@types/react-native" "^0.57.15"
    "@types/react-redux" "^6.0.10"
    axios "^0.18.0"
    react "^16.6.3"
    react-native-storage "^1.0.0-beta.0"
    react-redux "^5.1.1"
    redux "^4.0.1"

Project initiation

• Gem のインストール

$ bundle install --path vendor/bundle

• node_modules のインストール

$ yarn install

$ cd front_end
$ yarn install

Configuration

ファイルの中身はご自身の環境に合わせて適宜変更してください

• データベースの設定

• 環境変数の設定

# Rails
$ cp .env.default .env

# React 開発用
$ cp ./front_end/.env.default ./front_end/.env.development

# React 本番用
$ cp ./front_end/.env.default ./front_end/.env.production

Database creation

$ bundle exec rails db:create
$ bundle exec rails db:migrate

Run rails server

$ bundle exec rails server -p 3001

Run React(node server)

$ cd front_end
$ yarn start

Deploy Rails Project

Heroku を使います。

デプロイ

$ git push heroku master

Deploy React Project

surge を使います。

インストール

$ yarn global add surge

デプロイ

# 簡易なデプロイ（デプロイ時にデプロイ先ドメインを決めます）
$ yarn run deploy

# デプロイ先ドメインを指定してデプロイ
$ yarn run deploy --domain https://＜任意の名前＞.surge.sh

初回デプロイ時にアカウント登録のため、メールアドレスとパスワードをターミナル上で入力します。