初めまして！のらと申します。

この本では、RailsとReact構成の完全SPAでブログアプリの開発して、AWSデプロイするまでを解説しました！具体的なデプロイ先は下記です。

• Rails：ECS（Fargate）
• React：S3・CloudFront

【追記】Railsチュートリアルの読み物ガイドで紹介されました🎉

Railsチュートリアルを終えた方に役立つコンテンツ集である「読み物ガイド」で紹介されました！多くの方のお役に立てているようで、とても嬉しいです！

https://railstutorial.jp/reading_guide#next-backend

この本で学べること

RailsとReactを使った完全SPAの開発とAWSへのデプロイを一気通貫で学ぶことができます。文章だけではなく、スクショ画像等を使ってわかりやすく解説していいます。

環境構築

• XcodeやHomebrewなどのインストール
• RubyやRailsのインストール
• nodeやyarnのインストール
• 【Rails】環境構築方法
• 【React】環境構築方法

Rails

• Rails APIモードでの開発
• CORS設定
• DBマイグレーションの解説
• ルーティング、モデル、コントローラーの解説
• ストロングパラメーターの解説
• Active Recordの解説

React

• create-react-appを使った環境構築
• axiosを使ったAPI通信
• React hooks（useStateとuseEffect）を使った開発
• React Routerを使ったルーティング設定方法

AWS

• FargateとCloudFrontを使った完全SPAのAWSへのデプロイ方法
• VPCやインターネットゲートウェイなどを使ったネットワーク構築
• RDSを使ったDB構築
• ACMを使った証明書発行
• ECS（Fargate）を使ったRailsアプリケーションのデプロイ
• S3とCloudFrontを使ったReactアプリケーションのデプロイ
• ムームードメインでの独自ドメイン取得方法とRoute53への設定方法

RailsとReactのSPAアプリ開発を0からガッツリ学びたい方は、下記の僕が執筆した下記の本もおすすめです！

Rails+React（SPA）TODOアプリチュートリアル【0から学ぶ】

こんな方におすすめです

• Rails+ReactでSPAアプリのポートフォリオを作りたい方
• Rails+ReactのSPAアプリをAWSへデプロイしてみたい方
• Rails+ReactでSPAアプリを作りたい方
• 実務でRails+Reactを使う予定のある方
• RailsをFargateにデプロイしてみたい方
• Railsチュートリアルを終えた方
• RailsのAPIモードを学びたい
• モノリシックなRailsは慣れてきたので、SPA構成の開発を学びたい
• Reactのチュートリアルを終えた方
• APIと連携したReactアプリケーションの構築方法を学びたい

筆者について

• 文系未経験からWebエンジニアとして就職
• Rails+React環境での実務経験あり
• 現在はベンチャー企業でWebエンジニア
• 現在はGo・Nuxt.jsで開発しつつ、AWSもガッツリ触っています。
• 実務でRails+React構成のSPAアプリを0からAWSにデプロイした経験あり

対応バージョン

• Ruby：2.7.4
• Rails：6.1.4
• React：18.1.0

対応している環境

• MacOS

完成物のイメージ

インフラ構成図

記事一覧画面

Rails側から記事一覧を取得してきて、React側で表示しています。

記事作成画面

タイトルと本文をReactアプリからRailsAPIを叩いてデータに保存することができます。

記事詳細画面

作成した記事のタイトルと本文を見ることができます。

シンプルですが、機能を追加することもできるので、お好みで追加実装したり、UIを綺麗にしたりしてみてください！

免責事項

本書に記載された内容は、情報提供を目的としています。本書を用いた開発・製作・運用は、必ずご自身の責任と判断によって行って下さい。情報による開発・製作・運用の結果について、著者はいかなる責任も負いません。