Todo ウェブアプリを作ってみよう

はじめに

本ドキュメントについて

本ドキュメント「Todo ウェブアプリを作ってみよう」では、下図のようなシンプルな Todo ウェブアプリケーション(以降ウェブアプリ)をゼロから組み立てて、MAGELLAN で動かすまでの過程を解説します。

Todo ウェブアプリを操作している様子

組み立てる Todo ウェブアプリは、次のような実装上の特徴を持つウェブアプリです。

  • Ruby および Ruby on Rails (以降 Rails)フレームワークを使用
  • Todo データの管理には、Google Cloud SQL (以降 Cloud SQL)データベースを使用
  • ウェブビューの部分には、ReactBootstrap を使用

ウェブアプリを作ってみよう 」の Hello World ウェブアプリよりも実践的なウェブアプリです。

この Todo ウェブアプリの作成と、MAGELLAN で動かすまでの過程をとおして、

  • ウェブアプリの作成に MAGELLAN の知識が不要なこと
  • Cloud SQL (データベース)との連携方法
  • MAGELLAN (Worker) 用 Rails アプリの Docker イメージの作り方
  • デプロイの基本

などが学べます。

本ドキュメントは、ウェブアプリそのものの作り方や、Ruby、Rails、React、Bootstrap および Cloud SQL などを学ぶドキュメントではありません。といっても前提知識として、これらの知識が必要というわけではありません。本ドキュメントでは、ウェブアプリを作り、MAGELLAN で動かすまでの完全な手順とコードを示しています。このため、これらの知識がなくても、解説どおりに進めるだけで、上記のことが学べます。

前提

本ドキュメントは、「試してみよう 」を実践していることを前提にしています。「ウェブアプリを作ってみよう 」を実践しているとなお良いでしょう。

また、デプロイでは、MAGELLAN アカウント取得時に自動で作成された環境を使用します。特に、ステージ DefaultStage1 およびクライアントバージョン DefaultStage1 が初期状態であることを前提にしています。

試してみよう 」や「ウェブアプリを作ってみよう 」を実践している場合は、以下の手順で、ステージ DefaultStage1 およびクライアントバージョン DefaultStage1 を初期化(再作成)しておきましょう。

  1. クライアントバージョン DefaultStage1 の削除
  2. ステージ DefaultStage1 の削除
  3. ステージ DefaultStage1 の作成

デフォルトデプロイ環境のリセット操作

(↑クリックで拡大表示)

以下、それぞれについての詳細な手順です。

1. クライアントバージョン DefaultStage1 の削除

クライアントバージョン DefaultStage1 の削除手順は、次のとおりです。

  1. MAGELLAN コンソールにログインした直後の画面から、「DefaultProject1」のリンクをクリックします。

    プロジェクト DefaultProject1 の画面に切り替わります。

  2. Client Versions」タブをクリックします。

    クライアントバージョンの管理画面に切り替わります。

  3. DefaultStage1 の行右端の 鉛筆アイコン をクリックします。

    「クライアントバージョンの編集」画面が表示されます。

  4. Delete ボタン をクリックします。

    削除を確認する画面が表示されます。再度、Delete ボタン をクリックします。クライアントバージョン DefaultStage1 が削除されます。

2. ステージ DefaultStage1 の削除

ステージ DefaultStage1 の削除手順は、次のとおりです。

  1. Stages」タブをクリックします。

    ステージの管理画面に切り替わります。

  2. DefaultStage1 の行右端の 鉛筆アイコン をクリックします。

    「Stage の編集」画面が表示されます。

  3. Delete ボタン をクリックします。

    削除を確認する画面が表示されます。再度、Delete ボタン をクリックします。ステージ DefaultStage1 が削除されます。

3. ステージ DefaultStage1 の作成

ステージ DefaultStage1 の作成手順は、次のとおりです。

  1. Create Stage ボタン をクリックします。

    「Stage の作成」画面が表示されます。

  2. 次表の内容に沿って、情報を入力します。

    フィールド名
    Stage Name DefaultStage1
    Stage Size micro (vCPU 1 / Memory 200M for each worker)
    Stage Type development
    Authentication 認証あり
  3. Create ボタン をクリックします。

    ステージ DefaultStage1 とクライアントバージョン DefaultStage1 が作成されます。

手順

今回の Todo ウェブアプリは、次の手順で開発を進めます。

  1. 開発環境を準備する
    Rails アプリの開発環境を準備します。
  2. シンプルな Web API を Worker に実装する
    初めに、シンプルな Web API を提供する Worker を実装します。
  3. Worker をバージョンアップし、データベースを使用する
    次に、Worker をバージョンアップし、Todo データを管理する Web API を実装します。Todo データの管理には、Cloud SQL データベースを使用します。
  4. Worker にウェブビューを実装する
    最後に、ウェブビューを実装し、Todo ウェブアプリを完成させます。

それでは、「開発環境を準備する」から始めましょう。