LoginSignup
17
28

More than 3 years have passed since last update.

@NoSuke23

モダンな技術を使ってRailsアプリを開発、デプロイするまでのロードマップ2021

Last updated at Posted at 2021-05-16

はじめに

　この記事はモダンな技術(後述)を使用してRailsアプリケーションを開発し、AWS上にデプロイするまでの学習手順を詳細にまとめたものです。基本的に参考になる記事、書籍を編纂し、自分がわかりにくかったと感じた部分は自分で記事を書いています。リンクの記事を書いてくださった方々には本当に感謝です。

この記事の目的

　新しいことを独学しようとすると一つ大きな問題があります。それは計画通りに実行するのが困難であるということです。自分のすべき作業が明確化されていないことによって、
1. どのくらいで終わるのかを数値化することが困難
2. エラーを予測できない
3. そもそも次になにをすべきかわからず、それを決定するのに時間を要する
などの問題が発生します。私自身インフラの学習からアプリ開発、デプロイ完了までの期間が予定よりも2ヶ月近く伸びしまいました。
　この記事は次にやるべきことを明確化することによって、以上のような計画錯誤を減らすことを目的としています。計画術についてはDaiGoさんの書籍が参考になるかと。

この記事で紹介する言語、フレームワーク、その他技術

  • フロント関連
    • HTML
    • CSS
    • Sass
    • JavaScript
      • jQuery
      • Vue.js
  • Ruby on Rails
  • MySQL
  • nginx
  • Docker
  • AWS
    • IAM
    • VPC
    • ELB
    • Route 53
    • RDS
    • S3
    • ECR
    • ECS
    • CloudWatch
    • Systems Manager
    • Certificate Manager
  • Terraform
  • CircleCI

留意事項

  • 前提知識は特に必要ありません。必要ないところは読み飛ばしてください。
  • 環境はWSL(Windows Subsystem for Linux)です。Macを使用している方は導入に関する部分はご自身で調べてください。

技術の独学について

　新しい技術を独学するには以下のような方法が効率的です(経験則ですが)。

  1. 基礎知識を身に着けます。具体的には"〇〇 入門"とかで検索すると入門者向けの記事が見つかるのでそれを読むとよいかと。
  2. 次にハンズオン学習を行います。言い換えればチュートリアルです。実際に触って基本操作を身に着けます。
  3. チュートリアルをクリアしたら書籍を一冊読むなどして体系的知識を身に着けます。
  4. 5. 公式ドキュメントをみながら実践を行います。

Column

「学んだことはすぐに忘れてしまう！だから技術を学ぶにはとにかくスピードが大事なのだ！」

　それは短期記憶向きの学習法しか実践していないからだと思います。長期的に記憶を維持したい場合には検索練習を行いましょう。検索練習に関してはパレオさんのブログを参照。個人的にはエクセルなんかに検索練習しておくと忘れたときにチートシートして使えるのでおすすめ。

「完全に理解しようとするのは効率が悪い！だから理解せずともどんどん先に進めるべきだ！」

　確かにRailsチュートリアルとかちゃんと理解しながら進めようとするとめちゃくちゃ時間かかるんですよね。かといってこの言葉を鵜呑みにしてもエラーばっかでやる気が削がれてしまうのかなと。なのでハンズオン系の学習に関しては適切な難易度設定を意識してみるとよいかと思います。こちらもパレオさんのブログを参照下さい。

ロードマップ

1. ITに関する基礎知識を学ぶ

　ようやくここから本題です。まずITに関する基礎知識を勉強しますが、正直ここはしっかり勉強しようとしなくていいです。なんせ情報が多いので。キタミ式等の書籍をざっくり読んで、後々わからない言葉等が出てきたときにその都度「そういえばそんなことあの本に書いてあったな...」で読み返せばいいと思います。

2. HTML, CSS, Sassの基礎知識、チュートリアル

　Webページをつくるための言語です。Progateを利用して学習しましょう。

3. JavaScript, jQueryの基礎知識、チュートリアル

　Webページを動的にするために使用します。Progateで。

4. エディターの導入、ショートカット、マルチカーソルの利用

　ローカル(自分のPC)にエディターを導入します。色々ありますが迷ったらVSCodeを入れておけばよいかと。
またショートカット、マルチカーソルを利用するとコーディングを効率よく行えます。

5. HTML、CSSを使ってモダンなコーディングができるようになる

　"HTML5/CSS3モダンコーディング"という書籍をクリアすると基本的につくりたいようなページは自分で制作できるようになると思います。

6. CSSの設計方法を学ぶ

　CSSはシンプル故にコードが煩雑になりやすいです。"CSS設計の教科書"という書籍を読みましょう。特にBEMとFLOCSSを抑えておくとよいかと思います。

7. Flexbox

