【単独アプリ開発】物々交換アプリを作ります!!!【モダンなWebアプリ制作】

  • このエントリーをはてなブックマークに追加
  • LINEで送る
モックアップの画像

こんにちは、0371です。

今回は「学校の中で使う、物々交換Webアプリ」をMacOSの環境で作ります!!!

この記事は完成するまで、更新し続ける予定です。(あまり期待はしないでねw)

スポンサーリンク

【1. アプリ制作 – 制作の構想を練る編】

まずは、どのようなアプリを作るかを考えます。

基本的には、

  • 自分があったらいいなと思うもの
  • 身近で困ってる人を助けることができるもの

を作成するのが一番良いです。

 

理由としては、作ったアプリを使ってくれる人が必ず一人は存在するためです。

単純にモチベにつながります。モチベはめっちゃ大事。

 

もしくは、既に世に出回っているアプリを模倣するのもいいと思います。

車輪の再開発は、勉強するのには良いことだとされているので、堂々とパクっていきましょう。(口が悪い)

 

自分は後者の模倣をする方法をとります。

今回は「学校内で使用する物々交換アプリ」を作っていきます

機能面は既存のアプリを模倣して、デザインなどで自分らしさを出していく予定です。

 

— おまけ —

※勉強のためにアプリを作成する場合は、上記の方法でいいと思います。

しかし、より実践的にアプリを作りたいのであれば、きちんとペルソナを設定した方がいいと思います。

  • 誰が
  • どんなとき
  • どのように

というように、深堀りしていくことで、ターゲットを絞ったアプリケーションを作成することができます。

 

例として、生鮮系のマッチングアプリを作るとするならば、

  • 副業をしたい魚を捌ける人 – 立派なお魚をもらったけど、うまく捌けない若者
  • 仕事や漁がオフのとき – お魚をもらったとき
  • 場所を指定して、公共のキッチンで捌く – 報酬を支払う or 料理を振舞う

みたいな感じですかね。多分これでも足りないんじゃないかなと思います。

 

・・・本当は設計書とか要件定義をしっかりした方が実務でも役に立ちます。(と先生が言ってました)

今回は個人制作なので厳密に決めなくてもいいかもですが、チームで開発の時は超重要。

次回アプリを作るときは、UMLを活用するところから取り組もうと思います。

 

【2. アプリ制作 – モックアップ編】

モックアップの画像

まずは、上の画像のような、「モックアップ」の作成です。

モックアップとは、Webサイトなどのデザインを確認するための試作品という意味があります。

これは紙とペンによるアナログのものでも、Webサービスを活用したデジタルなものでも良いです。

 

メリットとしては、

  1. 思いついたイメージを、目に見える形で書き写すことができる
  2. モチベーションの維持
  3. 必要な技術の整理が楽

などが挙げられます。

 

特に一番目が大事です。

人間の記憶力は当てになりません。

どんなに素晴らしいアイデアでも、パッと思いついたものは、明日になればほぼ確実に忘れています。(自分だけですかね?w)

簡単にでも良いので、必ずアイデアをデータとして残しておきましょう。

 

今回は「fluid」というモックアップツールを使用しました。

このツールは直感的なUIで、英語が読めない自分でも簡単にモックアップを作成することができました。

簡単なアプリであれば、無料枠による制限があっても十分です。

 

FluidのUI

左のメニューにあるデザインの素材を、ドラッグ&ドロップで貼り付けていきます。

BootStrap調のデザインになるため、実装時のデザインの再現度も必然的に高くなると思います。

 

まずは、モックアップを作成しましょう。

 

【3. アプリ制作 – 必要な技術の棚卸し編】

さて、簡単なモックアップを作成することができました。

すると、自分の作りたいアプリに、どんな機能が必要なのかというのが見えてきたはずです。

大雑把に、アプリの機能の棚卸しをしていきましょう。

ここでは、自分のモックアップを例にして、説明していきたいと思います。

 

【トップ画面】

このモックアップの特徴は、新規登録とログインのためのボタンがあることです。

つまり、このアプリにはログインの機能を実装する必要があることがわかります。

 

