大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【AWS】EC2インスタンス立ち上げ&削除

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

概要

最近SAA対策としてAWSをハンズオン(Macで)で触り始めました。
(業務でも使うのでハンズオン学習にしました!)

いい機会なのでその内容をブログにまとめます。

EC2インスタンスの立ち上げと削除

EC2とは?

AWSのサービスの一つで、Elastic Compute Cloudの略称になります。

EC2は仮想サーバ構築サービスです。

会社の一角とかに大きいサーバを見たことはありませんか?サーバは見た目通りに工事・構築するのが大変で、ネットワーク環境が必要ならなおさらです。

EC2はAWSのサイト上でいくつかのボタンをポチポチと押すだけで数分でサーバを立ち上げることができますし、エラスティックなので無駄なコストの削減にも繋がります。

ちなみに本当に実体のサーバがないわけではなくて、実は世界中にAmazonが管理するデータセンターがあり、EC2インスタンスを立ち上げる時にはその一部を使わせてもらっているのです。

AWSアカウント作成

※アカウント作成は良い感じでやってしまいましょう!
AWS 無料アカウントを作成しましょう
※とりあえず個人使用と無料プランで設定してたら、変なことや無料枠を超過しなければ1年間は無料で利用できるはず(責任は取らない←)。

コンソールにサインインしてリージョンを変更

まずは以下のURLからAWSマネジメントコンソールにサインインする。 AWSのサイトに移動したら、右上に「コンソールにサインインする」という表記があるはずです。
https://ap-northeast-1.console.aws.amazon.com/console/home?region=ap-northeast-1

コンソールはコンピュータの入出力装置という意味があります。AWSマネジメントコンソールはたくさんあるAWSのサービスをまとめていたり、サービスを始めるサポートをしてくれるAWSサービス開始の入り口的な機能を担っています。具体的にはAWSサービスの検索ができたり、AWSサービスを使って実現させたいことをサポートしてくれるサイトを紹介してくれます。

サインインしたら右上に地名が書かれていると思います。そこをクリックすると、他の地名が出てくるので東京を選択します。

リージョンはアベイラビリティゾーンを地域ごとにグループ分けしたもののことですね。アベイラビリティゾーンを知らない方はググってください。よくAZと短縮されて書いてあります。

EC2のサイトから「インスタンスを起動」を選択する

以下のURLがEC2のサイトです。
https://ap-northeast-1.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-1#Home:

サイトの少し下に「インスタンスを起動」と書かれているので、クリックしましょう。

手順に沿って自分が立ち上げたいEC2インスタンスの環境設定を選択する

以下の手順でEC2インスタンスの環境設定、およびに立ち上げを行います。

  1. AMI の選択
  2. インスタンスタイプの選択
  3. インスタンスの設定
  4. ストレージの追加
  5. タグの追加
  6. セキュリティグループの設定
  7. 確認

自分が立ち上げたいサーバになるように選択していきましょう。

練習用で必要なら無料利用枠の対象になっているものを選んでおけば、問題ないと思います。ただし、セキュリティが不安になるので要注意です。機会があれば他のブログで紹介します。

キーペアを作成する

「7. 確認」画面で右下の起動ボタンをクリックすると、キーペアについてのウィンドウが表示されます。

キーペアは作成したEC2インスタンスにアクセスする際に必要になるセキュリティキーです。

「新しいキーペアの作成」を選択し、キーペア名を入力しましょう。入力し終わったら、「キーペアのダウンロード」をクリックして、「インスタンスの作成」をクリックします。
ダウンロードしたキーペアは後ほど使うので、今はそのままにしておきましょう。

そうすると、EC2インスタンスが立ち上がります(立ち上がりには少し時間がかかるかも)。EC2のサイトで作った「インスタンスの状態」の項目が「実行中」になっていたら、EC2インスタンスの立ち上げが成功しています。

EC2インスタンスSSHで接続する

この項目は余談ですが、先ほど立ち上げたEC2インスタンスが本当に立ち上がっているかどうかSSHで接続することで確かめたいと思います。

