RailsAPIとNuxt.jsで作るJWTログイン認証
Udemy
ブログ構築TS
Nuxt3
小ネタ集
close
1.
イントロ
このコースで作成するアプリケーションについて解説します。
1. このコースで作れるもの
2.
Docker入門
Dockerの基礎知識を習得します。
1. Docker for Macをインストールしよう
2. Dockerとは何か?
3. DockerComposeとは何か?
3.
Dockerを使ったRails+Nuxt.js環境構築
Docker上にRailsとNuxt.jsの開発環境を構築します。
1. 開発環境の全体像を理解する
2. Gitのインストールとセットアップ
3. Railsを動かすDockerfileを作成する 1/2 ~作成編~
4. Railsを動かすDockerfileを作成する 2/2 ~解説編~
5. Nuxt.jsを動かすDockerfileを作成する
6. Dockerfileのベストプラクティス
7. docker-compose.ymlの環境変数設計
8. .env, .gitignore, docker-compose.yml を作成する
9. docker-compose.ymlを理解する
10. Railsアプリを立ち上げる
11. Nuxt.jsアプリを立ち上げる
4.
複数プロジェクトのGit管理
GitHubへSSH接続設定を行いプロジェクトをプッシュします。
1. Git管理の全体像を理解する
2. apiとfrontリポジトリのコミット
3. rootリポジトリのコミット
4. GitHubへのSSH接続設定
5. GitHubにプロジェクトをPushする
5.
RailsAPI × Nuxt.js 初めてのAPI通信
"Hello"を返す簡単なAPIアプリケーションを作成します。
1. 【Rails】"Hello"を返すコントローラーを作成する
2. 【Nuxt.js】axiosの初期設定を行う
3. 【Rails】CORS設定を行う
6.
heroku.ymlを使ったDockerデプロイ
Docker環境のRailsとNuxt.jsをHerokuにデプロイし、Helloを返すAPIアプリケーションをインターネット上に公開します。
1. Heroku会員登録とHerokuCLIのインストール
2. 【Rails】Pumaの設定とheroku.ymlの作成 ~ デプロイ準備編 ~
3. 【Rails】開発環境の起動コマンドを変更する ~ デプロイ準備編 ~
4. 【Rails】HerokuCLI-manifestを使ってアプリを構築する ~ デプロイ準備編 ~
5. HerokuへSSH接続を行いRailsをデプロイする ~ デプロイ編 ~
6. 【Rails】HerokuのPostgreSQLを初期化する ~ デプロイ編 ~
7. 【Nuxt.js】Dockerfileの編集とheroku.ymlの作成 ~ デプロイ準備編 ~
8. 【Nuxt.js】Herokuにアプリを作成しプロジェクトをPushする ~ デプロイ編 ~
7.
モデル開発事前準備
ユーザーモデルを作成する前のRailsの初期設定を行います。
1. Railsアプリケーションのタイムゾーン設定
2. Railsデータベースのタイムゾーン設定
3. Railsのi18nとオートロードパスの設定を行う
4. モデル開発に必要なGemをインストールする
8.
ユーザーモデル開発
Railsにユーザーモデルを作成し、ユーザーテーブル設計の考え方やモデル開発の基礎知識を学びます。
1. ユーザーテーブル設計と認証設計を理解する
2. Userテーブルを作成する
3. Userモデルのバリデーション設定
4. バリデーションメッセージの日本語化
5. emailカラムのカスタムバリデーション設定
6. ユーザーテーブルにSeedデータを投入する
7. バリデーションテストの事前準備
8. Userモデルバリデーションテスト 1/2
9. Userモデルバリデーションテスト 2/2
10. Nuxt.jsからユーザーテーブルを取得する
9.
Nuxt.js フロント開発事前準備
フロントエンド開発に必要なモジュールの導入を行います。
1. UIフレームワーク Vuetifyを導入する
2. VuetifyにカスタムCSSを追加する
3. nuxt-i18nを導入する
10.
ログイン前のレイアウト構築
Nuxt.jsのレイアウト、ページ、コンポーネントの役割を理解し、ログイン前のレイアウトを構築します。
1. Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
2. 【ウェルカムページ 1/4】コンポーネントファイル群を作成しよう
3. 【ウェルカムページ 2/4】アイキャッチ画像・アプリ名・メニューを表示しよう
4. 【ウェルカムページ 3/4】スクロールイベントでツールバーの色を変化させよう
5. 【ウェルカムページ 4/4】レスポンシブデザインに対応させよう
6. ログイン前のレイアウトファイルを作成しよう
7. 会員登録フォームを作成しよう
8. 親子コンポーネント間の双方向バインディングを理解しよう
9. 会員登録フォームの双方向バインディングを実装しよう
10. Vuetifyを使った会員登録フォームのバリデーション設定
11. ログインページを作成しよう
11.
ログイン後のレイアウト構築
NuxtChildコンポーネントや、動的なルーティングに対するページ設定、Vuexなど、より実践的なNuxt.jsの使い方を理解します。
1. ログイン後のツールバーを作成しよう 1/2 ~下準備編~
2. ログイン後のツールバーを作成しよう 2/2 ~inject編~
3. NuxtChildコンポーネントを理解しよう
4. NuxtChildを使ってアカウントページを作成しよう
5. ログイン後のトップページにプロジェクト一覧を表示しよう
6. 動的なルートに表示する個別プロジェクトページを作成しよう
7. ナビゲーションドロワーを作成しよう
8. Vuexを理解しよう
9. middlewareを理解しよう
10. パンくずリストを追加しよう
11. エンターキーでフォームを送信しよう
12.
サーバーサイドのログイン認証
JWTの理解とJWTを使ったログイン機能の実装について理解します。
1. JWTとは何か?
2. RailsコンソールからJWTを発行してみよう
3. JWTの3つのメリットと注意点を理解しよう
4. JWTを使ったログイン認証の流れを理解しよう
5. JWTの初期設定ファイルを作成しよう
6. トークン発行クラスの共通モジュールを作成しよう
7. リフレッシュトークンクラスを作成しよう
8. アクセストークンクラスを作成しよう
9. トークンを簡単に扱うためのモジュールを作成しよう
10. アクセストークンからcurrent_userを取得しよう
11. リフレッシュトークンからsession_userを取得しよう
12. 認証を行うコントローラーを作成しよう
13. 認証コントローラーのテストをしよう
14. 認証モジュールのテストをしよう
15. 本番環境のクレデンシャル設定をしてHerokuにデプロイしよう
13.
フロントエンドのログイン認証
Nuxt.jsのログイン機能、トークンリフレッシュ機能、エラー画面の構築などを行い、フロントエンドを完成させます。
1. Nuxt.jsからRailsへログインリクエストを送ろう
2. ログインレスポンスをVuexに保存しよう
3. アクセストークンを使ってプロジェクト一覧を取得しよう
4. ログアウト機能を実装しよう
5. リフレッシュトークンを使ってログイン状態を維持しよう
6. サイレントリフレッシュでアクセストークンを更新しよう
7. ログイン前ユーザーのリダイレクト処理を行おう
8. グローバルイベントのトースターを作成しよう
9. ログイン前ユーザーがアクセスしたルートを記憶しよう
10. ログイン済みユーザーのリダイレクト処理を行おう
11. エラーページをカスタマイズしよう
12. Herokuにデプロイして、本番環境でログインしてみよう
14.
本番環境への対応
本番環境でもログイン状態が維持できるように、Herokuにカスタムドイメインを設定し、リダイレクト処理と常時SSL化の設定を行います。
1. ブラウザのサードパーティCookie拒否に対応する
2. Nuxt.jsにカスタムドメインを設定してSSL化しよう
3. Nuxt.jsにSSLリダイレクト処理を行おう
4. Railsにカスタムドメインを設定してSSL化しよう
5. RailsにSSLリダイレクト処理を行おう【完】
3. Dockerを使ったRails+Nuxt.js環境構築
11 / 7. docker-compose.ymlの環境変数設計
AllOpen
1.
イントロ
このコースで作成するアプリケーションについて解説します。
1. このコースで作れるもの
2.
Docker入門
Dockerの基礎知識を習得します。
1. Docker for Macをインストールしよう
2. Dockerとは何か?
3. DockerComposeとは何か?
3.
Dockerを使ったRails+Nuxt.js環境構築
Docker上にRailsとNuxt.jsの開発環境を構築します。
1. 開発環境の全体像を理解する
2. Gitのインストールとセットアップ
3. Railsを動かすDockerfileを作成する 1/2 ~作成編~
4. Railsを動かすDockerfileを作成する 2/2 ~解説編~
5. Nuxt.jsを動かすDockerfileを作成する
6. Dockerfileのベストプラクティス
7. docker-compose.ymlの環境変数設計
8. .env, .gitignore, docker-compose.yml を作成する
9. docker-compose.ymlを理解する
10. Railsアプリを立ち上げる
11. Nuxt.jsアプリを立ち上げる
4.
複数プロジェクトのGit管理
GitHubへSSH接続設定を行いプロジェクトをプッシュします。
1. Git管理の全体像を理解する
2. apiとfrontリポジトリのコミット
3. rootリポジトリのコミット
4. GitHubへのSSH接続設定
5. GitHubにプロジェクトをPushする
5.
RailsAPI × Nuxt.js 初めてのAPI通信
"Hello"を返す簡単なAPIアプリケーションを作成します。
1. 【Rails】"Hello"を返すコントローラーを作成する
2. 【Nuxt.js】axiosの初期設定を行う
3. 【Rails】CORS設定を行う
6.
heroku.ymlを使ったDockerデプロイ
Docker環境のRailsとNuxt.jsをHerokuにデプロイし、Helloを返すAPIアプリケーションをインターネット上に公開します。
1. Heroku会員登録とHerokuCLIのインストール
2. 【Rails】Pumaの設定とheroku.ymlの作成 ~ デプロイ準備編 ~
3. 【Rails】開発環境の起動コマンドを変更する ~ デプロイ準備編 ~
4. 【Rails】HerokuCLI-manifestを使ってアプリを構築する ~ デプロイ準備編 ~
5. HerokuへSSH接続を行いRailsをデプロイする ~ デプロイ編 ~
6. 【Rails】HerokuのPostgreSQLを初期化する ~ デプロイ編 ~
7. 【Nuxt.js】Dockerfileの編集とheroku.ymlの作成 ~ デプロイ準備編 ~
8. 【Nuxt.js】Herokuにアプリを作成しプロジェクトをPushする ~ デプロイ編 ~
7.
モデル開発事前準備
ユーザーモデルを作成する前のRailsの初期設定を行います。
1. Railsアプリケーションのタイムゾーン設定
2. Railsデータベースのタイムゾーン設定
3. Railsのi18nとオートロードパスの設定を行う
4. モデル開発に必要なGemをインストールする
8.
ユーザーモデル開発
Railsにユーザーモデルを作成し、ユーザーテーブル設計の考え方やモデル開発の基礎知識を学びます。
1. ユーザーテーブル設計と認証設計を理解する
2. Userテーブルを作成する
3. Userモデルのバリデーション設定
4. バリデーションメッセージの日本語化
5. emailカラムのカスタムバリデーション設定
6. ユーザーテーブルにSeedデータを投入する
7. バリデーションテストの事前準備
8. Userモデルバリデーションテスト 1/2
9. Userモデルバリデーションテスト 2/2
10. Nuxt.jsからユーザーテーブルを取得する
9.
Nuxt.js フロント開発事前準備
フロントエンド開発に必要なモジュールの導入を行います。
1. UIフレームワーク Vuetifyを導入する
2. VuetifyにカスタムCSSを追加する
3. nuxt-i18nを導入する
10.
ログイン前のレイアウト構築
Nuxt.jsのレイアウト、ページ、コンポーネントの役割を理解し、ログイン前のレイアウトを構築します。
1. Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
2. 【ウェルカムページ 1/4】コンポーネントファイル群を作成しよう
3. 【ウェルカムページ 2/4】アイキャッチ画像・アプリ名・メニューを表示しよう
4. 【ウェルカムページ 3/4】スクロールイベントでツールバーの色を変化させよう
5. 【ウェルカムページ 4/4】レスポンシブデザインに対応させよう
6. ログイン前のレイアウトファイルを作成しよう
7. 会員登録フォームを作成しよう
8. 親子コンポーネント間の双方向バインディングを理解しよう
9. 会員登録フォームの双方向バインディングを実装しよう
10. Vuetifyを使った会員登録フォームのバリデーション設定
11. ログインページを作成しよう
11.
ログイン後のレイアウト構築
NuxtChildコンポーネントや、動的なルーティングに対するページ設定、Vuexなど、より実践的なNuxt.jsの使い方を理解します。
1. ログイン後のツールバーを作成しよう 1/2 ~下準備編~
2. ログイン後のツールバーを作成しよう 2/2 ~inject編~
3. NuxtChildコンポーネントを理解しよう
4. NuxtChildを使ってアカウントページを作成しよう
5. ログイン後のトップページにプロジェクト一覧を表示しよう
6. 動的なルートに表示する個別プロジェクトページを作成しよう
7. ナビゲーションドロワーを作成しよう
8. Vuexを理解しよう
9. middlewareを理解しよう
10. パンくずリストを追加しよう
11. エンターキーでフォームを送信しよう
12.
サーバーサイドのログイン認証
JWTの理解とJWTを使ったログイン機能の実装について理解します。
1. JWTとは何か?
2. RailsコンソールからJWTを発行してみよう
3. JWTの3つのメリットと注意点を理解しよう
4. JWTを使ったログイン認証の流れを理解しよう
5. JWTの初期設定ファイルを作成しよう
6. トークン発行クラスの共通モジュールを作成しよう
7. リフレッシュトークンクラスを作成しよう
8. アクセストークンクラスを作成しよう
9. トークンを簡単に扱うためのモジュールを作成しよう
10. アクセストークンからcurrent_userを取得しよう
11. リフレッシュトークンからsession_userを取得しよう
12. 認証を行うコントローラーを作成しよう
13. 認証コントローラーのテストをしよう
14. 認証モジュールのテストをしよう
15. 本番環境のクレデンシャル設定をしてHerokuにデプロイしよう
13.
フロントエンドのログイン認証
Nuxt.jsのログイン機能、トークンリフレッシュ機能、エラー画面の構築などを行い、フロントエンドを完成させます。
1. Nuxt.jsからRailsへログインリクエストを送ろう
2. ログインレスポンスをVuexに保存しよう
3. アクセストークンを使ってプロジェクト一覧を取得しよう
4. ログアウト機能を実装しよう
5. リフレッシュトークンを使ってログイン状態を維持しよう
6. サイレントリフレッシュでアクセストークンを更新しよう
7. ログイン前ユーザーのリダイレクト処理を行おう
8. グローバルイベントのトースターを作成しよう
9. ログイン前ユーザーがアクセスしたルートを記憶しよう
10. ログイン済みユーザーのリダイレクト処理を行おう
11. エラーページをカスタマイズしよう
12. Herokuにデプロイして、本番環境でログインしてみよう
14.
本番環境への対応
本番環境でもログイン状態が維持できるように、Herokuにカスタムドイメインを設定し、リダイレクト処理と常時SSL化の設定を行います。
1. ブラウザのサードパーティCookie拒否に対応する
2. Nuxt.jsにカスタムドメインを設定してSSL化しよう
3. Nuxt.jsにSSLリダイレクト処理を行おう
4. Railsにカスタムドメインを設定してSSL化しよう
5. RailsにSSLリダイレクト処理を行おう【完】
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
ブログ構築(Nuxt v2.14未満)
SPA開発(Nuxt v2.14未満)
ABOUT
このサイトの読者さんへ
独学プログラミング勉強法 一問一答
プライバシーポリシー
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。
info.cloudacct+blog@gmail.com