　FlexboxはCSSのレイアウト方法です。"HTML5/CSS3モダンコーディング"ではfloatプロパティを使って要素の横並びを行っていますが、Flexboxを使えば簡単に実装できます。実際にページを作る際に利用す際にチートシートをみて利用するとよいでしょう。

8. SQLの基礎知識、チュートリアル

　データベースを操作するためのクエリ(一連の問い合わせ)です。Progateで。

9. Rubyの基礎知識、チュートリアル

　Webアプリケーションのロジックをつくるための言語です。Progateで。

10. Ruby on Railsの超基礎知識、チュートリアル

　Rubyで書かれたWebアプリケーションフレームワークです。Progateで。

11. コマンドライン操作の基礎知識、チュートリアル

　コマンドを使ってファイル操作等を行います。ProgateのCommand Lineコースを利用して学習しましょう。

12. Gitの基礎知識、チュートリアル

　ソースコードのバージョン管理システムです。Progateだけだと心許ないのでドットインストールのgit入門もクリアしておくとよいかと思います。

13. Ruby on Railsチュートリアル

　最初の山場です。Ruby on Railsチュートリアルをクリアしましょう。わからなくなっても調べれば有益な情報がいくらでも出てくるので挫折の心配はないかと思います。

14. 開発環境を構築する

　ローカル環境を構築します。WSLの基本については以下を参照。

【WSL入門】第1回　Windows 10標準Linux環境WSLを始めよう
Ubuntuは無印版を推奨します。LTS版(20.04)ではVSCodeのいくつかの拡張機能をインストールできませんでした。

WSL でマウントしたファイルシステムでもパーミッションを扱えるようにする
　WSLはlinuxがWindowsの全てのファイルを含むCドライブをマウントする形を取っていますが、デフォルトではCドライブのファイルにパーミッションが付与されていません(これによって度々エラーが発生します。因みにこれはつまりlinux上で開発を行えばよいのですが、これをすると高負荷な処理をした場合にWSLがフリーズしたりします)。

WSL2によるホストのメモリ枯渇を防ぐための暫定対処
　またDocker等を使用して開発するとWSLのVmmemというプロセスがメモリ使用量が肥大化し続け、ホストメモリが枯渇するという問題があります。

WSLでRails環境を構築する場合は以下を参照。
[Rails] Windows10 で WSL を使って Rails 環境を構築したときのメモ

パッケージマネージャについては以下を参照。
パッケージ管理ツールをまとめてみる

15. linuxの基礎知識

　"linux標準教科書"というのが無料でダウンロードできるのでそちらをさくっと読んでしまうのがよいと思います。後は今後パーミッション、ソケット通信等を扱うのでそちらの知識やコマンドも合わせて抑えておくとよいです。

まとまった記事
“応用力”をつけるためのLinux再入門

16. Web技術の基礎知識

　個人的には"イラスト図解式 この一冊で全部わかるWeb技術の基本"という書籍がよくまとまっていてわかりやすいと思いました。しかも安い。
　上のような入門者向けの本を読んだら、次はWeb系エンジニア必読書と言われる"Webを支える技術"という書籍を読みましょう。

17. Ruby on Railsを体系的に学ぶ

　"パーフェクトRuby on Rails"はRuby on Railsガイドをハンズオン形式で学習できるような内容となっています。この書籍を読むことでRailsの基本的な概念に対する理解を深め、Rails付属の機能を扱えるようになります。コンテナやCIに関する内容も参考になりますが、この段階ではまだ未学習(のはず)なので、後々読んでみるとよいかと思います。

18. JavaScript本格入門

　"JavaScript本格入門"を読めばES6でJavaScriptをそれなりに書けるようになると思います。手元にあるとどうやって書くんだったかわからなくなったときに便利。

19. JavaScriptスタック

JavaScriptのツール全般(Node, NPM, Yarn等)についての知識です。
JavaScript Stack from Scratch
日本語訳は以下
ゼロから始めるJavaScript生活

Webpackについては"webpack 実践入門"という書籍が参考になります。

20. Vue.jsの基礎知識、チュートリアル

　SPAを構築するために使用します。あくまでRailsアプリにSPAを実装することが目的なので、基本のオプションとライフサイクル、コンポーネント間のデータフローを抑えておけば問題ないかと思います。学習の仕方としては"21Stepで体得 Vue.jsハンズオン"の1章、Step6, 11, 16を読んでやってみるとよいかと。

Railsへの導入方法は以下を参照。
Vue.js チュートリアル for Rails エンジニア(Vue3 version)