手順は以下のようになります。
また、コマンドを入力してEC2インスタンスに接続するので、ターミナルを使用します。MacSSHソフトが既にダウンロードされており、手動で設定する必要がないので楽ですね。

  1. 先ほどダウンロードしたキーペアをSSHフォルダに移動させる
  2. キーペアのアクセス権限を変更
  3. キーペアを使ってEC2インスタンスSSHで接続する


以下は実際に入力するコマンドです。ホームディレクトリから実行してください。

/// Downloadsフォルダにある先ほどダウンロードしたキーペア(拡張子が.pemのもの)をSSHフォルダに移動
$ mv ~/Downloads/sample.pem ~/.ssh/

/// キーペアのアクセス権限を400に変更
$ chmod 400 ~/.ssh/sample.pem

/// EC2インスタンスにSSHで接続。パブリックIPv4アドレスはEC2のサイトに表示されているインスタンスから該当するものをコピーして使用する。
$ssh -i ~/.ssh/sample.pem ec2-user@パブリックIPv4アドレス


この後にyesかnoかを問われるので、yesを入力してエンターキーを押すと、EC2インスタンスに接続することができるはずです。

EC2インスタンスを削除する

立ち上げたEC2インスタンスの削除はEC2のサイトから行います。

以下のサイトから削除したいEC2インスタンスを選択します。一番左のチェックボックスをチェックしましょう。
https://ap-northeast-1.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-1#Instances:sort=instanceState

サイト上部に「インスタンスの状態」という項目でプルダウンができるので、そこから「インスタンスを終了」を選択し、「終了」ボタンをクリックします。
程なくすると、EC2インスタンスが消えます。

お時間がある方は「インスタンスを停止」などの他の状態がどういった意味を持つのか調べておくことをオススメします。

今後に向けて

復習がてらにざっと書きました。

このシリーズ続けられる自信がないのですが、出来る限り書いていこうと思います。

初学者では理解できない部分も多い(SSHインスタンスの状態など)と思いますが、今後重要になる点なので時間があれば調べてみることをオススメします。

ReactNative

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

概要

PoCでReactNativeを扱うことになりました。

初めて扱うので、色々と調べてブログにすることにします。

レベルは高くありませんが、興味がある方はぜひ読んでいただければなと思います。

ReactNative

一言で言うと?

Facebookが中心になって開発しているモバイルアプリケーションフレームワークです。つまりモバイルアプリを開発できるフレームワークですね(←そのまま)

クロスプラットフォームアプリ開発フレームワーク

具体的に書いていきます。

ReactNativeは名前の通りReactライクにネイティブアプリをクロスプラットフォームで開発することができます。

クロスプラットフォームiOSAndroidどちらでも動くことを意味し、ほぼ同じコードでiOSAndroidどちらでも動くネイティブアプリを開発することができます。

余談ですが、自分はIonicで個人アプリ開発をしています。IonicはAngularライクでWebアプリの開発ができ、さらにそのコードはそのままネイティブアプリやPWAにも対応させることができます。

一方で、ReactNativeはネイティブアプリのみを開発します(ReactNative for Webを使えばWebアプリの開発も可能です)。最初ReactNativeの話を聞いた時に、私はIonicと同じだと勘違いしてしまいましたので要注意です(自分だけか←)

WebViewを使用せずに、各OSのネイティブをラップしたComponent・APIを使ってコードを書いているので、Webアプリを開発しているような感覚で、よりネイティブ感のあるアプリを作成することができます。

プログラミング言語CLI

プログラミング言語

ReactNativeは、Reactの思想「Learn once, Write anywhere(一度学んだら、どこでも書ける)」を少なからず受け継いでいるようです。Reactでネイティブアプリを書けるようにしているので、JavaScriptやTypeScriptでも書くことができます。

CLI

  • Expo
  • React-Native
  • React-Native-CLI(非推奨)

Expoは開発環境を容易にし、開発の支援をしてくれるサービスです。初心者向けのCLIのようです。