他にも、ヘッダーの右に、ユーザーアイコンを表示するためにデータベースから画像を取ってくる機能とかも必要ですが、細かいところはそんなに深堀りしなくてもいいかなと考えていますw

最初に細かく設計しなければならない「ウォーターフォール型の開発」よりも、機能の変更が高い頻度で発生するような「アジャイル型の開発」の方が、挫折しにくいと思うためです。

この辺のベストプラクティスはわからないので、身の回りに先輩がいる方は聞いた方がいいかも・・・orz

 

【ログイン、新規登録画面】

ログイン、新規登録画面

ここでは、ユーザーが自分の情報を入力することになります。

必然的に、入力したものを記憶させるデータベースも必要です。

「account」テーブルみたいな感じですかね?

 

入力する項目としては、

  • クラス名
  • 名前(ニックネーム)
  • パスワード

この三つを想定しています。

 

学校内で全て完結するアプリであるため、「性別」や「住所」などの項目は排除しています。

クラス名すら要らないかもしれませんが、学生同士の交流に繋がるかなと思い、あえて残しています。

 

クラス名の入力ですが、データベースで管理することを考えると、プルダウンメニューによる選択式の入力の方がいいと思います。

クラス名がコロコロ変わる場合は、どうすればいいんでしょうね?w(せいぜい30~40人だし、一年に一回くらいだと思うので、手直しでもいいかな?)

 

名前はニックネームでもいいと思っています。

ネットリテラシーの問題や、プライバシーの関係でね。

 

パスワードは「・・・」で表示されるようにします。

それから、入力されたパスワードは「POST」で受け取るようにしなければなりません。

「何がなんのことやら?」と思う方は「GETとPOST」などの検索ワードでググりましょう。

 

そして、ユーザに入力させるということは、SQLインジェクションや、スクリプト攻撃の対策を取らなければいけません。

これをしないと、データベースを壊されたり、パスワード書き換えが発生してしまいます。マジでやばい。

「学生にそんな奴いないだろ〜」と思う方いるかもしれませんが、自分のクラスにいます。

 

なんと生徒全員のパスワードを「1」にしてしまいました!!!!!

その後、先生がデータをロールバックしました。めでたしめでたし。(公共の場では犯罪ですので、絶対にしないこと)

 

必ず「サニタイジング」(エスケープ処理)で、対策を施すようにしましょう。(言語によっては自動でやってくれる場合もあります)

 

【出品一覧画面】

出品一覧画面

 

ここで、取引用のデータベースのテーブルがもう一つ必要になるはずです。

「transaction」だとデータベースの用語と混同してしまうので、「dealings」テーブルにしたいと思います。

 

他の機能は細かいものになるかな?

データベースでは、

  • 自分と取引中のフラグ、他者と取引中のフラグを立てて、第三者のアクセスを禁止する、画像に取引中の文字を入れるなど。

view(フロントエンドの部分)では、

  • データベースから、出品者の名前と
  • 出品の並び替えの機能(新着順、古い順など)
  • 出品の絞り込みの機能(カテゴリー別など)
  • 出品の検索機能(出品名の検索)
  • 画面右下あたりにtopまでスクロールするボタン

とかですかね?

・・・結構細かいところまで考えちゃいますねw

 

【出品詳細画面】

出品詳細画面

ここでは、データベースに格納している情報を表示することが多いので、特に書くことはなさそうです。

強いて言えば、

  • 取引画面に移行するボタンで、取引のフラグをONにする。

かなと思います。

 

・・・重大な抜けに気がついてしまいましたので、あとで発表します。

 

【取引のチャット画面】

取引のチャット画面

ここが今回のアプリの鬼門です!!!

詳しくは「chat-space」で検索していただければと思います。

 

これってどこかの教材なんですかね?

画像にはLINEっぽいチャットって書いてますが、Slackみたいな感じでもいいなと思いました。

チャットアプリは、作ったことがない未知の分野なので、理解するのに時間がかかりそう・・・orz

幸い、先駆者の方がgithubにコードをアップロードしてくれているので、それを見ながら実装していくことにします!

 

ちなみにユーザー入力があるので、「サニタイジング」は忘れずに!

 

【お問い合わせ画面】

お問い合わせ画面

ここでも「サニタイジング」します。

