Amplifyでフロントエンドとバックエンドのデプロイ環境を整える2019/08/27SHAREツイートシェアはてブLINEPocketこんにちは、タカフです。Amplify」というものを発見し、深く読めば読むほど便利そうなので使ってみることにしました。Amplifyでフロントエンドとバックエンドのデプロイ環境を整える、の巻です。Amplifyとは、一言で言うとモバイルアプリを作るのに一連の機能とさらにはそのホスティングまでやってくれる便利なサービスです。Amplifyがそのあたりの機能を全て兼ね備えていて、さらにアプリには必須なその他の機能まであったので一瞬で一目惚れしてしまいました。これから作るのは自社サービスなので、なるべく最初のうちはランニングコストは低い方がよく、使った分だけ課金のサーバーレス環境というのも大変魅力的でした。Amplifyにアクセスしてみました。このような画面が出てきます。Amplify上に何もアプリを作ってないので初期画面となっています。Consoleでデプロイ、という流れを作っていきます。cliをインストールするamplifyの開発を進めていくには専用のCLIが必要です。https://aws-amplify.github.io/docs/こちらにインストール方法が書いてます。npmコマンド一発です。cliのアカウント初期設定ローカル環境からamplifyにpushしたりするのにIAMが必要です。それが以下のコマンドでセットアップ出来ます。マネジメントコンソールが開くのでログインします。ログインしたらターミナルに戻って、Enterを押して続けます。cliを実行するユーザーとしてamplify-userを作ります。すると先ほど、ログインしたマネジメントコンソールからIAM作成画面になって、あとはデフォルトで進めていけば良いだけとなってます。(下記画像はamplify-userが作成済みだったのでamplify-user2となってます)IAMユーザーが作成出来ました。アクセスキーIDとシークレットアクセスキーを保管してください。ターミナルに戻って続きをしていくと、アクセスキーIDとシークレットアクセスキーを入力するようになっているので先ほど保管した文字列を埋めていきます。Nameをわかりやすく同じamplify-userにすればセットアップ完了です。cliでamplifyアプリを初期化ここでは便宜上amplify-appというディレクトリを作ってそこでアプリを初期化していきます。initでアプリ構築します。これは各人の開発環境名になります。エディタは何でも良いです。cloud...これで初期ソースは完了です。amplifyアプリをGitHubにコミット&プッシュこの後GitHub経由でデプロイする為にGitHubに予めプッシュしておきます。いうリポジトリを作ってそこにプッシュします。consoleでアプリを作成amplifyの管理画面で「アプリの作成」を押下しますデプロイソースにGitHubを選択してContinueを押下するとGitHub認証が走りますので許可していきましょう。リポジトリに先ほど作ったamplify-appを選択してmasterブランチを選択します。次に、一応ここでは本番環境想定なのでmasterブランチを選択しましょう。この時ロール選択をしますが、初回はここからロールを作成しちゃいましょう。このロールがないとバックエンドデプロイ出来ないのでご注意を。続いてこのyamlテキストはダウンロードしておきましょう。あとでリポジトリに組み込みます。環境変数をセットします。OKなら「保存してデプロイ」です。ここまででフロントエンドもバックエンドも何もないので何もならないですが、一応ホスティングまでは出来ています。Developでバックエンドのデプロイ環境を構築するバックエンド側では何かしらのAPIを作ってみましょう。Gatewayにuserリソースが出来て、/userAPIパスが出来て、これがLambdaのUserFunc-suzuki関数が出来て呼び出すことが出来ます。このpushはsuzukiの環境であって、先ほどgithubに登録するとmaster環境で動きます。先ほどダウンロードしたamplify.ymlをそのままアプリソースのルートに設置しましょう。amplifyPushと記述すれば、https://gist.github.com/swaminator/7408de774e24ecf031d0d9928f1fbae5のシェルスクリプトが実行されるようです。[]そして先ほどの追加したapiも含めてGitHubに登録します。masterGitHubにプッシュされるとデプロイが発動され、無事本番環境のAPIが動作することがわかりました。Framework7のフロントエンドのデプロイ環境を構築するバックエンドが出来たら今度はフロントエンドです。フロントエンドには僕のイチオシUIフレームワークのFramework7を使います。Framework7の使い方などは以下をどうぞ。先ほどのアプリソースのルートからディレクトリを一つ作ってそこで作っていきます。バックエンドのソースと混ぜたくないからです。ディレクトリ名でもかっこいかもしれません。)そして、どこにフロントディレクトリがあっても、後の設定でフロントの公開ディレクトリをamplify.ymlでセット出来ます。ここでPWAを選択出来ますが、ここでは一旦Simpleで。startで開発可能です。先ほどの内容に加えて、frontendのところでframework7ディレクトリに移動してビルドコマンドを実行処理を記述します。あと、baseDirectoryでフロントエンドとして公開されるディレクトリを指定します。framework7のビルドでframework7/wwwにビルド物が出来るのでそれを指定します。[]ここまでで試しにデプロイしてみたら以下のエラーが。'/codebuild/output/src705217606/src/easy-app/frontend/build/build.js'非常にはまりましたが、これはamplifyの生成するgitignoreでbuildディレクトリを無視するようにしているのが原因でした。framework7でもbuildディレクトリは使っているので無視しないよう以下のように追記します。#amplifyamplify/\#current-cloud-backendamplify/.config/local-*amplify/backend/amplify-meta.jsonamplify/backend/awscloudformationbuild/dist/node_modules/aws-exports.jsawsconfiguration.json#framework7!framework7/build/GitHubにプッシュしてみます。master無事フロントエンドまでデプロイ出来ると以下のようにトップページのキャプチャが出るんですね。(しかもちゃんとjsが動作した時のキャプチャ。地味にすごいこと)Amplifyでは有名どころの端末の表示も「検証」で軽く表示してくれます。いうところ、最高です。tools画面ですがちゃんと動作デプロイされているようですね。Amplify最高すぎます。Amplifyを使ってバックエンドとフロントエンドのデプロイ環境を構築することが出来ました。あとは、フロントアプリからAPIでバックエンドにつなぎこんでいくとアプリが出来上がっていきます。AmplifyにはCognitoも使えるのでログイン認証はCognitoで作って、API周りはGraphQLを利用するとかなり高速開発が出来るかと思います。以上、カフーブログがお送りしました。initで設定した環境を削除出来ます。今回ローカルではsuzukiという環境名で作って作業していたので、そのsuzuki環境だけ削除されました。initで自分の環境作って用済みなら削除という方法で開発してくといいかもしれませんね。amplify/team-provider-info.jsonの中からその環境名も削除しておいた方がよさそうです。同じ環境名で初期化しようとしたら既にその環境名はあるよ、と怒られます。コメントをキャンセルメールアドレスが公開されることはありません。@kahoo365マナブログに感化されたエンジニアブロガー。ITエンジニア歴は早いもので15年程。Web系技術とオススメPCの記事を中心に情報発信していきます。今は週3六本木でエンジニア業、週2柏でブログ・自社サービス業にいそしむ日々。株式会社カフーの社長さん。MeTwitter人気記事1【レビュー】半年使ってわかった。最近のコメント【レビュー】半年使ってわかった。【レビュー】半年使ってわかった。【レビュー】半年使ってわかった。【レビュー】半年使ってわかった。【レビュー】半年使ってわかった。