ES920LRBG-K WEB UI

AWS移行手順書

株式会社 EASEL

目次

1.概要............................................................................................................................................................ 1

2.AWS 環境構築の流れ ................................................................................................................................ 2

3.アカウントの作成 ...................................................................................................................................... 3

3.1.AWS アカウント ................................................................................................................................. 3

3.2.Google アカウント(Google Maps Key 取得) ...................................................................................... 3

4.Elastic Beanstalk でアプリケーション作成 ............................................................................................... 4

4.1.ログイン .............................................................................................................................................. 4

4.2.リージョン選択 ................................................................................................................................... 5

4.3.アプリケーションの作成 .................................................................................................................... 6

4.4.アプリケーションの設定 .................................................................................................................. 12

5.Elastic Beanstalk でデータベース構築 .................................................................................................... 14

6.AWS S3 アクセスキー作成...................................................................................................................... 17

7.編集と再アップロード ............................................................................................................................ 18

7.1.環境ファイル（.env）編集 ............................................................................................................... 19

7.2.管理者用ログイン ID及びパスワード作成 ...................................................................................... 21

7.3. WEB UI 用メールのソースコード編集 ........................................................................................... 22

7.4.ソースコード環境の再アップロード ................................................................................................ 23

8.WEB UI 表示確認 .................................................................................................................................... 25

- 1 -

1.概要

本ドキュメントは、ES920LRBG-K評価用EASEL提供WEB UIの環境をAWS（Amazon Web Service）

上に構築、移行する為の手順書になります。

本ドキュメント対象者について

上記図に記載されている「WEB UI 管理者」とは、ES920LRBG-K WEB UI の EASEL 提供のWEB

UI ソースコードを、オンプレミス環境やクラウド上に環境構築後、WEB UI 管理者として管理者画

面を操作するユーザを意味します。「システム管理者」とは、ES920LRBG-K WEB UI のアカウント

を取得し、購入したデバイス（ユニット、ゲートウェイ等）、建物情報（屋内フロアマップ等）をWEB

UI に登録、管理する人を意味します。「ユーザ」とは、EASEL からみたWEB UI 利用者全てを意味

します。

本ドキュメントは、AWS上できるだけ早く簡単にWEB UI を構築することを目的とし、その後の

リソース制御やスケーリングが柔軟に行える AWS Elastic Beanstalk を使用することを前提としてい

ます。

AWS Elastic Beanstalk: https://aws.amazon.com/jp/elasticbeanstalk/

また、ES920LRBG-K のWEB UI には PHP WEB フレームワークの Laravel v5.4 をベースに

作成しています。

動作環境は PHP バージョン 5.6、MySQLバージョン 5.6 で確認しています。

EASEL

ユーザ

(システム管理者)

ユーザ

（含システム管理者）

WEB UI ユーザ

アカウント発行

WEB UI ログイン

各種登録・編集実施

メール通知（認証）

ユーザアカウント連絡

WEB UI ログイン

ユニット確認

本ドキュメント対象者

ユーザ？

(システム管理者)

ユーザ？

（含システム管理者）

ユーザ

（WEB UI 管理者）

WEB UI

ソースコード配布

ユーザカスタマイズ可能

AWS上に環境構築

1.概要

- 2 -

2.AWS 環境構築の流れ

AWSにWEB UI を構築する手順はおおむね以下の流れになります。

Amazon Web Service アカウント作成及び、Google アカウント作成

Elastic Beanstalk でアプリケーション作成

Elastic Beanstalk でデータベース作成

Amazon Simple Storage Service(S3)アクセス用 Key 作成

WEB UI の環境ファイルを編集し、再アップロード

管理画面 URL が表示され、ログインできることを確認

2.AWS 環境構築の流れ

- 3 -

3.アカウントの作成

AWS及びGoogleのアカウント登録

AWSと Google にアカウント登録します。（既に登録済みの場合は不要です。）

3.1.AWS アカウント

AWS：https://aws.amazon.com/jp/

AWSの登録にはキャッシュカードが必要です。

3.2.Google アカウント(Google Maps Key 取得)

Google アカウントは Google Maps Keyを作成するのに必要となります。

https://accounts.google.com/signup/v2/webcreateaccount?hl=ja&flowName=GlifWebSignIn&flo

wEntry=SignUp

（注）Google Mapsは 2018 年 6月 11日よりGoogle Maps Platform となりました。

Google からキーを取得しないサイトではマップ表示ができないようになっています。