React-Native-CLIは最近非推奨になり、組み込みのReact-Nativeを使用することが推奨されています。こちらは本格版のCLIのようで、玄人向けもしくはよりネイティブ寄りにアプリを開発したい場合などで使用するのが良いかと思います。
Setting up the development environment · React Native

採用実績

メリット

  • Webエンジニアには学習コストが低い
  • ライブロードやホットローディングがある
  • コードシェアリングでネイティブアプリ開発ができる
  • アプリアップデートが審査なしでできる

本格的なネイティブアプリを求められない場合において、開発スピードがとても速くなるのが特徴かなと思います。

また、ReactやWebの思想でWeb開発をしているエンジニアは、ReactNativeへの参入障壁は低いです。

デメリット

  • ネイティブエンジニアには学習コストが高い
  • エラー箇所が分かりにくい
  • ReactNativeのアップデート対応が大変

やはりネイティブ感はJaveやSwiftには劣るのかなと思います。

また、これはIonicでアプリ開発をしていた時に感じたことですが、Webとネイティブでは思想が違うので、その考え方の切り替えや、Webと共通のコードでネイティブを開発するとエラーやデザインの崩れが出て大変でした。ReactNativeも同じようなことが起きると思います。

UIコンポーネント

NativeBase | Essential cross-platform UI components for React Native
React Navigation | React Navigation
React Native Paper
React Native Elements | React Native Elements


今後に向けて

あくまでも個人的な考えですが、フレームワークプログラミング言語などを選ぶ際の基準の一つにその技術を開発・サポートしている会社があります。ネイティブアプリだとGoogleAppleが開発に関わっている技術を選択するようにしています。

今回はその基準から外れたフレームワークに触れる機会に恵まれましたので、存分に活かして知見を広げていきたいと思っています。

...Pythonも調べないとなぁ

参考

素晴らしい記事に感謝致します。
「React Native」はなにがすごい? リクルートのエンジニアが徹底調査 - ログミーTech
【入門編】React Nativeとは?メリット・デメリット…|Udemy メディア
React Native - Wikipedia
Expo
react-native-cliパッケージが非推奨になっていました
Setting up the development environment · React Native

今日のワード(9/11)

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

概要

学んだワードを書き留めていく。

特定商取引法(特定商取引に関する法律)

訪問販売や通信販売などのトラブルが生じやすい取引において、購入者が受ける被害を防止するために事業者が守るべき義務を定めた法律。

  • 氏名等の明示の義務付け
  • 不当な勧誘行為の禁止
  • 虚偽・誇大な広告の禁止
  • クーリング・オフ制度の適用

訪問販売・通信販売・電話勧誘販売連鎖販売取引特定継続的役務提供業務提供誘引販売取引・訪問購入の7つの取引について記載がある。

セキュリティバイデザイン

情報セキュリティを企画・設計段階から確保するための方策。

  • 手戻りが少ない
  • 低コスト
  • 保守性の向上

NISCによると、IoTシステムについてはセキュリティバイデザイン思想で設計・構築・運用することを推奨している。

スプーリング

プリンタなどの低速な入出力装置に対するデータの転送を外部記憶装置(磁気ディスク装置など)を介して実行する機能のこと。

コアコンピタンス経営

他社にはマネのできない、企業独自のノウハウや技術などの強みを核とした経営を行うこと。

投機実行

分岐判断の結果が出る前に分岐先を予測して命令を先行実行していく方式。分岐の予測が正しければ先行実行していた命令で処理継続ができるので、予測の精度が高いほど性能向上が期待できる。

CPUの高速化のために使用されるパイプライン処理で使われる技術。

今日のワード(9/9)

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

概要

学んだワードを書き留めていく。

SOA

Service-Oriented Architecture(サービス指向アーキテクチャ)

アプリケーションをコンポーネント化する手法の一つ。

業務上の一処理に相当するソフトウェアで実現されている昨日や部品を独立したサービスとし、それらを組み合わせ連携させることで全体のシステムを構築する手法、またはそれ自体のこと。

Webサービスやシステム構築の考え方として利用できる。

コンパイラ

人間が書いた(理解できる)ソースコードを一括して機械語に変換するプログラムのこと。

