10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AWS Amplify Consoleでビルド&デプロイ

Last updated at Posted at 2019-12-31

AWS Amplify Consoleでビルド&デプロイ

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

以下を見てからこの記事をみるといい感じです。

イントロダクション

VueのプロジェクトをAWS Amplify Consoleにより、プロビジョン→ビルド→デプロイ→検証します。
指定のリポジトリ&ブランチに対するコミットをトリガーにデプロイが走り、また、amplifyapp.comドメインにホストしてくれます。

コンテンツ

アプリの作成

AWSコンソール > Amplify > アプリの作成ボタンを押下します。

  • From your existing code
    ソースコードを管理しているリポジトリサービスプロバイダーを選択します。
    ここではGitHubを選択します。
    Screenshot 2019-12-31 at 00.08.13.png

  • リポジトリとブランチの選択
    選択したリポジトリサービスプロバイダから、対象とするリポジトリとブランチを選択します。
    Screenshot 2019-12-31 at 00.08.41.png

  • ビルド設定の構成
    入力されているものはそのまま、選択するものも既存のものを選択し、次へ。
    Select a backend environment : 既存の環境でOK (work)
    Select an existing service role : 既存のRoleでOK (amplifyconsole-backend-role)
    Screenshot 2019-12-31 at 00.16.12.png

  • 確認
    内容を確認し、保存してデプロイボタン押下。
    Screenshot 2019-12-31 at 00.17.19.png

デプロイ

アプリの作成が完了すると自動的にデプロイが走り、プロビジョン、ビルド、デプロイ、検証、が順に実行されてゆきます。
なお、一度アプリを作成すると、次回からは指定したリポジトリの指定したブランチに対してコードコミット(プッシュ)するたびに、このデプロイのための一連の処理が開始されます。
Screenshot 2019-12-31 at 00.18.13.png
オールグリーンになったら完了です。
なお、ビルドエラーになったらデプロイされませんので安心ですね。

また、amplifyapp.comのサブドメインにホストまでしてくれますので、すぐにWebアプリを公開できてしまいます。

あとがき

EC2へのホストに比べて、S3へのホストはだいぶ楽になったと思うのですが、Amplify Consoleはそれを超える楽さですよね。
比較のために、同じアプリをS3へホストする手順を別の記事にしようと、今思いつきました。

一度アプリをセットアップしてしまえば、あとはリポジトリへコミットするだけで勝手にビルドしてデプロイしてくれる楽さは病みつきになります。
今回は触れませんが、独自ドメインの割り当てもここで簡単にできてしまいます。

もう、インフラ担当、要らないですよね。(嘘です)

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?