Chapter 01無料公開

完全SPAでブログアプリを開発してAWSにデプロイしてみよう!

のら
のら
2022.07.04に更新

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

この本では、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(useStateuseEffect)を使った開発
  • 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を綺麗にしたりしてみてください!

免責事項

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