【SPA化】RailsアプリをCircleCIを使ってAWSにデプロイするまでのロードマップ【Fargate】

AWS
2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

こんにちは、咲矢です。

今回はプログラミング(Web開発)初学者が、RailsアプリのDockerコンテナをAWSにデプロイするまでに、ぼくが実際に学習した方法を紹介したいと思います。

特に、DokerやCircleCI、ECSなど設定が難しいものも多いので、どんな教材やサイトを参考にしたかを紹介していきたいと思います。

この記事を読むことによって、「RailsとNuxt.jsを使用したアプリを、CircleCIを使ってAWS(Fargate)にデプロイする」までに必要な学習教材に悩まなくて済むようになります。

ポートフォリオにモダンな技術を取り入れたいけど、何を参考にすればいいのかわからない
情報が散らばりすぎて、体系立てて学習できる教材が見つからない

という方の参考になるようにまとめてみました。

 

前提

プログラミング初心者でも、このロードマップをひとつひとつ前進していけば必ずゴールにたどり着けます。

とはいうものの、漠然と教材を進めれば良いというわけでもないので、「最低限これは必要」というものを上げておきます。

  • パソコンを持っている
  • コンピュータやプログラミングに興味がある
  • 日頃からある程度パソコンを触っていて、普通に使える
  • インターネット環境
  • 多少の出費

パソコンは必須です。インターネットはスマホのみという方はちょっと厳しいので、パソコンを用意しましょう。

パソコンが好きでプログラミングって楽しそうと思える人は、モチベの維持がしやすいです。

日頃からパソコンに触れている人は、基本の操作で戸惑うことが少ない分、スムーズに学習できるでしょう。

オンライン教材を含むためインターネット環境が必要ですが、この記事を見ているという時点で問題ないでしょう。

何かを身につけるということは、身銭を切って学ぶことも必要になります。
とは言っても、そんなに高額なものは必要ありません。
二万円から五万円もあれば、教材からサービスの利用料までまかなえます。

学習する技術やそのための教材、ロードマップの骨格は、ぼく自身が学習の際に参考にさせていただいた書籍を紹介しておきます。
勝又健太氏の著書、「Web系エンジニアになろう」です。

 

勝又さんはYoutubeやオンラインサロンなどで、エンジニアになるための情報を発信していらっしゃる方です。
ぼくはこの本を参考に以下の技術を使ったのアプリを作ることが出来ました。

  • 言語:Ruby
  • Webフレームワーク:Ruby on Rails
  • 開発環境:Docker
  • データベース:MySQL
  • プロジェクトのバージョン管理:Git、GitHub
  • テストフレームワーク:Rspec
  • CI/CDパイプライン:CircleCI
  • 本番環境:AWS(ECS)
  • コンテナ基盤:Fargate

また、ぼくはエディタに「VScode」を使用したので、こちらを推奨します。

それでは実際に学習を進めていきましょう!

開発基礎編

■ オンライン学習サービスを使ってプログラミングの基礎を学ぶ

HTML/CSS基礎基礎は、Progateの「HTML/CSSコース」と、ドットインストールの「はじめてのHTML」・「はじめてのCSS」をやっておきましょう。

JavaScript基礎は、Progateの「Javascriptコース」と、ドットインストールの「詳解Javascript基礎文法編」をやっておきましょう

バックエンド言語の基礎として、Progateの「Rubyコース」とドットインストールの「Ruby入門」をやっておきましょう。

これらのコースを一通り学ぶには、どちらのサービスも無料の範囲を超えるので、月額1,000円程度の課金が必要ですが、Progateで学習を終えたらドットインストールというよう に、一ヶ月ずつ課金する程度でも学習を終えることは可能です。
本を一冊買ったと思って、自分に投資しましょう。

またこの2つのサービスは、後で紹介するデータベースやRuby on Railsなどの学習にも利用します。

Progate:https://prog-8.com/
ドットインストール:https://dotinstall.com/

■ 書籍で基礎を学ぶ

実際にプログラミングを学んでみて楽しいと思えたら、次のステップに行く準備として基礎を固めておきましょう。

・コンピュータサイエンス基礎
プログラムを作る上で、コンピュータの基礎知識は必要です。
ぼくは基本情報技術者試験の参考書で学習しました。
選んだのは「キタミ式イラストIT塾 基本情報技術者」です。
参考書の中では評判も良いので、こちらを使用しました。

・キタミ式イラストIT塾 基本情報技術者
・Linux基礎
サーバーではLinuxが使われていることが多いです。
また、開発環境でもコマンドで指示するのにLinuxの知識は必要です。
こちらは「Linux標準教科書」が有名なので利用しました。
サイトへのメアド登録は必要ですが、PDF版なら無料で読めます。

■ データベース基礎

Webアプリでユーザー情報や投稿を扱うには、データベースというものを利用します。
データベースとはどういうもので、どうやって操作するのかというのは必要な知識です。
Progateの「SQLコース」で基本を学びましょう。
また、少し難易度は上がりますがドットインストールの「MySQL入門」もやっておくと、よりデータベース操作を深く学べます。