ここはGoogleフォームを利用しても良いと思います。(力尽きるため)

 

【???】

これで全部終わりです!!!

・・・ほんとに終わり???

いや、【出品投稿画面】がありませんでした。

前述の重大な抜けというのはこれです。

なので作ります。

適当になりました!!!

適当すぎて一番下に配置する投稿ボタンを忘れましたw

あとは未来の自分がなんとかしてくれるはずです。(投げ)

 

ここまでで上がったものをザッとまとめてみます。

 

  • ログイン機能
  • 「account」テーブル
  • 「dealings」テーブル
  • 入力欄はサニタイジング
  • パスワードは非表示、POST
  • chat-space
  • Googleフォーム

 

とりあえずはこんな感じ?

画面別に箇条書きで書いていくのが一番良いかもしれません。

作っていく上で、まだまだ出てくると思います。

このリストは随時更新していくと良いでしょう!

 

【4. アプリ制作 – プログラミング言語とサービスの選定編】

次にアプリを作っていく上で、使用する言語(フレームワーク)とサービスの選定をします。

本来の開発現場であれば、この段階で初めて選定に入ると思います。

 

しかし今回は、自分の勉強したい言語、サービスを使っていく方法でいきます。

現状、使っていく予定の言語、フレームワーク、サービスは以下の通りです。

  • HTML
  • Sass
  • Vue.js
  • Rails
  • AWS(Terraform、EC2、ECR、ECS、ALB、RDB)
  • Bitbucket
  • Docker
  • CircleCI
  • Googleフォーム

初めて見る人には、呪文のような単語がズラリですね。

しかも、この呪文のような単語は作っていく上でさらに増えていく可能性が極大です。

・・・でも、わからなかったら調べて解決すれば良いんですよ?!?!(錯乱)

何をどのように使っていくのかは、その都度紹介していこうと思います。

 

皆さんも勉強であれば、自分の使いたいものを使った方が良いと思います。

そのため、最初は使用するものにアプリの機能を合わせていくことになるかも?

 

— 解説 —

(分かる人は飛ばして良いよん)

 

いきなり意味不明なワードを突きつけられて混乱してしまう方もいると思うので、このブログで可能な限り完結できるように簡単に説明したいなあと思います。

わからなかったらググってください(丸投げ)

 

  • HTML

Webページを構成するマークアップ言語です。

タイトルを定義したり、見出しを作ったり。

99.999%のWebページでHTMLが使われています。

 

  • Sass(サス、サース)

CSS(カスケーディング・スタイル・シート)に、入れ子構造や変数などの機能を追加して、従来のCSSよりも記述しやすくしたメタ言語(言語を作るための言語)のことをいいます。

これは昨今のWeb制作では必須と言って良い言語なので、ぜひ学習しましょう。

可読性、メンテナンス性も向上します。

 

  • Vue.js

javascript(主に動きのあるWebページを作るために使われる言語)のフレームワーク(様々な開発の効率がよくなる便利な技術セット)です。

React、Angular、Vue.jsのいずれかを活用しているWebアプリが急激に増加しています。

Webに携わるのであれば、学習しましょう。

 

  • Rails

データベースを直接編集できる、コーディングテストの自動化が可能などの機能が備わったフレームワークです。

主にWebアプリ開発や、スマホアプリ開発などの、高速で開発しなければならないプロジェクトで活用されます。

フレームワークとしてのピークは過ぎたみたいですが、まだまだRailsエンジニアの募集はあります。

 

  • AWS

アマゾンウェブサービスの略称で、各種開発の面倒な部分をスムーズに行うことができる便利なクラウドサービスです。

数え切れないほどのサービスがあるため、Google先生に丸投げします。すみません。

Webアプリの仕事に就きたい方は、AWSの資格を持っていると、就職に有利になる可能性があります。

 

  • Bitbucket

VCS(バージョン管理システム)です。

ドラゴンクエストの「ぼうけんのしょ」に書いたコードの記録をセーブするイメージです。(わかりにくいかしらw)

これはチーム開発の時に真価を発揮します。今のうちに学習しましょう。

 

  • Docker

コンテナ型の仮想環境をつくるサービスです。

