【独学ポートフォリオ開発応援】実務未経験から学べる！Rails×Next.js×AWSハンズオン解説

【独学ポートフォリオ開発応援】実務未経験から学べる！Rails×Next.js×AWSハンズオン解説

01はじめに「未経験転職は難しい。だからこそ」02ご購入いただいた方へ 03【1. 環境構築編】Rails 立ち上げ & GitHub リポジトリ作成 04【1. 環境構築編】Rails API とは？05【1. 環境構築編】ヘルスチェック用アクションを実装 06【1. 環境構築編】pryコンソール、rspec、rubocopを追加 07【1. 環境構築編】Next.js 立ち上げ 08【1. 環境構築編】Lintツールの導入 09【1. 環境構築編】GitHub Actions CI設定 10【1. 環境構築編】Next.jsの仕組み 11【1. 環境構築編】Material-UI@v5とemotionの導入 12【1. 環境構築編】Rails API と Next.js の疎通 13【1. 環境構築編】まとめ 14【2. Rails開発編】devise_token_authによるUserの実装 15【2. Rails開発編】サインインユーザーを取得するアクションを実装 16【2. Rails開発編】factory_bot_rails と faker を用いたテスト実装 17【2. Rails開発編】Articleモデルの実装 18【2. Rails開発編】記事一覧および詳細を取得するアクションを実装 19【2. Rails開発編】マイ記事の新規作成および更新アクションを実装 20【2. Rails開発編】マイ記事の一覧および詳細を取得するアクションを実装 21【2. Rails開発編】まとめ 22【3. Next.js開発編】記事一覧ページのモックを実装 23【3. Next.js開発編】記事一覧ページのブラッシュアップ 24【3. Next.js開発編】記事詳細ページの実装 25【3. Next.js開発編】認証機能の実装 1. 認証の全体像 26【3. Next.js開発編】認証機能の実装 2. サインインページの実装 27【3. Next.js開発編】認証機能の実装 3. サインインユーザー情報をグローバルステートに保存 28【3. Next.js開発編】サインアウト機能を実装 29【3. Next.js開発編】通知バーの実装 30【3. Next.js開発編】マイ記事一覧ページを実装 31【3. Next.js開発編】マイ記事詳細画面の実装 32【3. Next.js開発編】記事エディットページを実装 33【3. Next.js開発編】サインアップページを実装 34【3. Next.js開発編】認証リンクの修正 35【3. Next.js開発編】ヘルスチェック用APIを実装 36【3. Next.js開発編】まとめ 37【4. AWSデプロイ編】全体の流れ 38【4. AWSデプロイ編】AWSアカウントの初期設定 39【4. AWSデプロイ編】Route53 40【4. AWSデプロイ編】ACM 41【4. AWSデプロイ編】VPC 42【4. AWSデプロイ編】サブネット 43【4. AWSデプロイ編】インターネットゲートウェイ 44【4. AWSデプロイ編】ルートテーブル 45【4. AWSデプロイ編】セキュリティグループ(backend)46【4. AWSデプロイ編】RDS 47【4. AWSデプロイ編】backendのデプロイ準備 48【4. AWSデプロイ編】ターミナルからAWSにアクセス 49【4. AWSデプロイ編】ECR(backend)50【4. AWSデプロイ編】タスク定義(backend)51【4. AWSデプロイ編】サービス作成&タスク起動(backend)52【4. AWSデプロイ編】タスク(backend)の再作成 53【4. AWSデプロイ編】ALB(backend)54【4. AWSデプロイ編】サービス(backend)の再作成 55【4. AWSデプロイ編】セキュリティグループ(frontend)56【4. AWSデプロイ編】frontendのデプロイ準備 57【4. AWSデプロイ編】ECR(frontend)58【4. AWSデプロイ編】タスク定義(frontend)59【4. AWSデプロイ編】サービス作成&タスク起動(frontend)60【4. AWSデプロイ編】ALB(frontend)61【4. AWSデプロイ編】サービス再作成(frontend)62【4. AWSデプロイ編】GmailからSMTPでメール送信 63【4. AWSデプロイ編】GitHub Actions CD設定 64【4. AWSデプロイ編】まとめ

Chapter 31

【3. Next.js開発編】マイ記事詳細画面の実装

2023.09.11に更新