ソースコード→字句解析→構文解析→意味解析→最適化→目的プログラム

関係演算

関係データベースのデータ操作において、ある特定の条件に従い、新しい表を作り出すこと。または関係データベースの集合の操作を体系化したもの。

典型的なものは、射影、選択、結合、商。

関係データベースの操作を内容を表現するために使用できる。

ビットパターン

ビットの1と0の羅列のこと。

今後に向けて

不定期開催。

参考

素晴らしい記事に感謝致します。
SOAとは何だろう?---目次 | 日経クロステック(xTECH)

今日のワード(7/10)

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

概要

学んだワードを書き留めていく。
今日はここ。
インターフェース | TypeScript 日本語ハンドブック | js STUDIO

リテラル

「文字通り」「字義通り」を意味する語。ラテン語のlittera(文字)に由来する。

ソースコードに定められているデータ型の書式で直に記載した値やその書式自体のことをリテラルと呼ぶ。

文字列リテラルやオブジェクトリテラルなどのように使われる。

シグネチャ

シグネチャ(signature)は、署名を意味する。

メソッドや関数の名前や引数の数、型の順序、戻り値の型などの組み合わせのことで、そのメソッドや関数が唯一無二であることを示すものです。プログラミング言語によって、その組み合わせは異なる。

例えば名前が同じメソッドをいくつか定義した際に、シグネチャによってコンパイルなどで明確に識別することができる。

インデックスシグネチャやコールスシグネチャ、コンストラクシグネチャなどのように使われる。

コールバック

コールバック(callback)は、直訳すると「呼び出し返す」を意味する。

プログラム中である関数などを呼び出す際に、途中で他の関数などを指定して実行すること。

途中で実行されるものが関数だった場合(コールバックされる関数)は、コールバック関数と呼んだりする。

メンバ

メンバ(member)とは、構成員や構成要素、一部分、部材などの意味を持つ英単語。

オブジェクト指向プログラミングでは、クラスやオブジェクト、インスタンスの持つ変数や関数などの要素をメンバと呼ぶことがある。

オブジェクトが持つ関数を「メンバ関数」、変数を「メンバ変数」と呼んだりするが、プログラミング言語によっては、関数(メンバ関数)を「メソッド」、変数(メンバ変数)を「プロパティ」と呼ぶことがある。

今後に向けて

学んで書いても、日々使わないと覚えられないジレンマ。

次はここから。
クラス | TypeScript 日本語ハンドブック | js STUDIO

参考

素晴らしい記事に感謝致します。
TypeScript プログラミング - オブジェクト型 - オブジェクト型リテラル

【Typescript/交差型/分割代入】分からなかったコードの解説

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要

前回の記事で悩んだコードについて解説していきます。

const { tab } = event.composedPath().find((ele: any) =>
ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };

【Ionic/Angular】ion-tabsでページ遷移時に前データが残る場合の対処法【When used with Angular's router】 - 大田区から発信するゆるゆる日記


コード解説

疑問点

左辺の書き方でどうなるのかが分かりませんでした。

const { tab }


まずは代入する側の解説

event.composedPath().find((ele: any) =>
ele.tagName === 'ION-TAB-BUTTON') as EventTarget

eventはテンプレート側からクリックイベントで取得したものです。
composedPathはイベントから取得したノードを順番に含む配列を取得しています。
そして、取得したいtagNameを配列から取得し、as EventTargetで型キャスト(型アサーション)を行っています。

& { tab: string };

先ほどのEventTargetで定義ができていないtabプロパティを定義します(交差型)


左辺の解説

const { tab }

これは分割代入構文です。
右辺にある配列やオブジェクトから値を取り出して、左辺の変数に代入(変数宣言)します。

スプレッド構文と一緒に使うとさらに幸せになりそうです。
【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita


今後に向けて

スプレッド構文や分割代入構文を使って、オブジェクトの部分更新を行う記事を書きたいと思います。


参考

素晴らしい記事に感謝致します。
Event.composedPath() - Web APIs | MDN
EventTarget - Web API | MDN Type Assertion(型アサーション) - TypeScript Deep Dive 日本語版 TypeScriptの型入門 - Qiita
分割代入 - JavaScript | MDN