コンテナ型にすることで、従来の仮想環境よりも、軽量かつWindowsやMacなどのOSに依存しないなどの利点があります。

アジャイル開発には必須だと思います。学習しましょう。

 

  • CircleCI(CI / CD)

継続的インテグレーション(CI)と継続的デリバリー(CD)を実現するサービスです。

アプリの立ち上げ(ビルド)、コードのテスト、本番環境への反映(デプロイ)を自動で行ってくれます。

自動化による効率の良い開発は、これからの時代で必須となるでしょう。学習しましょう。

 

  • Googleフォーム

いわゆる「お問い合わせフォーム」です。

AWSとかにもっと良いサービスがありそう。

これを勉強するよりは「お問い合わせフォームの作り方」を学習した方が良いかも。

 

【5. アプリ制作 – 開発環境編】

長くなるので、何個かに分けます。

インフラやCIの構築には、時間がかかりますが、一度設定するとpushしてからの一連の流れを全て自動で実行してくれるので、開発が楽になります。

その構築を、この開発環境編で行っていきます。

【5. 1 – やりたいこと】

以下のリンクの電子書籍を参考にして、開発環境の構築を進めていきました。

モダンなWebアプリ制作準備の入門書として、我々を導いてくれます。

コンテナ時代のWebサービスの作り方【ダウンロード商品】 | 楽描商店

※購入にはpixivの会員登録が必要(なはず)です。

 

この技術本で取り上げられている方法により、以下のデプロイ手順を実現します。

  1. masterへpush
  2. CircleCiでCI開始
  3. CIでイメージをビルド
  4. イメージをECRへpush
  5. ECSのタスク定義を更新
  6. CIでmigration

・・・自分は「なんだこれ」と思いながら書いていますw

 

なぜこのようなことをするのかというと、

  1. Bitbucket、GitHubなどのVCSを使った開発
  2. CI/CDによる、ビルド・テスト・デプロイ自動化
  3. Dockerによる、コンテナ型仮想環境のビルド
  4. AWSなどのクラウドサービスの活用

この4つの体験をしたいからです。

 

さらに、上記の技術を活用したアプリを、ポートフォリオとして就活の時に活用すると「学生なのにすげえなあ!」と思わせることができるに違いありません!!!(邪悪な顔の早口オタク)

「何がどうなっているんだ・・・」という人は、上記技術本を読み、手を動かしつつ、分からない単語を調べていくうちに少しずつ理解できるようになっていくと思います。

 

ちなみに「なんだこれ・・・」は、まさに今の自分のことです。(白目)

様々なサービスが連携し合うため、実際に手を動かさないと覚えられないと思います。

未経験なので、40%の理解度でも許されると信じて突き進みましょう(?)

 

・・・本当はk8sもやってみたかったのですが、EKSの利用料金が高いということと、頭がパンクしそうだったので今回は断念しました。

教材はすでに用意しているので、余裕ができたらチャレンジします。

 

— 解説 —

  • Kubernetes(クバネテス、クーベネティス)

Dockerのコンテナオーケストレーションサービス(痒いところに手が届くツール)のことです。

略語で「k8s」と表記されます。学習コストが高いという評判。

未経験のうちに理解できたら神レベルというかもうそれは未経験ではないと思う。きっと。

 

  • EKS

ECS(AWS限定のコンテナオーケストレーションサービス)のk8s対応版です。

ECSとは違って、EKSで学んだことを他のサービスなどにも転用することができます。

しかし月額料金が高いため、今回は見送りさせていただきます。

 

【5. 2 – Rails環境を整える編】

では早速やっていきましょう!!!

解説は省略して、手順だけ書いていきます。

1.「Terraform」をhomebrewでインストール。

ターミナルに以下のスクリプトを記述し、実行していきます。

homebrewをインストールしてない方は、以下のスクリプトをターミナルに貼り付けて実行してください。

公式サイトはこちら。

https://brew.sh/index_ja

xcrun: error: invalid active developer path」というエラー文が出た方は、Xcodeをアップデートするとエラー修正することができるようです。

 

2. Terraformを使用するための「AWS IAM」の作成。

まずは https://aws.amazon.com/jp/iam/ にアクセスして、「AWS IAMの利用を開始するボタン」をクリックしてください。