また従来の API 体系にも変更が出ています。キーの取得に関してはこちらを参考に取得して

ください。

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja

（公式）（英語）

本WEB UI 用では、API は Maps、Routes、Routes の全てを選択してください。

また、Google Mapsの API はある一定の無料枠を超えると従量課金になりことにも

留意ください。

https://developers.google.com/maps/documentation/javascript/usage-and-billing?hl=ja

（公式）(英語)

3.アカウントの作成

- 4 -

4.Elastic Beanstalk でアプリケーション作成

4.1.ログイン

AWSマネジメントコンソールにログインします。

AWSメイン画面からコンソールへのログイン

上記画面のボタンをクリックすると、メールアドレスとパスワードが聞かれますので、

登録に使用したメールアドレスとパスワードを入力してログインします。

コンソール画面のサービス一覧

4.Elastic Beanstalk でアプリケーション作成

- 5 -

ログインすると、上画面のように AWSのサービル一覧が見れます。

一覧から、「コンピューティング」の「Elastic Beanstalk」を選択すると、Elastic Beanstalk の画面が

表示されます。

Elastic Beanstalkの画面

4.2.リージョン選択

ここで、リージョン（地域）の選択をします。

デフォルトでは北米のオレゴン州になってる場合があるので、これを東京リージョンに設定します。

画面右上端のリージョンが現在選択されているリージョンになります。このリージョンが「東京」と

表示されていない場合は、ドロップリストから「アジアンパシフィック（東京）」を選択してくださ

い。選択すると、下のように画面が変わり、以降作成する仮想環境は自動的に東京リージョンになり

ます。

リージョン確認

- 6 -

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

リージョン表示の下に「新しいアプリケーションの作成」とあるのでクリックします。

新しいアプリケーションの作成

クリックすると、以下のダイアログが表示されるので、アプリケーション名と簡単な説明を記載し、

「作成」ボタンをクリックします。

新しいアプリケーションの作成（ダイアログ）

- 7 -

以下のようなアプリケーション作成画面に遷移します。

画面中央にある「今すぐ作成しましょう。」をクリックします。

新しいアプリケーションの作成（アプリケーション作成画面）

環境枠の選択ダイアログが表示されるので、「ウェブサーバー環境」を選択し、右下の「選択」

ボタンをクリックします。

環境枠選択ダイアログ

「選択」ボタンをクリックすると、以下の「新しい環境の作成」画面に遷移します。

- 8 -

新しい環境の作成画面

本画面の必要なところを記載します。

・環境情報

環境名：自動で入っています。アプリケーション名+'-env'

ドメイン：適当なドメイン名を入力します。使用可能かチェックし問題なければOK

説明：簡単な説明を記載します。

・基本設定

プラットフォーム

事前設定済みプラットフォームにチェック。

「プラットフォームの選択」より、構成済みの「PHP」を選択します。

- 9 -

・PHP のバージョン 5.6 の指定

右下の「さらにオプションを設定」ボタンを押下します。設定のプリセット」下にあるプラッ

トフォームの説明の隣にある「プラットフォーム設定の変更」をクリックし、PHP5.6 を選択

します。

PHPのバージョン指定（その１）

PHPのバージョン指定（その２）

PHPのバージョン指定（その３）

- 10 -

新しい環境の作成画面に戻り、「アプリケーションコード」の「コードのアップロード」を

選択します。

コードのアップロード

（※）アップロード前のソースファイルは一度、WEB UI の zip ファイルを解凍します。

解凍したディレクトリの直下にある。.ebextensions フォルダ以外のファイルとフォルダを

選択して再度 zip を作成してください。

解凍したソースファイルのトップディレクトリ

展開後、再度 zip に

します。

.ebextensions フォルダ

は再 zip には含めない

- 11 -

再度 zip 化したファイルをアップロードデータに指定します。

アップロード後、「環境の作成」ボタンをクリックします。

ソースコード(zip)のアップロード

Elastic Beanstalkのアプリケーション作成作業

Elastic Beanstalk が環境の作成を開始します。これには数分程掛かります。

- 12 -

4.4.アプリケーションの設定

Elastic Beanstalk の環境作成が正常に完了した場合、以下のような画面が表示されます。

画面左の「設定」をクリックし、設定画面を表示します。

Elastic Beanstalkのアプリケーション ダッシュボード

「設定」画面では、WEB URL の表示先指定と、データベースの構築を行います。

- 13 -

・WEB URLの表示先指定

