Month: February 2022

[AWS CloudFront] 入門

CloudFrontでVPCを作成する

01_create_vpc.yaml

AWSTemplateFormatVersion: '2010-09-09'
Resources:
  FirstVPC:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: 10.0.0.0/16

CloudFrontでCreate Stackとします。

作成したyamlファイルをuploadします。

Option等は設定せずに、create stackとします。
すると、cloudFormationで作成されたVPCが出来上がっています。
なお、cloudformationのstackを削除すると、vpcも削除されます。

CloudFormationの項目
– Format Version
– Description
– Metadata
– Parameters
– Mappings
– Resources
– Outputs

Resources部分

Resources:
	<Logical ID>:
		Type: <Resource type>
		Properties:
			<Set of properties...>

Logical IDはテンプレート内で一意のID
Resource typeは作成するリソースのタイプ
Resource propertiesはリソースの作成時に指定するプロパティ

リソースに命名する時

AWSTemplateFormatVersion: '2010-09-09'
Resources:
  FirstVPC:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: 10.0.0.0/16
      Tags:
      - Key: Name
        Value: first-VPC

stackをupdate

AWSTemplateFormatVersion: '2010-09-09'
Resources:
  FirstVPC:
    Type: AWS::EC2::VPC
    Properties:
      CidrBlock: 10.0.0.0/16
      Tags:
      - Key: Name
        Value: first-VPC
  InternetGateway:
    Type: AWS::EC2::InternetGateway
    Properties:
      Tags:
      - Key: Name
        Value: FirstVPC-IGW
  AttachGateway:
    Type: AWS::EC2::VPCGatewayAttachment
    Properties:
      VpcId: !Ref FirstVPC
      InternetGatewayId: !Ref InternetGateway
  FrontendRouteTable:
    Type: AWS::EC2::RouteTable
    DependsOn: AttachGateway
    Properties:
      VpcId: !Ref FirstVPC
      Tags:
      - Key: Name
        Value: FirstVPC-FrontendRoute
  FrontendRoute:
    Type: AWS::EC2::Route
    DependsOn: AttachGateway
    Properties:
      RouteTableId: !Ref FrontendRouteTable
      DestinationCidrBlock: 0.0.0.0/0
      GatewayId: !Ref InternetGateway
  FrontendSubnet:
    Type: AWS::EC2::Subnet
    DependsOn: AttachGateway
    Properties:
      CidrBlock: 10.0.1.0/24
      MapPulicIpOnLaunch: 'true'
      VpcId: !Ref FirstVPC
      Tags:
      - Key: Name
        Value: FirstVPC-FrontendSubnet
  FrontendSubnetRouteTableAssociation:
    Type: AWS::EC2::SubnetRouteTableAssociation
    Properties:
      SubnetId: !Ref FrontendSubnet
      RouteTableId: !Ref FrontendRouteTable

[AWS CloudFront] 基礎

CloudFrontとはプログラミング言語やテキストファイルを使用してAWSリソースを自動で構築するサービス
具体的には、リソースの設定、プロビジョニングをコード化したテンプレートを作成できる
Infrastructure as code
EC2やELBといったAWSリソースの環境構築を設定ファイルを元に自動化できる
テンプレートに基づき、各リソースが起動

### cloudFormationのメリット
一度テンプレートを作成すれば、同じ構成を再現できる
ベストプラクティスが盛り込まれたテンプレートが使える
起動時にパラメータを渡せる
利用料金は無料

### cloudformationの使い方
– AWSマネジメントコンソールにあるAWS CloudFormation Designerを使う方法
– AWSマネジメントコンソールからJSON/YAML形式でテキストファイルでテンプレート作成する方法

JSON/YAML -> Framework -> AWSサービスの設定

テンプレートとはJSON形式、YAML形式で作成する
テンプレートはリージョンごとに条件が異なる
プロビジョニングされるリソースの集合をスタックと呼ぶ
スタック単位でリソース管理が可能　スタック破棄を実行すると、リソースを破棄することが可能
(1)クイックスタート、(2)サンプルコード&テンプレート、(3)独自テンプレート作成　などがある
クイックスタートはベストプラクティス
テンプレートは色々ある e.g.サーバレスアプリケーションモデルなど
リソース間の依存関係はCloudFormationが自動判別する

### Resourceとは
EC2、ELB、RDSなど起動するサービスを指定
### Parametersとは
スタック構築時に値を定義できる
Type, Default, NoEcho, AllowValues, AllowdPattern, MaxLength, MinLength, MaxValue, MinValue, MinValue, Description, ConstraintDescription
パラメータの値はテンプレートの中で”ref”により参照
### Function
パラメータの参照やMapの山椒はFunctionを利用する
### 擬似パラメータ(Pseudo Parameter) ※予め定義
– AWS::Region
– AWS::StackId
– AWS::StackName
– AWS::AccountId
– AWS::NotificationARNs
– AWS::NoValue
### Mapping
キーと値のマッピングテーブルを管理できる
Functionの”Find::InMap”を使って値を取得
### Condition
条件名と成立条件を列挙
### Outputs
スタック構築後に取得・表示したい情報の定義

テンプレート作成ツールにCloudFormerがある
CloudFormation Designer

テンプレートとスタックの設計

### デメリット
部分的な修正でもテンプレートを修正しなければならない
-> コンソールで修正した方が操作は楽

運用者にcloudformationの知識が求めらる
部分的な修正でもテンプレートを修正しなければならない為、新規に機能追加などがあるサービスの運用としてはややハードルが高いか
EOLが決まっているサービス、ほぼ改修がないようなサービスで、インフラ構成を変えない場合はcloudformationで導入するのもありか

[SwiftUI] 確認ダイアログの表示

struct ContentView: View {
    @State private var isShowingDialog = false
    
    var body: some View {
        Button(action: {
            isShowingDialog = true
        }) {
            Label("削除ボタン", systemImage: "trash")
        }.confirmationDialog("注意!", isPresented: $isShowingDialog) {
            Button("削除する", role: .destructive){
                destructiveAction()
            }
            Button("キャンセル", role: .cancel){
                cancelAction()
            }
        } message: {
            Text("削除すると戻せません")
        }
    }
    func destructiveAction(){
        print("削除が選ばれた")
    }
    
    func cancelAction(){
        print("キャンセルが選ばれた")
    }
}

### 確認ダイアログのタイトル表示

    var body: some View {
        Button(action: {
            isShowingDialog = true
        }) {
            Label("削除ボタン", systemImage: "trash")
        }.confirmationDialog("注意!", isPresented: $isShowingDialog,
                             titleVisibility: .visible) {
            Button("選択A"){
            }
            Button("選択B"){
            }
            Button("削除する", role: .destructive){
                destructiveAction()
            }
            Button("キャンセル", role: .cancel){
                cancelAction()
            }
        } message: {
            Text("メッセージ、メッセージ、メッセージ、メッセージ") +
            Text("メッセージ、メッセージ、メッセージ、メッセージ")
        }
    }

buttonのactionの箇所は何も記載がないが、ここに実行文を書くのね。