AWSのアカウントがない方は、作りましょう。

 

そして、IAMにログインしたら、表記を日本語にします。

AWS IAM の日本語選択

 

その後、画面左のメニューから、ユーザーをクリックし、「ユーザーを追加ボタン」をクリックします。

ユーザーを追加ボタンを押す

 

次に登録するユーザー情報を入力していきます。

ユーザー名、「プログラムによるアクセス」にチェックしたら、「次のステップボタン」をクリックしてください。

ユーザー情報入力

 

アクセス許可の設定を「既存のポリシーを直接アタッチ」に変更し、リストの一番上にある「AdministratorAccess」をチェックしてから、「次のステップボタン」をクリック。

注意:AdministratorAccessは非常に強い権限ですので、他のユーザーなどに操作させないよう気をつけてください。Githubなどにはpushするときは必ずPrivateリポジトリにしてください!

AdministratorAccessの付与

そして、タグを付与せずに「次のステップボタン」をクリックし、確認画面で「ユーザーの作成ボタン」をクリックすると、以下の画像のようになるはずです。

ここでユーザー名と、アクセスキーID、シークレットアクセスキーIDをメモしておきましょう。

csvファイルでダウンロードしておくのがいいと思います。

これらはあとで使用します。

キーを控える

 

3. AWS CLIをインストール

ターミナルに以下のスクリプトを記述し、実行していきます。

pipのインストール、アップデートはこちらです。

pythonのインストールで、pipの自動的にインストールされます。

 

4. AWSのCloud9の使用

AWSのCloud9を使用して、アプリを作っていきたいと思います。

以下のURLにアクセスし、「AWS Cloud9を開始するボタン」をクリック。

https://aws.amazon.com/jp/cloud9/

 

そのあとで、「Create environment(環境作るよ)ボタン」をクリック。

 

Cloud9の開発環境の名前と、説明を入力します。

右上のリージョン選択はあとで行うかもしれません。今はこのままにしておきます。

Cloud9のタイトルと説明入力

右下のボタンを、以下の画像のようになるまでクリックします。

Cloud9の画面

 

次に、画面右上の歯車マークをクリックして、tabキーの設定を変更します。

4 → 2 にしましょう。Cloud9の設定は自動保存です。

タブを2にする

ちなみに、カラーテーマの変更は任意!

 

5. Webアプリケーションの作成

では、Cloud9にRailsをインストールします。

Cloud9のターミナル

上の画像にある矢印の位置にCloud9のターミナルがあるので、そこに以下のスクリプトを順番に記述し、実行します。

Rails 6以降からは、「Webpacker」が必要になったので、それもインストールします。

トライアンドエラーでやったので、順番が前後してるかもしれませんorz

おかしいところがあったら教えてください。

 

次に、hogehoge/config/apprication.rb を開き、以下のコードに貼り変えてください。