設定画面の「ソフトウェア」ブロックの下中央にある「変更」をクリックします。

設定画面（ソフトウェア）

「ソフトウェアの変更」画面に遷移し、「コンテナオプション」の「ドキュメントルート」を

「/public」を記載します。画面右下にある「保存」ボタンを押下し、設定画面に戻ります。

ドキュメントルートの設定

- 14 -

5.Elastic Beanstalk でデータベース構築

設定画面の「データベース」ブロックの下中央にある「変更」をクリックします。

設定画面（データベース設定）

5.Elastic Beanstalk でデータベース構築

- 15 -

データベース設定画面

以下の４つを選択、設定してください。

・データベースエンジンからmysql を選択

・エンジンバージョンは 5.6.39 を選択

・任意のユーザ名入力

・任意のパスワードを入力

（※）ユーザ名とパスワードは、後ほどWEB UI の環境設定編集で使用しますので覚えて

おいてください。

右下の「保存」ボタンをクリックし、設定画面に戻った後、設定画面右の「設定の適用」ボタンを

押下します。

- 16 -

設定の適用

AWS Elastic Beanstalk がデータベースの作成作業に入ります。(作成には 10 分程掛かります。）

- 17 -

6.AWS S3 アクセスキー作成

AWS上のストレージである S3(Simple Storage Service)にアクセスするための設定を行います。

AWS S3のバケットは、Elastic Beanstalk がアプリケーション作成時に自動で作成されます。

AWSマネジメントコンソール画面左上の AWS のアイコンから、AWS のメインコンソール画面に

遷移し、全てのサービスの中から「ストレージ」⇒「S3」を選択します。

AWSマネジメントコンソール画面

既に elasticbeanstalk-ap-northeast-1-xxxxxxxxxxxx というバケットが確認できます。

ここには既にアップロードしたソースコード(.zip)が置いてあります。

このストレージにWEB UI プログラムからアクセスできるように、S3 へのアクセスキーとシークレ

ットキーを取得し、取得したキーの値を後ほど説明する WEB UI の環境ファイル(.env)に設定しま

す。

AWS_KEYと AWS_SECRET の取得方法は以下の URL を参照してください。

https://aws.amazon.com/jp/developers/access-keys/

6.AWS S3 アクセスキー作成

- 18 -

7.編集と再アップロード

Elastic Beanstalk の環境が作成されたので、その環境をWEB UI で使用できるようにWEB UI の

環境ファイルとソースコードの一部を編集します。

[編集内容]

1.環境ファイル(.env)設定

2.管理者用ログイン ID 及びパスワード作成

3.WEB UI 用メールのソースコード編集

7.編集と再アップロード

- 19 -

7.1.環境ファイル（.env）編集

WEB UI のソース解凍したフォルダのディレクトリ直下にある.env ファイルが環境ファイルになり

ます。

オリジナルの.envファイルはリネームしてバックアップしておいてください。

■APP_KEY

ローカル環境に phpの composerがインストールされている場合、

解凍したディレクトリにて「php artisan key:generate」コマンドを入力することで.envの

APP_KEYにキーが設定されます。

次に、.env ファイルを開いて編集していきます。

■APP_NAME

WEB UI アプリケーション名です。

画面ヘッダ部左上の表示や、ユーザへのメール配信テキストに埋め込まれます。

■APP_ENV, APP_DEBUG, APP_LOG_LEVEL

開発中の場合、下記の設定にしてください。

APP_ENV=’local’

APP_DEBUG=’true’

APP_LOG_LEVEL=’debug’

■APP_URL

独自ドメインを設定していない場合は、Elastic Beanstalk の URLを記載します。

URL は Elastic Beanstalk のアプリケーションのダッシュボード画面中央に環境 ID と共に URLが

表示されています。

■データベースの設定

DB_CONNECTION=mysql

DB_HOST= (Elastic Beanstalkで構築したDBのエンドポイント)（例：xx~xx.rds.amazonaws.com)

DB_PORT=(Elastic Beanstalkで構築したDBのエンドポイントのポート番号)(例：3306)

※DB_HOST、DB_PORT 共に Elastic Beanstalk のダッシュボードの「設定」画面の

「データベース」で確認できます。

DB_DATABASE=ebdb

DB_USERNAME=(DB作成時に入力したユーザ名)

DB_PASSWORD=(DB作成時に入力したパスワード)

- 20 -

■AWS S3 アクセス用キー

AWS_KEY=取得した AWS キー

AWS_SECRET=取得した AWS秘密キー