Progate:https://prog-8.com/
ドットインストール:https://dotinstall.com/

■ 知識の補強

Webサービスはネットワーク、サーバー、データベースなど様々な機能が連携して動いています。
ネットワークとデータベースについて書籍で学んでおくと良いでしょう。
ぼくは以下の2冊で勉強しました。

基礎はこの2冊でおさえられるのでオススメです。

・おうちで学べるデータベースのきほん
・イラスト図解式 この一冊で全部わかるWeb技術の基本

■ Ruby on Railsの学習

ここまで来れば基礎学習はほぼ終わりです。
Progateの「Ruby on Rail5コース」に挑戦しましょう。
学んできたRubyやHTMLなどの知識を活かして、Webアプリ開発の基礎を学びましょう。

■ GitとGitHub基礎

プログラミングのバージョン管理といえばGitですよね。

Gitがどんなものがよくわからないという方は、Progateの「Gitコース」でどんなものなのか掴んでおくと良いでしょう。

さらにGitHubを使えるとWeb上でソースコードをバージョン管理することができ、とても便利です。

最終的にはGitHub上のソースコードを更新したら本番環境に反映されるというところまでやりたいので、この知識は必須になります。

学ぶにあたっては、山浦さんのUdemy講座
Git:はじめてのGitとGitHub
が非常におすすめです。
無料で基礎が身につけられます。

次に挑戦する「Rails チュートリアル」で必要な知識なので、基礎を固めるためにもやっておくと良いです。

さらにGitについてもっと詳しく知りたいという方は、有料ですが
Git: もう怖くないGit!チーム開発で必要なGitを完全マスター
という講座もあります。
この講座を一通りやれば、バージョン管理をきちんと出来るようになります。
ぼくも実際にやりましたが、Gitの曖昧になりやすい部分がわかりやすく説明されているので、こちらもとてもおすすめです。

■ Rails チュートリアルに挑戦する

基礎学習の最後として「Rails チュートリアル」に挑戦しましょう。

この教材を最後までやりきれば、Web開発の基礎はクリアと言っていいでしょう。
難しいと言われていますが、そのためにここまで基礎学習を積み重ねてきました。
これまで学んだことでこの教材をやりきる力は身についています。
実際に動くアプリを作ってみることにより、自分の成長を実感できるはずです。

この教材は有料ですがWebテキスト版なら1,078円(税込)で購入できます。
自分は利用しませんでしたが、テキストだけでは難しいという場合は、少々値ははりますが、動画版もあります。

テキスト購入時の特典に、動画を一部試聴出来る特典があるので、試しに利用してから購入を検討すると良いでしょう。

Railsチュートリアル:https://railstutorial.jp/

開発発展編

■ 動画で環境構築を学ぶ(Docker & CircleCI)

実際にアプリを作れる力が身についたら、開発環境をDockerに移行しましょう。
Dockerを使えば、他のチームメンバーと同じ条件(環境)で開発を行えたり、本番環境に近い状態で開発できるので、本番環境でのトラブルを減らせるなど、メリットがあります。

Dockerの環境構築に関しては、エンジニアであり、様々な学習教材を発信している、山浦清透さんの動画がおすすめです。

山浦さんの動画シリーズに、DockerでRailsとMySQLを動かすチュートリアル動画があります。
この動画を見ればRailsのコンテナが、コマンド一発で立ち上がる環境を作ることが出来ます。

また、自動デプロイを可能にするCI/CDパイプラインの構築についても、この動画シリーズで学べます。
GitHubとCircleCIを連携して、DockerコンテナをHerokuにデプロイする方法を、とてもわかりやすくまとめられてます。

Dockerは、このロードマップの目標である「Fargateを利用してAWSでアプリを動かす」ことに必須です。
また、CircleCIはコンテナを自動デプロイしてサービスに反映させるのに必須です。
ぜひ、やりぬきましょう。

また、Dockerの定番入門書籍として
Docker/Kubernetes 実践コンテナ開発入門
があります。
この書籍の第3章まで学習すれば基礎的な内容は身につきます。
こちらも合わせて参考にしてみてください。

■ テストにRspecを導入する

ここまでやれば、開発からデプロイまでの流れがスムーズになっていると思います。
そこで、Rspecを導入して、一歩進んだテストコードを書くことに挑戦しましょう。

Rspecを学ぶには
Everyday Rails – RSpecによるRailsテスト入門
という教材が良いでしょう(価格:$19.00~)。

この教材で基本を学べば、Rspecでテストを書けるようになり、テストのことでわからないことがあっても、調べる力が身に付きます。

■ AWSの基礎を学ぶ

RailsチュートリアルではHerokuにデプロイしてきましたが、目標はAWSにデプロイすることです。
この段階でAWSの基礎を学んでおきましょう。

