LoginSignup
27
12

More than 3 years have passed since last update.

俺、このAWS Amplify Consoleでコンテナの自動デプロイ環境が出来たら結婚するんだ

Last updated at Posted at 2019-12-10

この記事はAWS Amplify Advent Calendar 2019の11日目です。
今回はAWS Amplify Consoleを使ったAWS Fargateのデプロイをご紹介します。

tl;dr

  • amplify addから利用出来るカテゴリだけでなく好きなカテゴリを自由に作成できます。
  • AWS Amplify ConsoleではCloudFormationテンプレートをデプロイすることが出来るため高度なカスタマイズが可能です。
  • フロントエンドなしでバックエンドのみのデプロイがAWS Amplify Consoleから可能です。

利用するライブラリのバージョン

ライブラリ version
node v12.13.0
@aws-amplify/cli 4.2.0

では早速やってみましょう!

今回作るもの

下記の通り、GitHubにCloudFormationテンプレートをpushすることでAWS Amplify Consoleが自動的にFargateリソースをデプロイする環境の構築をご紹介します。

DynamoDB設計検討.png

初期構築

amplify init コマンドでAmplifyプロジェクトの初期化を行います。
今回はenvironment: local としています。これは後で使うので忘れないようにしましょう。
Amplify Cliの詳しい使い方はこちらをご覧ください!
スクリーンショット 2019-12-07 23.22.42.png

確認

amplify statusコマンドでローカルとクラウドのデプロイ状況の差分をチェックすることが出来ます。
スクリーンショット 2019-12-07 23.24.35.png

現在のディレクトリ構成

スクリーンショット 2019-12-07 23.26.05.png

backend-config.jsonの編集

初期値は空のjsonになっています。backend-config.jsonのフォーマットは以下の通りです。

