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 管理者 ) WEB UI ソースコード配布 EASEL WEB UI ユーザ アカウント発行 AWS 上に環境構築 メール通知 ( 認証 ) ユーザ? ( システム管理者 ) ユーザ ( システム管理者 ) WEB UI ログイン 各種登録 編集実施 ユーザアカウント連絡 ユーザ? ( 含システム管理者 ) ユーザ ( 含システム管理者 ) WEB UI ログイン ユニット確認 ユーザカスタマイズ可能 本ドキュメント対象者について 上記図に記載されている 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 で確認しています - 1 -
2.AWS 環境構築の流れ 2.AWS 環境構築の流れ AWS に WEB UI を構築する手順はおおむね以下の流れになります Amazon Web Service アカウント作成及び Google アカウント作成 Elastic Beanstalk でアプリケーション作成 Elastic Beanstalk でデータベース作成 Amazon Simple Storage Service(S3) アクセス用 Key 作成 WEB UI の環境ファイルを編集し 再アップロード 管理画面 URL が表示され ログインできることを確認 - 2 -
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.Elastic Beanstalk 4.Elastic でアプリケーション作成 Beanstalk でアプリケーション作成 4.1. ログイン AWS マネジメントコンソールにログインします AWS メイン画面からコンソールへのログイン 上記画面のボタンをクリックすると メールアドレスとパスワードが聞かれますので 登録に使用したメールアドレスとパスワードを入力してログインします コンソール画面のサービス一覧 - 4 -
ログインすると 上画面のように AWS のサービル一覧が見れます 一覧から コンピューティング の Elastic Beanstalk を選択すると Elastic Beanstalk の画面が 表示されます Elastic Beanstalk の画面 4.2. リージョン選択ここで リージョン ( 地域 ) の選択をします デフォルトでは北米のオレゴン州になってる場合があるので これを東京リージョンに設定します 画面右上端のリージョンが現在選択されているリージョンになります このリージョンが 東京 と表示されていない場合は ドロップリストから アジアンパシフィック ( 東京 ) を選択してください 選択すると 下のように画面が変わり 以降作成する仮想環境は自動的に東京リージョンになります リージョン確認 - 5 -
4.3. アプリケーションの作成 リージョン表示の下に 新しいアプリケーションの作成 とあるのでクリックします 新しいアプリケーションの作成 クリックすると 以下のダイアログが表示されるので アプリケーション名と簡単な説明を記載し 作成 ボタンをクリックします 新しいアプリケーションの作成 ( ダイアログ ) - 6 -
以下のようなアプリケーション作成画面に遷移します 画面中央にある 今すぐ作成しましょう をクリックします 新しいアプリケーションの作成 ( アプリケーション作成画面 ) 環境枠の選択ダイアログが表示されるので ウェブサーバー環境 を選択し 右下の 選択 ボタンをクリックします 環境枠選択ダイアログ 選択 ボタンをクリックすると 以下の 新しい環境の作成 画面に遷移します - 7 -
新しい環境の作成画面 本画面の必要なところを記載します 環境情報環境名 : 自動で入っています アプリケーション名 +'-env' ドメイン : 適当なドメイン名を入力します 使用可能かチェックし問題なければ OK 説明 : 簡単な説明を記載します 基本設定プラットフォーム事前設定済みプラットフォームにチェック プラットフォームの選択 より 構成済みの PHP を選択します - 8 -
PHP のバージョン 5.6 の指定右下の さらにオプションを設定 ボタンを押下します 設定のプリセット 下にあるプラットフォームの説明の隣にある プラットフォーム設定の変更 をクリックし PHP5.6 を選択します PHP のバージョン指定 ( その 1) PHP のバージョン指定 ( その 2) PHP のバージョン指定 ( その 3) - 9 -
新しい環境の作成画面に戻り アプリケーションコード の コードのアップロード を 選択します コードのアップロード ( ) アップロード前のソースファイルは一度 WEB UI の zip ファイルを解凍します 解凍したディレクトリの直下にある.ebextensions フォルダ以外のファイルとフォルダを選択して再度 zip を作成してください.ebextensions フォルダは再 zip には含めない 展開後 再度 zip に します 解凍したソースファイルのトップディレクトリ - 10 -
再度 zip 化したファイルをアップロードデータに指定します アップロード後 環境の作成 ボタンをクリックします ソースコード (zip) のアップロード Elastic Beanstalk のアプリケーション作成作業 Elastic Beanstalk が環境の作成を開始します これには数分程掛かります - 11 -
4.4. アプリケーションの設定 Elastic Beanstalk の環境作成が正常に完了した場合 以下のような画面が表示されます 画面左の 設定 をクリックし 設定画面を表示します Elastic Beanstalk のアプリケーションダッシュボード 設定 画面では WEB URL の表示先指定と データベースの構築を行います - 12 -
WEB URL の表示先指定 設定画面の ソフトウェア ブロックの下中央にある 変更 をクリックします 設定画面 ( ソフトウェア ) ソフトウェアの変更 画面に遷移し コンテナオプション の ドキュメントルート を /public を記載します 画面右下にある 保存 ボタンを押下し 設定画面に戻ります ドキュメントルートの設定 - 13 -
5.Elastic Beanstalk 5.Elastic でデータベース構築 Beanstalk でデータベース構築 設定画面の データベース ブロックの下中央にある 変更 をクリックします 設定画面 ( データベース設定 ) - 14 -
データベース設定画面 以下の4つを選択 設定してください データベースエンジンから mysql を選択 エンジンバージョンは 5.6.39 を選択 任意のユーザ名入力 任意のパスワードを入力 ( ) ユーザ名とパスワードは 後ほど WEB UI の環境設定編集で使用しますので覚えておいてください 右下の 保存 ボタンをクリックし 設定画面に戻った後 設定画面右の 設定の適用 ボタンを押下します - 15 -
設定の適用 AWS Elastic Beanstalk がデータベースの作成作業に入ります ( 作成には 10 分程掛かります ) - 16 -
6.AWS S3 アクセスキー作成 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/ - 17 -
7. 編集と再アップロード 7. 編集と再アップロード Elastic Beanstalk の環境が作成されたので その環境を WEB UI で使用できるように WEB UI の 環境ファイルとソースコードの一部を編集します [ 編集内容 ] 1. 環境ファイル (.env) 設定 2. 管理者用ログイン ID 及びパスワード作成 3.WEB UI 用メールのソースコード編集 - 18 -
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 作成時に入力したパスワード ) - 19 -
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-20 -
7.2. 管理者用ログイン ID 及びパスワード作成.ebextensions 内の init.config では php artisan db:seed コマンドを発行しており データベースのシーディングの機能を使用して管理者ログイン ID と管理者パスワードを設定しています 実際に管理者のログイン ID とパスワードを設定しているソースコードは \ database\seeds\databaseseeder.php class AdminTableSeeder extends Seeder { public function run() { // ソースコメント ( 略 ) DB::table('admins')->delete(); Admin::create([ 'name' => 'admin', 'email' => 'admin@easel5.com', 'password' => bcrypt('admin') ]); } } name => ログイン ID password =>bcrypt( パスワード ) をいずれも半角英数字にて記載します email は使用していないため ダミーで構いません 上記のコードの例はログイン ID:admin パスワード :admin とした場合のものになります - 21 -
7.3. WEB UI 用メールのソースコード編集メールアドレス From に表示する文言を変更します \config\mail.php 'from' => [ 'address' => env('mail_from_address', ' メールアドレス '), 'name' => env('mail_from_name', 'from に記載されるテキスト '), ], WEB UI からユーザに通知するメールは下記の 2 種類になります 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 ES920LRBG-K WEB UI パスワードリセット完了メール以下のソースコード内の文言を編集します \app\mail\passwordresetnotifymail.php \app\notifications\custompasswordreset.php \resources\views\emails\userpasswordreset.blade.php - 22 -
7.4. ソースコード環境の再アップロード 1.~3. の設定後に 前回は含めなかった.ebextensions フォルダも含めて zip 圧縮します (zip ファイル 名は前回とバージョン番号を変更したものにします ).ebextensions フォルダも含め た 全てのフォルダ ファイル を zip 圧縮 解凍したソースファイルのトップディレクトリ ダッシュボード画面から デプロイを選択してアップロードします 環境ファイル編集後のアップロード ( ) 今回.extensions フォルダを含めて再アップロードしたのは フォルダ内にある init.config ファ イル ( ソースコードアップロード完了時に Elastic Beanstalk が実行する初期設定用ファイル ) にて - 23 -
データベーステーブル作成のコマンド (php artisan migrate) を実行するためです 先の設定でデータベースは作成済みのため.extensions をアップロードすることによりアップロー ド完了時に php artisan migrate が実行されデータベーステーブルが作成されます - 24 -
8.WEB UI 表示確認 8.WEB UI 表示確認 アップロードとデプロイの作業が完了したら URL にアクセスします WEB UI の画面が表示されたら成功です ユーザログイン画面 管理者画面からログインします 管理者ログイン画面 管理者用ログイン URL は http://( ドメイン )/admin/login になります 登録したユーザは認証ボタンを押下して ログイン ID ログインパスワードを入力してログインし ます - 25 -