【Ionic/Angular】ion-tabsでページ遷移時に前データが残る場合の対処法【When used with Angular's router】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要

今回の記事はIonicのIssuesに投稿されている内容ですが、私の解釈で大丈夫か不安です(理由は後ほど説明します) Allow to reset tab navigation stack on changing tabs. · Issue #17761 · ionic-team/ionic-framework · GitHub
現在、開発中のアプリはion-tabsでページ遷移を実現しています。また、各tab内でもページ遷移も行うことができます。

この場合、以下の手順でページ遷移を行うと、元ページには前のコンポーネントが残っていると思います。

tab1内でページ遷移→tab2に移動→tab1に移動
➡️tab1にはページ遷移後のコンポーネントが残ったまま


理想とする仕様は、tab1に戻ったらtab1の最初のページが表示されることです。今回はこの仕様を実現するための記事を書いていきます。

ion-tabsでページ遷移後に、前のページの情報が残ってしまう時の対処法

懸念事項や実現方法の考察など

この章は読み飛ばしてもらっても問題ありません。

懸念事項

問題の解決にあたり、頭によぎった不安要素を列挙しておきます。

  • 私自身がion-tabsの構造について完全に理解しきれていない。
  • ネイティブアプリ/Ionicの仕様では、tab移動では前の情報を残しておくのが普通?
  • Ionicの便利な機能を見落としているかもしれない
  • Ionic5では良い解決策が用意されているかもしれない

そもそもtabは1つのページ内を遷移するための機能っぽいので、前の情報が残っているのが普通の仕様なんだと思います。

つまり僕のion-tabsの使い方が邪道ぽいです。。。

実現方法の考察

今回は2パターンを考えていました。
この記事では以下の2の実装をします。

  1. ページ遷移先のURLを指定する
  2. tabのスタックからpopする

1は簡単に実装可能でしたが、ページ遷移した時に前のコンポーネントが一瞬だけ見え不格好になったのでやめました。

手順
  1. ion-tab-buttonでクリックイベントを発火
  2. テンプレート側の情報をコンポーネント側で取得
  3. ion-tabs要素から前のコンポーネント情報をpopする

スタックについて

Ionicのtabやnavigationはスタック(stack)と呼ばれる方法でページ遷移を実現しています。
プッシュ(push)やポップ(pop)についても知っておけば、今回の記事が理解しやすくなると思います。詳しくは以下から。
https://wa3.i-3-i.info/word14717.html ion-tab - Ionic Framework 日本語ドキュメンテーション


ion-tab-buttonにクリックイベント実装

該当する各ion-tab-buttonにクリックイベントを実装します。
また、ion-tabsに参照(ローカル)変数を定義します。

component.html

<ion-tabs #myTabs>
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab1" (click)="popTab($event)">
      <ion-icon name="home"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="popTab($event)">
      <ion-icon name="book"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" (click)="popTab($event)">
      <ion-icon name="checkmark-circle"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>



テンプレート側の情報をコンポーネント側で取得

先ほど定義したクリックイベントと参照変数から情報をコンポーネント側で取得します。

component.ts

...
@ViewChild('myTabs', {static: false}) myTabs: IonTabs;
resetStackTabs = ['tab1', 'tab2', 'tab3'];
...
popTab = (event: MouseEvent) => {
  const { tab } = event.composedPath().find((ele: any) =>
  ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };
  }
}
...



Tabsのスタックから前情報をポップする

component.ts

...
popTab = (event: MouseEvent) => {
...
    return this.myTabs.outlet.pop(1, tab);
  }
}
...



今後に向けて

以下のコードの解説記事を書こうと思います。

const { tab } = event.composedPath().find((ele: any) =>
ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };



参考

素晴らしい記事に感謝致します。
Allow to reset tab navigation stack on changing tabs. · Issue #17761 · ionic-team/ionic-framework · GitHub https://wa3.i-3-i.info/word14717.html
ion-tab - Ionic Framework 日本語ドキュメンテーション