Udemy 1. このカテゴリーの歩き方 #03
2020年06月26日に更新

【随時更新】このカテゴリーの歩き方

この記事には

カテゴリー「Udemy」の歩き方を記載しています。

カテゴリー内で迷子になったらここにお戻りくださいませ。

Chapter1. このカテゴリーの歩き方

今回作るアプリケーションの基本情報を掲載しています。


  1. お知らせとアプリケーションの概要

  2. アプリケーションの仕様書

  3. カテゴリー「Udemy」の歩き方(今ここ)

  4. お急ぎの人向け。開発環境構築~デプロイまでのコードだけをまとめたチュートリアル

Chapter2. Docker入門

このチャプターで達成すること

まずはDockerの基礎知識を習得します。


  1. Docker for Mac をインストールする

  2. 仮想環境・コンテナ・Dockerイメージ・Dockerfileについて理解する

  3. DockerComposeについて理解する

Chapter3. Dockerを使ったRails+Nuxt.js環境構築

このチャプターで達成すること

Dockerで開発環境を構築し、ブラウザ上にRailsとNuxt.jsの初期画面を表示します。


  1. 開発環境の全体像を把握する

  2. HomebrewとGitインストール(or バージョンアップ)

  3. Rails6のDockerfileを作成する

  4. Nuxt.jsのDockerfileを作成する

  5. .envファイルを使ったDocker環境変数の仕組みを理解する

  6. docker-compose.ymlファイルを作成する

  7. DockerイメージをビルドしてRailsアプリを構築する

  8. Node.jsイメージにNuxt.jsアプリを構築する

Chapter4. 複数プロジェクトのGit管理

このチャプターで達成すること

複数のプロジェクトで動く一つのアプリケーションを、Gitでどのように管理するかを学びます。

そしてGitHubに3つのプロジェクトをプッシュするところまでを行います。


  1. 複数プロジェクトのGit管理とサブモジュールについて理解する

  2. 「front」ディレクトリをサブモジュール管理に変更する

  3. 公開鍵・秘密鍵を生成しGitHubにSSH接続する設定を行う

  4. GitHubにプロジェクトをpushし、サブモジュールのリンク設定を行う

Chapter5. RailsAPI×Nuxt.js初めてのAPI通信

このチャプターで達成すること

Nuxt.jsのボタンを押すと、Railsから"Hello"が返ってくるアプリケーションを作ります。

また、APIアプリケーションには付き物の「オリジン・CORS」について理解します。


  1. Railsに"Hello"を返すコントローラーを作成する

  2. Nuxt.jsのaxiosの初期設定を行う

  3. RailsにCORS設定を行うためのGem rack-corsを導入する

Chapter6. Heroku.ymlを使ったDockerデプロイ

このチャプターで達成すること

Chapter5で作成したアプリケーションをHerokuにデプロイし、"Hello"APIアプリケーションをインターネット上に公開します。

今回のデプロイ方法は「heroku.yml」を使い、DockerイメージをHerokuにビルドする方法となります。


  1. Herokuアカウントを作成・HerokuCLIをインストールする
  2. Rails用のpuma.rb・heroku.ymlの編集を行う
  3. Railsデプロイ完了。HerokuCLI-プラグイン「manifest」を使ったデプロイを行う
  4. Nuxt.jsデプロイ準備。Dockerfileを編集する
  5. デプロイ完結。Nuxt.jsをHerokuにデプロイする

Chapter7. TODO

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
1. このカテゴリーの歩き方 #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
1. このカテゴリーの歩き方 #02
【随時更新】このカテゴリーで作るアプリケーションの仕様書
1. このカテゴリーの歩き方 #03
【随時更新】このカテゴリーの歩き方
1. このカテゴリーの歩き方 #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
2. Docker入門 #01
Docker for Macをインストールする手順
2. Docker入門 #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
2. Docker入門 #03
分かるDocker解説。DockerComposeとは何か?
3. Dockerを使ったRails+Nuxt.js環境構築 #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
3. Dockerを使ったRails+Nuxt.js環境構築 #02
【MacOS】Homebrew経由でGitをインストールする方法
3. Dockerを使ったRails+Nuxt.js環境構築 #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
3. Dockerを使ったRails+Nuxt.js環境構築 #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
3. Dockerを使ったRails+Nuxt.js環境構築 #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
3. Dockerを使ったRails+Nuxt.js環境構築 #08
docker-compose.ymlを使ってNuxt.jsを構築する
4. 複数プロジェクトのGit管理 #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
4. 複数プロジェクトのGit管理 #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
4. 複数プロジェクトのGit管理 #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4. 複数プロジェクトのGit管理 #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
5. RailsAPI×Nuxt.js初めてのAPI通信 #01
【Rails6】"Hello" jsonを返すコントローラを作成する
5. RailsAPI×Nuxt.js初めてのAPI通信 #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
5. RailsAPI×Nuxt.js初めてのAPI通信 #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
6. Heroku.ymlを使ったDockerデプロイ #01
最初の一歩。Herokuへ新規会員登録を行いHerokuCLIをインストールする
6. Heroku.ymlを使ったDockerデプロイ #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
6. Heroku.ymlを使ったDockerデプロイ #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
7. モデル開発事前準備 #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
新着
SPA開発
ブログ構築
小ネタ集