Rails 6 以降からは「DNS Rebuilding 攻撃」の対策として、ホスト名をホワイトリストに登録しないといけないようです。( 参考サイト : https://loumo.jp/wp/archive/20190930120000/

「config.hosts.clear」によって、全てのホスト名でアクセス可能にしてます。(アホ)

 

最後にこのスクリプトを実行します。

すると、Cloud9のターミナルの最後に「Use Ctrl-C to stop」という表示が出てる状態になっているはずです。

その状態で、上のメニューバーにある「Preview」から「Preview Running Application」をクリックしましょう。

サーバーを立てる

 

すると、下の画面になります。

矢印の先をクリックすると新しいタブが開きます。

サーバーを起動した

 

この画面が見えたら成功です。

Rails version: 6.0.2.1 なので、現時点で最新版だと思います。

調べながらやったら3時間くらい経った・・・。

Railsの表示

 

次に、確認用のページと、ヘルスチェック用のURLを用意します。

適宜、ファイルを作成してください。

/app/controllers/top_controller.rb

 

/app/views/top/index.html.erb

 

/config/routes.rb

 

/app/controllers/health_check_controller.rb

これでとりあえずはOKです。

 

【5. 3 – BitBucket環境を整える編】

BitBucketにログインします。

https://bitbucket.org/

 

その後、ダッシュボードからメニューの「+ボタン」をクリックして、リポジトリを作成します。

リポジトリの作成

 

タイトルを記入します。

その下の「これは非公開リポジトリです」のチェックが入っていることを必ず確認してください。

確認したら、「リポジトリの作成ボタン」をクリック。

リポジトリの作成2

 

これで、リポジトリが作成されました。

矢印の部分のスクリプトのURLみたいな部分を使います。

できたわよ

 

ここで、Cloud9のターミナルに戻ります。

そこで、以下のスクリプトを順に実行していきます。

入力できない場合はターミナルで「Ctrl + C」を押すと、入力できるようになるはずです。

 

ちなみに、BitBucketでSSH認証しようとしている方は、レポジトリ用のSSHキー入力欄と、アカウント用の二つが存在することに気をつけてください。

id_rsa.pub(公開鍵)のハッシュを、アカウント用の方にSSH認証キーとしてコピペです。

自分は初心者だったため、この罠にハマってレポジトリの方にコピペしてしまうという、悲しい思いをしました・・・orz

 

【5. 3 – CircleCIでのCI環境を整える編】

それでは、作成したBitBucketのリポジトリにCircleCIの設定を追加していきましょう。

 

まずは、Cloud9で作成しているアプリに「.circleci」ディレクトリを作成します。

そして、その中に「config.yml」を作成。

 

「config.yml」は、CircleCIに必要な設定ファイルです。

Cloud9のターミナルに以下のスクリプトを記述し、実行しましょう。

自分の場合は以下の画像の通りです。

ディレクトリ構成

 

それでは、以下の公式サイトにアクセスし、アカウントを作成します。

https://circleci.com/ja/

初めてのCircleCI

 

「BitBucketでログイン」をクリックし、遷移先のページで「アクセスを許可」してください。

BitBucketに複数アカウントを持っている場合は、作りたいアプリの方のアカウントを選択してください。

全て行うと、以下の画面になると思います。

CircleCIの設定

矢印の「Set Up Project」をクリックしてください。

 

そうすると、以下の画面が表示されるはずです。

まだ青いボタンの「Start Building」はクリックしないでください。

言語選択シーン

 

左にあるプルダウンメニューから、一番下の太字の「Hello World」の部分をクリックし、表示された黒い画面のコードをコピーします。

 

そしてコピーしたコードを、先ほどCloud9で作成した「config.yml」に貼り付けます。

貼り付けたら、Cloud9で以下のスクリプトを実行します。(コメントはダサいから適宜変えてねw)

これで、CircleCIの設定ファイル「config.yml」をBitBucketのレポジトリにpushすることができました。

pushすることで、はじめてCircleCIが使えるようになります。

それでは青いボタンの「Start Building」をクリックし、次の画面へいきましょう。

config.ymlは作成済みなので、もう一度「Start Building」をクリックでOKです。

 

「Proceed to New UX」ではなく、右上の「×」ボタンをクリックして、以下の画面になると思います。

成功!!!

「SUCCESS」と表示されてたら成功!!!!のはずです・・・w(あとで確認します)

 

これで、BitBucketと、CircleCIの紐付けを行いことができました。

しかし、これだけではCI/CDの機能を活かしていないため、後ほどCircleCIの設定ファイルを書き換えていきます。

 

【5. 3 – Dockerイメージの作成編】

次に「Docker」との連携を行います。

 

以下のスクリプトをCloud9のターミナルで実行し、Dockerがインストールされていることを確認してください。

 

次に Docker の実行と、実行されたかの確認を行います。

エラー文が表示されなければ成功です。

これで Docker は Cloud9 上で実行されました。

 

次に、「Dockerイメージ」の構築を行います。

作成するアプリケーションのルートディレクトリに「Dockerfile」を作成します。

Cloud9のターミナルで以下のスクリプトを実行します。

その後、以下の記述をコピーしておいてください。この記述は技術本からお借りし、一部修正しました。

 

Dockerfileに記述するために「vi(vim)」というエディタを使用します。

慣れないと困惑するかもしれませんが、以下の手順で記述できます。

  1. 「command + v」 で先ほどコピーした記述を貼り付け。
  2. 「esc」 キーでinsertモードの解除。
  3. :wq と入力し、Enterキーを押して完了。

これで記述できました。(成功しましたとかの表示は出ません。)

 

記述したDockerイメージが正常にビルドされるかを以下のスクリプトで確認します。

この状態で http://localhost:4567 にアクセスし、ページが表示されれば完了です。

 

— 補足 —

 

※ここで、

のようなエラー文が出てしまった方は、以下の方法で解決できるかもしれません。

Cloud9のターミナルで以下のスクリプトを実行します。

ここで、/dev/xvdal の Use% が89%になっています。

単純に「容量が足りない」のだと思うので、EC2のインスタンス容量を増やしましょう。

 

AWSマネジメントコンソールにアクセスします。

https://console.aws.amazon.com/console

その後、サービスを検索するで、「EC2」と打ち込み、Enterで検索してアクセスします。

すると下の画像のような画面になるので、「ボリューム」をクリックします。

 

ボリュームのクリック

ページ遷移後に、作成したインスタンスの一覧が表示されます。

 

インスタンスの左にある四角いチェックボックスが青くなって選択済みになっていることを確認し、「アクション」→「ボリュームの変更」の順番にクリックします。

サイズの変更をします。

自分の場合は「10」だったので、最大サイズに近い「16」にしてみました。

ボリュームサイズの変更

この画面が出たら成功です。

ボリューム変更の成功

右上の更新マークをクリックし、サイズが16GiBになっていることを確認しましょう。

ボリューム変更の確認

次に、ボリュームサイズ変更後の /dev/xvda1 のパーティションの拡張を行います。

AWSのドキュメントに説明が詳しく書かれています。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html

Cloud9のターミナルで以下のスクリプトの実行すると、パーティションの拡張ができます。

では、Docker build してみましょう。

REPOSITORYに自分のアプリ名があれば成功です。

 

ちなみに、ボリュームを変更せずに問題解決をしようと、以下のことを試しましたがダメでした。

  • $ Docker images で出てくる、使ってなさそうな lambci/lambda のDockerイメージを削除してみる(意味なかった)。
  • EC2インスタンスの再起動(変化なし)。
  • Railsのtmpファイル内の cache の削除(100MBしか空き容量増えなかった)。

素直に容量増やした方がいいですね。

 

— 補足終わり —

 

ちなみに、docker images で <none> というリポジトリがあったら消しておきましょう。

build に失敗してしまったイメージなので、不要です。

 

【5. 4 – Terraformでインフラのコード化を目指す編】

AWSのインフラ周りをコード化していきます。

インフラのコード化を「infrastructure as code」と呼びます。

仕様書と睨めっこしなくても良い、誰が構築しても同じインフラになる等のメリットがあるようです。

 

まずはBitBucketに、Terraform用のリポジトリを作成します。

自分は「terraform-firstapp」という名前にしました。

レポジトリの作成

作りました。

このリポジトリには、ECR、IAM、VPC、ECSなどのサービスを提供するリソースを保存していきます。

 

次にECRを作成するための準備をしていきます。

ローカルで適当にディレクトリを作り、その中に.tfファイルを作成していきます。

 

terraform-firstapp/ecr/aws_ecr_repository.tf

 

「config.tf」には、インフラの情報を保存する tfstate の保存場所を指定します。

terraform-firstapp/ecr/config.tf

 

次にAWS S3で、tfstate を保存するバケットを事前に作成しておきます。

S3でのバケット作成を行わないと、のちにターミナルで実行する「terraform init」で、以下のようにバケットが存在しませんと怒られてしまいます。

 

というわけで、AWSコンソールから、S3を選択してください。

すると以下の画面になるので、「バケットを作成する」をクリックします。

バケットの作成

 

バケット名は先ほど付けた、ユニーク・一意な名前にします。

リージョンは自分の作るアプリの存在するところがいいと思います。

その後、左下の「作成」を押すことでバケットの作成が完了します。

バケットの作成

 

この状態で、ターミナルに以下のスクリプトを入力・実行することで、ECRのリソースを作成することができます。

apply 時に入力を求められる箇所がありますが「yes」と入力してください。

Apply complete! と表示されていたら成功です。

 

AWSコンソールから、ECRにアクセスし、リポジトリが作成されていたら成功です。

レポジトリの確認

レポジトリのURIは、5.5章でDockerイメージをpushするときに使用するので控えておきます。

 

次に AWS IAM ユーザを terraform によるリソースで作成します。

 

terraform-firstapp/iam/aws_iam_user.tf

 

terraform-firstapp/iam/aws_iam_policies/ecr_policy.json

(これは jsonファイル というのと、aws_iam_policies というディレクトリを挟んでいるので注意!)

 

terraform-firstapp/iam/aws_iam_policy.tf

 

terraform-firstapp/iam/aws_iam_user_policy_attachment.tf

 

terraform-firstapp/iam/config.tf

 

この状態で、ターミナルで以下のコマンドを順に実行していきます。

これで、AWSコンソールの IAM のページで、deploy-user が作成されました。

見に行ってみましょう。

下の画像にあるように、作ったユーザ名が表示されていればOKです。

そのままユーザ名をクリックします。

IAMユーザの追加確認

 

「認証情報」タブをクリックし、「アクセスキーの作成」をクリックします。

アクセスキーの作成

アクセスキーとシークレットキーを控えておきましょう。

5.5章で使用します。

 

【5. 5 – CircleCI で Docker イメージをビルドし ECR に push するぞ編】

もはや自分でも何を言っているのかわからなくなってきましたw

頑張りましょう。

 

CircleCI へ Dockerイメージ作成に必要な環境変数を設定します。

まずはCircleCI の Setting にアクセスしましょう。

CircleCIの設定画面

 

ここで以下の環境変数を設定します。(順不動)

  1. AWS_ACCESS_KEY_ID
  2. AWS_DEFAULT_REGION
  3. AWS_SECRET_ACCESS_KEY
  4. ECR_DOMAIN
  5. RAILS_MASTER_KEY

1 と 2 は先ほど控えたアクセスキーとシークレットキーを使用します。

3 は AWSのリージョンです。ご自身のリージョンを設定します。(例:ap-northeast-1

4 は ECRのリポジトリのURIを入力します。ちょっと前に控えておいたはずなので、忘れた人は記事を見直してみましょう。

5 は今から見つけにいきます。いくぞー!

 

AWS Cloud9 にアクセスして、自分の作成してるアプリのディレクトリを見にいきます。

(自分のアプリ) / config / master.key に記述されている一文が、環境変数として設定する値です。

これをコピーして CircleCI に貼り付けましょう。

Railsのマスターキー取得

 

CircleCI に環境変数を設定したら、AWS Cloud9でCircleCIの設定ファイルを変更していきます。

 

/.circleci/config.yml

ここまで作業を終えたら、AWS  Cloud9のターミナルで git に push しましょう。

 

(自分用メモ)コミット後にこういうメッセージが出ました。

 

これで Web アプリケーションを更新し、BitBucket へ push しマージを行ったら自動的に Docker リポジトリに push するところまで自動化されます。

 

— 補足 —

push 時に CircleCI に登録しているメールアドレスに CI の結果が届くと思います。

そこで、Failed になってしまった場合の原因の特定方法についてお伝えします。

 

まずは CircleCI にアクセスします。

自分のプロジェクトを見てみると、赤く Failed と表示されてしまっています。

Failedをクリック

矢印の Failed をクリックし、下にスクロールすると、詳しいエラー内容が見れます。

エラーの表示

が今回のエラーで、YAML記法がなんかおかしいぞと言われてしまってます。

 

英語がわからない場合は、とりあえず全文をGoogle翻訳にかけましょう。

 

直して、push するとまたエラーが。

railsのdb:migrationができてないみたいなので、とりあえず無視して先に進むことにしました。

 

ちょっとここであまりにもAWSわからないので、勉強してきます。

AWS Cloud Practitioner Essentials (Second Edition) (Japanese)

こちらのリンクはAWS公式の動画教材になっています。

Amazonのアカウントを持っている方はすぐに会員登録できて視聴できるはずです。

 

更新頻度は遅くなると思いますが、完成できるように祈りつつ勉強します。

 

 

 

とりあえずここまで。

随時更新中。

  • このエントリーをはてなブックマークに追加
  • LINEで送る