ぼくが利用した教材は
AWS基礎からのネットワーク&サーバー構築
という本です。
この本はAWSを利用して、サーバーを立ち上げてWordpressをインストールして動かすところまでを、ハンズオン形式で学習できます。

ネットワークの構築やサーバーの立ち上げなど、AWSでサービスを公開するための基礎が一通り身につきます。

AWSを触るのが初めてという方でもわかりやすく書かれているので、デビューにオススメで1冊です。

「VPCにEC2でサーバーを立てて自宅からSSHでログインする」
などという呪文のような言葉も、この本をやりきれば、その意味が理解できるようになっているでしょう。

■ コンテナ基盤にFargateを利用する

EC2の基礎ができたところで、今度は単純にサーバーを立ち上げるだけでなくDockerコンテナをAWSで動かせるようになりましょう。

これは、クライン【KLEIN】さんのYoutube動画、
AWS入門シリーズがおすすめです。

この2本の動画でECSとFargateの基礎が身につきます。

■ Vue.jsの基礎を学ぶ

Vue.jsは、JavaScriptのフレームワークです。
WebアプリのSPA化にも使われている技術です。

Vue.jsを初めて触る人が何となくどんなものかを把握するにはこのサイトがわかりやすいでしょう。

また、中村祐太氏のYoutubeにある「Vue.js入門」シリーズもやっておくと、全体のイメージをつかめるでしょう。

次の段階のNuxt.jsをさわれる程度でいいので理解しておきましょう。

■ Nuxt.js入門

いよいよ、Nuxt.jsを使ったアプリを開発してみましょう。
こちらは、中村祐太氏のUdemy講座、
Nuxt.js入門決定版!Vue.jsのフレームワークNuxt.jsの基本からFirebaseと連携したSPAの開発まで
という講座が、おすすめです。
有料ですが、Nuxt.jsでSPA化したアプリを開発したい方にとっては、相応の価値があると思います。
この講座をやれば、Nuxt.jsのインストールからFirebaseを使用したサービスの公開までを学習できます。

■ SPA化したサービスを作ってAWSで公開する

いよいよ最終段階です。
ここでは「zenn-app」という教材を使います。

zenn様のサイト記事:zenn-app

このハンズオンでは、Rails(APIモード)とNuxt.jsのコンテナを連携したSPAの開発を行います。
また、最終的には、CircleCIを使ってAWSにデプロイするところまでやります。

ここまでやりきれば、次のことが出来るようになります。

・CircleCIを使ってCI/CDパイプラインを構築する
・コンテナ基盤にFargateを使用する
・AWSでECRとECSを使い、自動デプロイする

加えて、ここまでやってきた皆さんは、すでにSPAの開発基礎を学んできています。

今まで学んできたことを応用すれば、レベルの高いポートフォリオの作成が可能となるでしょう。

まとめ

ぼく自身、実際にここまでを学習し、Railsチュートリアルに機能を追加したものを、CircleCIを使ってDockerコンテナをAWS(Fargate)にデプロイするところまでやりました。

ぼくのリポジトリのリンクを置いておきます。→リンク
色々突っ込みどころはあるコードですが、参考にどうぞ。

Railsチュートリアルまでは、すでに提示されている教材をこなすだけなので、何を勉強すればいいのかわからないという点で、悩むことは無いと思います。

ここまでやりきる過程で難易度が特に高いと感じたのは、CircleCIを使ったAWSへのデプロイでした。

  • とにかく、教材が見つからない。
  • 公式ドキュメントを読んでもよくわからない。
  • 独学では無理なのか・・・。

と何日も行き詰まりました。
そんな中でたどり着いたのが、「開発発展編」で紹介した教材でした。

ぼくがこれまでやってきたことをまとめれば、Webアプリ開発の学習で悩んでいる方の手助けになるのではないかと思い、記事にしました。

ここまでやれば、完全SPA化したオリジナルのサービスを開発したり、更に技術を追求してTeraformによるインフラのコード化に挑戦するなど、次のステップに進むことも可能だと思います。

この情報が、ポートフォリオ作成の参考になれば幸いです。

それでは、良いプログラミングライフを!


参考記事

【Docker】Railsアプリのコンテナが立ち上がらない【Rails】

【AWS】ヘルスチェックが通らないを解決する【Fargate】

【入門】Terraformを最速で始める【6ステップ】

コメント

  1. siriusjunior より:

    railsチュートリアルをちょうど完走したところでモダンなポートフォリオを作成するのに噛み砕いたハウツー情報があってありがたいです!勝又さんの情報も盛んですが、手頃な教材ってとこもありがたい。続報を期待しつつ、参考にさせていただきます。ありがとうございます!

    • 咲矢 咲矢 より:

      コメントありがとうございます。
      railsチュートリアルを終えてからの学習が難しく、学習方法を紹介した記事があったらいいなと感じたので、自身の経験を元にまとめてみました。お役に立てて何よりです。ポートフォリオづくりがんばってください!

タイトルとURLをコピーしました