2017/01/24 (火)

AWS Elastic Beanstalk 初めての構築

こんにちは。

今回の使ってみましたは、AWSでWEBサーバーの構築です!

AWSのElastic Beanstalkというサービスを使ってみました。

既に色んなサイトで構築の仕方はアップされていますが、とりあえずAWSを使うのも初めての私が試行錯誤して構築した手順を載せます。

試行錯誤と書きましたが、Elastic Beanstalkは簡単に構築できます。

まずはAWSのサイトにログインし、AWSマネジメントコンソール画面からElastic Beanstalkを選択

20

選択したらElastic Beanstalkのアプリケーション画面となりますので、まずは新しいアプリケーションの作成をします。名前はプロジェクトの名前にしました。(イホウレンケイってなってますが気にしないで下さい・・・)

1

2

作成したアプリケーションに対して「新しい環境の作成」を選択し環境を作成します。

3

サーバーは「ウェブサーバーの作成」を選択します。

4

環境タイプでは、事前定義の設定にPHPを選択しバージョンは作っているアプリケーションに合わせました。環境タイプは負荷分散にしています。(まだ利用するユーザーは少ないですが、とりあえず。)

5

アプリケーションバージョンでは、「既存のアプリケーションバージョン」を選択し、サンプルアプリケーションを選択します。とりあえず、ちゃっちゃと構築したいのでサンプルを選択します。あとは変えずに次へ。

6

環境名を設定。開発環境で構築するので分かり易くプロジェクトにdevを付加した名前を設定。

7

RDS(データベース)もVPC環境の両方ともチェックを入れ、一緒に構築しちゃいます。

8

構成の詳細が出ますので、利用するアプリの容量などを計算して適宜変えて下さい。

EC2のキーペアに関してですが、キーペアはEC2にリモートログインするために必要となります。SSHなどで接続する場合などは設定しておきましょう。キーペアはEC2のコンソール画面のキーペア項目から新規に作成しておきます。

※キーペア作成時に自動でダウンロードされる.pemファイルは大事に保管して下さい。後でリモートログインする際に必要になります。

9

ヘルスレポートは変更せずにそのまま次へ。

10

環境タグも何もせずに次へ。

11

RDSにはmysqlを選択しました。バージョンやインスタンスクラスなど適宜変更して下さい。

12

VPCの設定では全てにチェックを入れて次へ。

13

アクセス権限はそのまま次へ。

14

確認画面が出ますので、問題なければ起動を押します。

15
16
17

起動ボタン押下後は環境を作成中の画面となります。この処理に数分掛かります。ちゃんと出来るかドキドキです。

18

数分後、できました!!

19

完了後は、実行するアプリケーションをアップロードします。「アップロードとデプロイ」ボタンを押します。

21

ファイルを選択でcakephpのフォルダを圧縮したzipファイルをアップロードします。バージョンラベルは分かり易いように日時等の値を付加して管理します。

22

デプロイに少々時間が掛かりますが、完了後に指定のURLをクリックすると、、、

23

アップロードしたアプリケーションが表示されました!

24

ここまで色々と書きましたが、慣れればアプリケーションを表示するまで30分も掛からずにWEBサーバーを構築できます。

Elastic Beanstalkではバージョン管理も自動で行ってくれるので非常に便利です。

Elastic Beanstalkを構築するだけでEC2やRDSが自動で構築されているので、細かい設定を必要としない場合はあっという間にクラウド環境が構築できます。

もちろんEC2やRDSの設定をいじることも可能ですので、自分のアプリケーションに合ったカスタマイズをすることができます。

なんとなくクラウド環境を構築しようと思っている方がいたら、とりあえず試してみると良いかもしれません。

以上です。

続きを読む

2016/10/11 (火)

Prottを使ってみた

今回は便利ツールのご紹介です。

現在開発を進めているプロジェクトで、画面設計を行った際にProttというプロトタイプを作成できるツールを使ってみました。

https://prottapp.com/ja/

インターネット上で利用できるツールで、手書きで書いたものやExcelで描画したものを画像として取り込み、ボタンを押した際などの画面遷移を作成します。

簡単に手書きしたものを元に例を示します。
まず手書きしたものがこちらです。

img_17811

ログインして一覧を表示し、新規追加をする流れです。

この4つの画面を1画面ずつ写真に撮り、prottに画像として追加します。

prott1

追加した画像にそれぞれアクションを設定します。

ログインボタン付近をマウスで選択して、ボタンを押した際の遷移先を指定します。

prott2

すごく簡単に遷移の設定ができます。

また、遷移する際の効果を選択できたり、オーバーレイ表示も可能です。

prott3

全ての画面に設定をし、プレビューをしてみます。

prott8 prott9

何もないところをクリックするとアクションを設定した部分が青く光ります。

なのでどこを押すといいかが一目で分かります。

prott10

こんな感じで画面の流れを簡単に確認することが出来ました。

お客様への確認は、このprottで作成したものを見せることで、出来上がりのイメージが明確になると思います。

イメージが明確になることで要望も明らかになり、より完成度の高いものを作ることが出来ます。

社内の開発においても、各メンバー間の意識の擦り合わせに利用できますし、このプロトタイプをそのまま詳細設計の仕様書として利用することも出来そうです。

世の中便利なツールがありますので、開発の負担軽減のためにも色々と使ってみてご紹介していきたいと思います。

今回はプロトタイプを作成するprottを紹介しました。

ちなみに料金は無料(プロジェクト1つのみ)からありますし、30日間のトライアルもありますので、とりあえず使ってみる価値ありです。

続きを読む