またaxiosに関しては以下を参照。
[フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う

21. ローカルで一度アプリケーションを作ってみる

　ここで一旦Railsアプリケーションをつくってみましょう。この作業の目的は
1. 自分でRailsのコードが書けるようになること
2. アプリケーションの要項の洗い出し
です。なのでこの段階ではアプリはガバでいいです。次つくるときにテスト駆動開発しましょう。

　因みに要項を洗い出す場合にはマインドマップが役立ちます。

22. Dockerの基礎知識、チュートリアル

　コンテナ仮想化を用いてアプリを開発するためのソフトです。私は"自宅ではじめる Docker入門"という書籍をやりました。Dockerfile, Docker Composeまでよくまとまっています。また"Docker/Kubernetes実践コンテナ開発入門"という書籍が有名?ですが入門者向きじゃないです。ただ(本番環境においても)コンテナ技術を使用するメリットを理解できるので、最初の章だけ読んでおけばいいんじゃないかと。

23. nginx、pumaの基礎知識

　Railsアプリの前段にリバースプロキシとして使用するWebサーバです。pumaとソケット通信させて使用します。"nginx実践ガイド"という本を読みましょう。pumaの使い方に関しては以下を参照。

Pumaの使い方 まとめ

24. MySQL入門

　RDBMSです。"MySQL徹底入門"という本を読みましょう。Docker Composeで扱う場合、主に関心事になるのは接続の仕方なのでユーザー管理の章を読んでおくといいと思います。因みに"基礎からのMySQL"という本もありますが、これは主にクエリについてまとめた本です(知らずに買いました)。

　またRailsチュートリアルではサブクエリをそのまま文字列として記述していますが、ActiveRecord::Relationオブジェクトは最終的にサブクエリとして展開されるので、基本的にSQL文をそのまま書くことはないと思います(多分)。

参考
railsチュートリアル　サブセレクトでなぜ高速化するのか

25. Dockerを使用した開発環境を構築する

　ここが鬼門です。なんせRails, nginx, MySQL, Dockerの知識をここで集約する必要があるので。後々自分でも解説記事を書こうと思います。

参考
Docker + Rails + Puma + Nginx + MySQL

26. AWSインフラ構築入門

　ここからは本番環境での運用を目的としたインフラを構築するための学習になってきます。"Amazon Web Services 基礎からのネットワーク＆サーバー構築"か"AWSではじめるインフラ構築入門"またはその両方をクリアしておくとよいと思います。正直何も考えなくても手さえ動かせばできてしまうのでしっかり検索練習しときましょう。

初期設定まわりは以下を参照。

リソースを削除する場合は以下を参考に。
全リージョンから全リソースを一括検索する方法【タグエディター】
全部消したと思って放っておくと一部のリソースが残っていてキャッシュから毎月数千円とかしょっぴかれてる場合があるのでご注意下さい(経験談)。

27. ECS, ECR基礎知識、チュートリアル

上で紹介した書籍ではコンテナ技術を使っていないのでECS, ECRも触っておきましょう。

初心者でもできる！ ECS × ECR × CircleCIでRailsアプリケーションをコンテナデプロイ

28. Terraform入門、実践

　TerraformとはIaC(Infrastructure as Code)を実現するためのものです。"実践Terraform"という書籍をクリアしましょう。正直Terraformを使用しなくてもデプロイはできるのですが、なぜTerraformを学習するとよいのかというと
1. 冪等性を利用して、破壊、再構築を何度でもできる。
2. 必要な情報のみをコード化して扱うのでロジックを理解しやすい。
3. 充実の公式ドキュメント
の理由からです。
　まず1について。インフラを運用する場合当然お金がかかります。因みにステージング環境と本番環境をESC、RDSのみ2つ用意し、それ以外の構成をホストベースルーティングで共有する環境を構築したとして、最低スペック、ほぼ未稼働で24時間あたりだいたい9ドル以上、日本円で1000円前後かかります。ただこれをコンソールで管理した場合、依存関係を認識しないとろくに削除もできないし、そもそもコンソールをいじっている時間だけ無駄です。
　次に2について。これもすごく大きいです。コンソールだと必要な情報が視覚的にまとまってないし、エラーもキャッチしにくいのでロジックを理解するのが難しいんですよ。対してコードで扱えば情報を自分でまとめられるし、構築時にエラーがちゃんとでるし、何よりコードを書いている間に理解が進みます。
　最後に3について。 公式ドキュメントがユースケース付きでまとまってて、すごく見やすいしわかりやすい。コード自体も別に難しくないので学習コストはそんなかかりません。それよりも必要な知識はAWSです。よってAWSに関しては以下を参照。

AWS

IAM

IAMロールに関しては以下を参照。

JSONポリシーに関しては以下を参照。
IAM JSON ポリシーの要素のリファレンス

Fargate

ECS Fargateに関しては以下を参照。
基礎から応用までじっくり学ぶECS Fargateを利用したコンテナ環境構築 #Fargate

"実践Terraform"ではFargate PV1.3.0を使用していますが、最新版は1.4.0で最新版を使用するにはエンドポイントが必要です。以下を参照。

秘匿情報

秘匿情報に関しては以下を参考に

ホストベースルーティング

ステージング環境については以下を参照。
まともなステージング環境"を考える

リスナールールでサブドメインとターゲットグループを紐付けられます。ホストベースルーティングについては以下を参照。

タスク定義

ECSのタスク定義に関しては以下。
タスク定義パラメータ

Terraform

またTerraformに関しては以下を参照。

DRY

Rails学習後にTerraformを学習してなんだこれ全然DRYじゃないじゃないかと思った方はいるはず。TerraformをDRYに書く方法に関しては以下を参照。
Terraformで複数台のEC2インスタンスを構築する場合のTIPS
ただこの記事はやや古いので最新の構文に関しては公式ドキュメントを参照。

他にもDynamicやforを使用することでDRYに書くことができます。

ディレクトリ設計

ディレクトリ設計に関しては以下を参照。
Terraformのディレクトリパターン集
Code structure

JSON

TerraformにはJSONオブジェクトなるものがあり、Terraform内の変数使ってJSONを記述できます。
JSON Configuration Syntax

29. Dockerを使用してテスト及び本番環境の構築

本番用のDocker環境を構築する上で必要になってくる知識は、
1. Credentials
2. アセットパイプライン
の2つです。
またテスト用の場合にはブラウザテストの知識が必要です。

Credentials

Railsで環境毎に秘匿情報を扱うためのものです。詳細は以下を参照。
利用環境のセキュリティ
Rails 6よりサポートされたMulti Environment Credentialsをプロジェクトに導入する
Rails 5 から 6 にかけての secretes / credentials 周りの変遷

アセットパイプライン

アセットパイプラインとはjsやcssのアセットを集約するためのフレームワークです。詳細はRailsガイドを参照。特に"production環境の場合"という項目が重要です。
またFargateを利用する場合、開発環境のようにDockerボリュームを利用できないのでnginxとRails間で同じボリュームをマウントしアセットを共有するということができません。よってAssetSyncというgemを使用し、s3からアセットを配布します。AssetSyncに関しては以下を参照。

またCORSに関しては以下を参照。

ブラウザテスト

ブラウザを利用したシステムテストに関しては以下が参考になります。
2020年のRailsでブラウザテストを「正しく」行う方法（翻訳）

Rails用Dockerfileを構築する

Dockerfileの構築に関しては以下が参考になります。

マルチステージビルドに関しては以下。

.dockerignoreに関しては以下。

またブラウザテストはdocker-seleniumを使用せずRailsと同じコンテナにchrome用のパッケージを入れることでも行えます。以下が参考になります。
Rails on Docker(alpine)でdocker-seleniumを使わないでSelenium+RSpec+Capybaraでテスト自動化してみる

また本番環境用のDockerfile構築には以下が参考になります。
【Dockerfile全解説】Rails本番環境のための一番シンプルなDockerイメージを作る

30. CircleCIの基礎知識、チュートリアル

CircleCI自体は難しくありません。ECS, ECRの場合、CircleCIのOrbsという機能を使えば簡単にデプロイできます。"CircleCI実践入門"という書籍を読みましょう。特に"Obrsを使った継続的デプロイの実践例"という項目をやっておくとよいと思います。

31. テスト(RSpec, Capybara)

RSpec, Capybaraの書き方に関しては以下が参考になります。

公式ドキュメントは以下です。

32. アプリ開発開始

ここから実際にアプリをつくっていきます。新規プロジェクトを作成するときには以下の記事を参考に。
新規Railsプロジェクトの作成手順まとめ

33. 自動デプロイ

Railsのディレクトリ内に.circleci/config.ymlをつくりCircleCIで自動テスト、自動デプロイを行えるようにします。以下の記事が参考になります。

また公式のObrsは以下を参照。

34. テスト駆動開発

あとはテスト駆動開発を進めていきます。

おわりに

このロードマップは割とDeveloper Roadmapに沿ったものになっているかなと思います。改めてDeveloper Roadmapを見るとその有用性がわかります。ロードマップというのは順を追ってみていくのが普通ですが、このロードマップが真に有用である点は知識の依存関係がわかることです。目的の知識から逆順にたどっていくことで、それを理解するにはどんな知識が必要なのかある程度的を絞ることができます。独学をしてつまったときには一度、それにはどんな知識、技術が関わっているのかを考えてみるとよいかもしれません。
　一から何かを独学しようなどというのはなかなか酔狂なことだと思いますが、この記事がそのような方の役に立てば幸いです。最後に改めて参考リンクの記事を書いてくださった方々に感謝です。有難うございました。

17
28
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
28