AWS_REGION=ap-northeast-1 (東京リージョン）

AWS_BUCKET=バケット名

■メール設定

管理者がユーザを登録した際に、その登録通知の案内メールを送信するアドレスを設定します。

（管理者用)

例）

MAIL_DRIVER=smtp

MAIL_HOST=（メールホスト）（例：smtp.xxxx.jp）

MAIL_PORT=465

MAIL_USERNAME=(使用するメールアドレス)

MAIL_PASSWORD=（上記メールアドレスのパスワード）

MAIL_ENCRYPTION=ssl

■Google Maps API キー

Google アカウントを作成後、Google Maps 用キーを取得した後こちらに設定します。

GMAPS_KEY= (Google Maps APIキー)

■ストレージ選択

フロアマップ画像とバックアップデータをWEB UI 環境の PC に保存(‘local’を設定)するか、

S3 に保存(‘s3’を設定)するかを設定します。本環境では’s3’を選択してください。

FLOORMAP_STORAGE=’s3’

BACKUP_STORAGE=’s3’

- 21 -

7.2.管理者用ログイン ID及びパスワード作成

.ebextensions 内の init.config では php artisan db:seed コマンドを発行しており、データベースのシ

ーディングの機能を使用して管理者ログイン IDと管理者パスワードを設定しています。

実際に管理者のログイン ID とパスワードを設定しているソースコードは、

\ database\seeds\DatabaseSeeder.php

‘name’=>’ログイン ID’、’password’=>bcrypt(’パスワード’)をいずれも半角英数字にて記載します。

‘email’は使用していないため、ダミーで構いません。

上記のコードの例はログイン ID：admin パスワード:adminとした場合のものになります。

class AdminTableSeeder extends Seeder

{

public function run()

{

// ソースコメント(略)

DB::table('admins')->delete();

Admin::create([

'name' => 'admin',

'email' => 'admin@easel5.com',

'password' => bcrypt('admin')

]);

}

}

- 22 -

7.3. WEB UI 用メールのソースコード編集

メールアドレス、Fromに表示する文言を変更します。

\config\mail.php

WEB UI からユーザに通知するメールは下記の 2種類になります。

・ES920LRBG-K WEB UI 登録完了メール（認証付き）

・ES920LRBG-K WEB UI パスワードリセット完了メール

・ES920LRBG-K WEB UI 登録完了メール（認証付き）

以下のソースコード内の文言を編集します。

・ES920LRBG-K WEB UI パスワードリセット完了メール

以下のソースコード内の文言を編集します。

\app\Mail\EmailVerification.php

\resources\views\emails\verification.blade.php

\vendor\laravel\framework\src\Illuminate\Notifications\resources\views\email.blade.php

'from' => [

'address' => env('MAIL_FROM_ADDRESS', 'メールアドレス'),

'name' => env('MAIL_FROM_NAME', 'from に記載されるテキスト'),

],

\app\Mail\PasswordResetNotifyMail.php

\app\Notifications\CustomPasswordReset.php

\resources\views\emails\userpasswordreset.blade.php

- 23 -

7.4.ソースコード環境の再アップロード

1.～3.の設定後に、前回は含めなかった.ebextensions フォルダも含めて zip圧縮します（zip ファイル

名は前回とバージョン番号を変更したものにします）。

解凍したソースファイルのトップディレクトリ

ダッシュボード画面から、デプロイを選択してアップロードします。

環境ファイル編集後のアップロード

（※）今回.extensions フォルダを含めて再アップロードしたのは、フォルダ内にある init.configファ

イル（ソースコードアップロード完了時に Elastic Beanstalk が実行する初期設定用ファイル）にて

.ebextensions フォルダも含め

た、全てのフォルダ、ファイル

を zip圧縮。

- 24 -

データベーステーブル作成のコマンド(php artisan migrate)を実行するためです。

先の設定でデータベースは作成済みのため、.extensions をアップロードすることによりアップロー

ド完了時に php artisan migrate が実行されデータベーステーブルが作成されます。

- 25 -

8.WEB UI 表示確認

アップロードとデプロイの作業が完了したら、URL にアクセスします。

WEB UI の画面が表示されたら成功です。

ユーザログイン画面

管理者画面からログインします。

管理者ログイン画面

管理者用ログイン URLは http://(ドメイン)/admin/login になります。

登録したユーザは認証ボタンを押下して、ログイン ID、ログインパスワードを入力してログインし

ます。

8.WEB UI 表示確認