backend-configのフォーマット
{
  "<custom-category-name>": {
    "<custom-resource-name>": {
      "service": "<custom-aws-service-name>",
      "providerPlugin": "awscloudformation"
}

今回は以下のように書き換えました。

amplify/backend/backend-config.json
{
  "fargate": {
    "adventCalendar2019": {
      "service": "ECS",
      "providerPlugin": "awscloudformation"
    }
  }
}

backend-config.jsonに合わせて以下の場所にCloudFormationテンプレートを配置します

ファイル形式はjson or yamlですが今回はyamlで書きます。
詳しくはこちらを参照下さい。
スクリーンショット 2019-12-07 23.40.05.png

いきなりFargateまで書くのは大変なのでまずはVPCとサブネット1つだけデプロイしてみましょう!

amplify/backend/fargate/adventCalendar2019/template.yaml
---
AWSTemplateFormatVersion: "2010-09-09"
Description: "AWS Amplify Advent Calendar 2019"
Parameters:
  env:
    Type: "String"
    Description: "The environment name. e.g. Dev, Test, or Production"
    Default: "NONE"
Resources:
  AdventCalendar2019Vpc:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: 10.0.0.0/16
      EnableDnsHostnames: true
      EnableDnsSupport: true
      InstanceTenancy: default
      Tags:
        - Key: Name
          Value: !Sub "AdventCalendar2019Vpc-${env}"
  AdventCalendar2019VpcPublicSubnet1:
    Type: AWS::EC2::Subnet
    Properties:
      CidrBlock: 10.0.0.0/18
      VpcId:
        Ref: AdventCalendar2019Vpc
      AvailabilityZone:
        Fn::Select:
          - 0
          - Fn::GetAZs: ""
      MapPublicIpOnLaunch: true
      Tags:
        - Key: Name
          Value: !Sub "AdventCalendar2019VpcPublicSubnet1-${env}"

amplifyはenvという変数名にenvironment名を入れてCloudFormationを実行してくれます。
今回の例だとlocalというenvがインジェクションされます。

注意!!

ここでamplify statusコマンドを打ってもFargateカテゴリが出てきません。
スクリーンショット 2019-12-07 23.45.15.png

公式ドキュメントに従って以下のコマンドを打ちます。
amplify env checkout <current-env-name>
今回の環境名は local のため amplify env checkout local と打ちます
スクリーンショット 2019-12-07 23.46.20.png

確認

Fargateカテゴリが認識できました!
スクリーンショット 2019-12-07 23.46.30.png

デプロイ

amplify pushコマンドでクラウド上にデプロイ出来ます。(処理のログが長いのでバッサリ切っています)
スクリーンショット 2019-12-07 23.55.53.png

Amplify Console

amplify consoleコマンドでブラウザからデプロイした対象を確認することが出来ます
スクリーンショット 2019-12-07 23.57.12.png

GitHubのmasterブランチにpushされたら自動的にデプロイする設定

まずはGitHub認証を選択しましょう
スクリーンショット 2019-12-07 23.59.15.png

そして認証してリポジトリとブランチを選択します
スクリーンショット 2019-12-08 0.01.07.png

ビルドの設定を確認しましょう。今回選択しているIAMロールはバックエンドのデプロイをするために強い権限を持たせています。
こちらと全く同じ設定をしたロールで実行しています。
amplify.yml をリポジトリの一番上の階層に配置することでビルドのコマンドなど変更が可能ですが、今回はこのまま実行します。
スクリーンショット 2019-12-08 0.38.11.png

3分ほど待ったらビルドが完了しました。
スクリーンショット 2019-12-08 0.41.50.png

これで自動デプロイの設定が出来たはずですのでもう一つサブネットを追加してGitHubにpushしてみます。

amplify/backend/fargate/adventCalendar2019/template.yaml
---
AWSTemplateFormatVersion: "2010-09-09"
Description: "AWS Amplify Advent Calendar 2019"
Parameters:
  env:
    Type: "String"
    Description: "The environment name. e.g. Dev, Test, or Production"
    Default: "NONE"
Resources:
  AdventCalendar2019Vpc:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: 10.0.0.0/16
      EnableDnsHostnames: true
      EnableDnsSupport: true
      InstanceTenancy: default
      Tags:
        - Key: Name
          Value: !Sub "AdventCalendar2019Vpc-${env}"
  AdventCalendar2019VpcPublicSubnet1:
    Type: AWS::EC2::Subnet
    Properties:
      CidrBlock: 10.0.0.0/18
      VpcId:
        Ref: AdventCalendar2019Vpc
      AvailabilityZone:
        Fn::Select:
          - 0
          - Fn::GetAZs: ""
      MapPublicIpOnLaunch: true
      Tags:
        - Key: Name
          Value: !Sub "AdventCalendar2019VpcPublicSubnet1-${env}"
  AdventCalendar2019VpcPublicSubnet1RouteTable:
    Type: AWS::EC2::RouteTable
    Properties:
      VpcId:
        Ref: AdventCalendar2019Vpc
  AdventCalendar2019VpcPublicSubnet1RouteTableAssociation:
    Type: AWS::EC2::SubnetRouteTableAssociation
    Properties:
      RouteTableId:
        Ref: AdventCalendar2019VpcPublicSubnet1RouteTable
      SubnetId:
        Ref: AdventCalendar2019VpcPublicSubnet1
  AdventCalendar2019VpcPublicSubnet1DefaultRoute:
    Type: AWS::EC2::Route
    Properties:
      RouteTableId:
        Ref: AdventCalendar2019VpcPublicSubnet1RouteTable
      DestinationCidrBlock: 0.0.0.0/0
      GatewayId:
        Ref: AdventCalendar2019VpcIGW
    DependsOn:
      - AdventCalendar2019VpcGW
  AdventCalendar2019VpcIGW:
    Type: AWS::EC2::InternetGateway
    Properties:
      Tags:
        - Key: Name
          Value: !Sub "AdventCalendar2019VpcIGW-${env}"
  AdventCalendar2019VpcGW:
    Type: AWS::EC2::VPCGatewayAttachment
    Properties:
      VpcId:
        Ref: AdventCalendar2019Vpc
      InternetGatewayId:
        Ref: AdventCalendar2019VpcIGW

無事にビルドが通ってデプロイ出来ました(ビルド2はSyntaxエラーで失敗したので省略してますw)
スクリーンショット 2019-12-08 1.19.16.png

Fargateリソースの作成

Fargate作成に必要なCloudFormationテンプレートに更新し、GitHubにPushします。
長くなるため最終的なテンプレートはこちらをご確認下さい。

無事にビルドが完了し、ECSのページからデプロイされているリソースが確認できました!
スクリーンショット 2019-12-09 0.48.14.png

まとめ

いかがでしたか?
AWSのCI/CDツールチェーンはCodePipelineやCodeBuildなどが事例で見かけることが多いと思います。
AWS Amplify Consoleがこんなに手軽に自動デプロイ環境を作れることはあまり知られていないのではないでしょうか?

ということで今回はフロントエンドなしでFargateのみの自動デプロイ機能を紹介しました。

AWS Amplify Console/Cli/Frameworkには他にも様々な便利な機能がありますので是非AWS Amplify Advent Calendar2019で記事を探してみてください!
それではまたお会いしましょう!

27
12
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
27
12