フロントエンド勉強用+メモ

主にフロントエンドの勉強用+メモとして自分用に残していくブログ

Hook

useSelecter

Reduxの store の state をを取得する。

引数には state を引数にとる selector 関数を指定する。

useEffect

useEffect( () => {

}, [])

classコンポーネントでいうところの、componentDidMountと同じ役割になる。 最初の一回目のRenderが走った後に実行したい関数などを記述する。

本来、useEffectは第一引数にコールバック関数、第二引数に依存する値の配列を入れる

依存する値が変更される度にcallbackが実行される

コールバック関数とは. 他の関数に引数として渡す関数のこと。

useDispatch

store に紐付いた dispatch が取得できる。

useCallback

useCallbackは、初回の呼び出し(Appの初回のレンダリング)では渡された関数をそのまま返す。 Appが再レンダリングされたとき、useCallbackの返り値としては初回レンダリング時のときの関数オブジェクトが再利用される。(useCallbackに渡された関数オブジェクトは今回は捨てられる)。 つまり、初回のレンダリング時も2回目のレンダリング時も同じ(===の意味で等しい)関数オブジェクトになる。

useCallbackはとにかく使え! 特にカスタムフックでは - uhyo/blog

useMemo

useContext

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得【セクション7】

WordPress用のデータベースを作成しよう

WordPressをインストールしよう

ライブラリのインストール WordPressのダウンロード WordPressの解凍 WordPressのプログラムをApachから見える場所に配置 WordPressファイルの所有者・グループを変更 Apatchの再起動

WordPressを設定しよう

ドメイン名にアクセス WordPressの設定

なんでWordPressのサイトが表示されるの?

①Route53にドメイン名のIPアドレス聞く ②IPアドレスが返ってくる ③返ってきたIPアドレスでWebサーバーにアクセスする ④DBを参照する ⑤DBの値を返す ⑥Webページを返す 通信の中では実際何が起こっているのだろう??→TCP/IPプロトコルに基づいて通信が行われている

TCP/IPについて学ぼう

プロトコルとは、コンピュータ同士がネットワークを利用して通信するために決められた約束ごと

例) HTTP DNS SSH SMTP TCP UDP IPなど

なぜプロトコルは必要? メーカーやOSが違うコンピュータ同士が通信するためには、同じ仕様でやりとりする必要がある

TCP/IPとは、TCP・IPを中心として、インターネットを構築する上で必要なプロトコル群の総称。 インターネットを運用するために開発された

TCP/IPの階層モデル アプリケーション層/アプリケーション同士が会話する トランスポート層/データの転送を制御する ネットワーク層/IPアドレスを管理し、経路選択する ネットワークインターフェース層/直接接続された機器同士で通信する

HTTPについて学ぼう

WebブラウザとWebサーバー間が通信する時に利用されるHTTPプロトコルについて学ぼう インターネットでHTMLなどのコンテンツを送受信用に用いられる通信の約束ごと クライアントがHTTPリクエストを送り、サーバーがHTTPレスポンスを返す

■HTTPリクエスト リクエストライン、ヘッダー、ボディから構成される リクエストライン:GET/HTTP/1.1 ヘッダー:Host: example.com User-Agent:Mozilla/5.0 etc,,, ボディ:特になし(オプション)

■HTTPレスポンス ステータスライン、ヘッダー、ボディから構成される ステータスライン:HTTP/1.1 200 OK ヘッダー:Date:Fri, 28 Jun 2020 01:09:23 GMT Conect-Type: text/html; charset=UTF-8 etc,,, ボディ:<!doctype html> ...

TCPUDPについて学ぼう

トランスポート層では、アプリケーション間のコネクションを確立するために、ポート番号を利用する

代表的なプロトコルTCPUDP。通信の特性により使い分ける

IPについて学ぼう

ネットワーク層の役割は、最終的な宛先のコンピュータにパケットを届ける事

IPの役割は、IPアドレス、終点コンピュータまでのパケット配送(ルーティング)、パケットの分割・再構築処理の3つ

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得【セクション7】

WordPress用のデータベースを作成しよう

WordPressをインストールしよう

ライブラリのインストール WordPressのダウンロード WordPressの解凍 WordPressのプログラムをApachから見える場所に配置 WordPressファイルの所有者・グループを変更 Apatchの再起動

WordPressを設定しよう

ドメイン名にアクセス WordPressの設定

なんでWordPressのサイトが表示されるの?

①Route53にドメイン名のIPアドレス聞く ②IPアドレスが返ってくる ③返ってきたIPアドレスでWebサーバーにアクセスする ④DBを参照する ⑤DBの値を返す ⑥Webページを返す 通信の中では実際何が起こっているのだろう??→TCP/IPプロトコルに基づいて通信が行われている

TCP/IPについて学ぼう

プロトコルとは、コンピュータ同士がネットワークを利用して通信するために決められた約束ごと

例) HTTP DNS SSH SMTP TCP UDP IPなど

なぜプロトコルは必要? メーカーやOSが違うコンピュータ同士が通信するためには、同じ仕様でやりとりする必要がある

TCP/IPとは、TCP・IPを中心として、インターネットを構築する上で必要なプロトコル群の総称。 インターネットを運用するために開発された

TCP/IPの階層モデル アプリケーション層/アプリケーション同士が会話する トランスポート層/データの転送を制御する ネットワーク層/IPアドレスを管理し、経路選択する ネットワークインターフェース層/直接接続された機器同士で通信する

HTTPについて学ぼう

WebブラウザとWebサーバー間が通信する時に利用されるHTTPプロトコルについて学ぼう インターネットでHTMLなどのコンテンツを送受信用に用いられる通信の約束ごと クライアントがHTTPリクエストを送り、サーバーがHTTPレスポンスを返す

■HTTPリクエスト リクエストライン、ヘッダー、ボディから構成される リクエストライン:GET/HTTP/1.1 ヘッダー:Host: example.com User-Agent:Mozilla/5.0 etc,,, ボディ:特になし(オプション)

■HTTPレスポンス ステータスライン、ヘッダー、ボディから構成される ステータスライン:HTTP/1.1 200 OK ヘッダー:Date:Fri, 28 Jun 2020 01:09:23 GMT Conect-Type: text/html; charset=UTF-8 etc,,, ボディ:<!doctype html> ...

TCPUDPについて学ぼう

トランスポート層では、アプリケーション間のコネクションを確立するために、ポート番号を利用する

代表的なプロトコルTCPUDP。通信の特性により使い分ける

IPについて学ぼう

ネットワーク層の役割は、最終的な宛先のコンピュータにパケットを届ける事

IPの役割は、IPアドレス、終点コンピュータまでのパケット配送(ルーティング)、パケットの分割・再構築処理の3つ

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得【セクション6】

RDSについて学ぼう

複数のアベイラビリティゾーンにサブネットを作成し、DBの冗長化を行う

フルマネージドなリレーショナルデータベースのサービス

  • 構築の雉間の軽減
  • 運用の手間の軽減
  • AWSエンジニアによるデータベース設計のベストプラクティスを適用 ↓ コア機能の開発に注力できる

EC2にDBを乗せる方法もある

設定できる項目には制限があり、パラメータ、オプション、サブネットグループが存在する

  • 可用性の向上 マルチAZを簡単に構築できる 複数のアベイラビリティゾーンに跨って、RDSを構築する

  • パフォーマンスの向上 リードレプリカを簡単に構築できる

  • 運用負荷の軽減 自動的なバックアップ(1日1回自動取得。スナップショット) 自動的なソフトウェアメンテナンス 監視各種メトリクスを60秒間隔で取得

プライベートサブネットを作成しよう

前回作成したプライベートサブネットと違うアベイラビリティゾーンに作成する

RDSを設置しよう

手順 プライベートサブネットの作成 セキュリティグループの作成(EC2) DBサブネットグループの作成 DBパラメータグループの作成 DBオプショングループの作成 DBエンジン 本番環境 DB詳細の指定 [詳細設定]の設定 WebサーバーにMySQLをインストール WebサーバーからRDSへmysqlコマンドで接続

WebサーバーからRDSに接続しよう

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得【セクション5】

ドメインについて学ぼう

IPアドレスは数列なので、人にとっては覚えにくい。 そこで、ドメイン名を用いてWebサイトにアクセスできるようにする

ドメインは誰が管理しているの? ICANNドメイン全体を管理 レジストリトップレベルドメインを管理 (.jp)JPRS,(.com/.ne)Verisign レジストラ→一般消費者に販売 お名前.com リセラ→一般消費者に販売 Yahoo!ドメイン

DNSについて学ぼう

ドメインを購入するだけでは見れない ドメインとサーバー(IPアドレス)をDNSで紐づける必要がある

DNS * ドメイン名の管理システム * ドメイン名をIPアドレスに変換する * ネームサーバーとフルリゾルバの2つから構成されている

ネームサーバー * ドメイン名とそれに紐づくIPアドレスが登録されているサーバー * ドメインの階層ごとにネームサーバーが設置され、そのネームサーバーが配置された階層のドメインに関する情報を管理する

フルリゾルバ * 「どのドメインに紐づくIPアドレスを教えて」と問い合わせると、色々なネームサーバーに聞いてIPアドレスを調べてくれるサーバー

ドメインの名前解決

DNSドメイン名とIPアドレス以外も管理している DNSの「ドメイン名とIPアドレスの紐づけ」1つ1つのことをリソースレコードと呼び、IPアドレス以外も管理している

Aレコード→ドメインに紐づくアドレス NSレコード→ドメインのゾーンを管理するネームサーバー MXレコード→ドメインに紐づくメール受信サーバー CNAME→ドメインの別名でリソースレコードの参照先 SOAドメインのゾーン管理情報

ドメインを購入しよう

ドメインレジストラとリセラで購入できる

Route53について学ぼう

AWSDNSサービス。ネームサーバーの役割を果たす 特徴 * 高可用性。 SLA100% * 高速。エッジロケーションの中で最も近いロケーションから応答を返す * フルマネージドサービス。DNSサーバーの設計、構築、維持管理が不要

重要概念 * ホストゾーン-DNSのリソースレコードの集合。ゾーンファイルのようなもの * レコードセット-リソースレコードのこと *ルーティングポリシー-Route53がレコードセットに対してどのようにルーティングを行うかを決める * ヘルスチェック-サーバの稼働状況をチェック

ルーティングポリシー シンプル→レコードセットで事前に設定された値に基づいて、ドメインへの問い合わせに対応 加重→複数エンドポイント毎に設定された重みづけに基づいて、ドメインへの問い合わせに対応する。 提供リソースに差がある場合や、ABテスト時に使用 レイテンシー→リージョン間の遅延が少ない方へのリソースへルーティングする マルチリージョン(複数の国)にリソースが存在する場合に使用 位置情報→クライアントの位置情報に基づいて、ドメインへの問い合わせに対応する コンテンツのローカライズや、地域限定配信時に使用 フェイルオーバー→ヘルスチェックの結果に基づいて、利用可能なリソースへルーティングする 障害発生時にSorryサーバーに簡単に切り替えられる

Route53でDNSを設定しよう

作業内容

  1. ドメインのネームサーバーをRoute53に変更  -Route53でホストゾーンを作成  -ネームサーバーをお名前.comからRoute53に変更

  2. ドメインに紐づくIPアドレスを登録  -Route53でレコードセットを作成

AWS:ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得【セクション4】

EC2インスタンスを設置しよう

AWSクラウド上の仮想サーバー。 インスタンスというのはEC2から立てられたサーバーのこと OSより上のレイヤについては自由に設定できる

■作成手順 ①AMIの選択 AMI・・・インスタンス起動に必要な情報が入った、OSのイメージ。

インスタンスタイプの選択 インスタンスタイプ・・・サーバーのスペックを定義したもの CPU,メモリ,ストレージ.ネットワーク帯域が異なる 例:m5.xlarge m=インスタンスファミリー 5=インスタンス世代 xlarge=インスタンスサイズ

③ストレージの追加 データの保存場所。2種類ある ・EBS ・インスタンスストア・・・一時ファイル、キャッシュなど、失われても問題が無いデータを置く

④セキュリティグループの設定

SSHキーペアの設定

SSHについて学ぼう

SSHとは・・・サーバーと自分の目の前のパソコンをセキュアにつなぐサービスのこと。 通信内容が暗号化された遠隔ログインシステム。 PC→SSHクライアント→SSHサーバー→サーバー

公開鍵認証について学ぼう

誰でもサーバーに入れると困るので、サーバーの作成者本人だけがログインできるよう、 EC2ではSSHログイン時に公開鍵認証を行っている

  • サーバーへのログイン時に認証を行う仕組み

  • 公開鍵はサーバーが保有秘密鍵を持っているユーザーだけログイン可能

暗号・・・他の人には内容を分からないようにしてメッセージのやり取りを行うのが暗号 イメージは南京錠

SSHでEC2インスタンスに接続しよう

ポート番号について学ぼう

ssh接続すると、サーバー側のsshdが動いているためサーバーを操作できる

ポート番号はプログラムのアドレス。同一コンピューター内で通信を行プログラムを識別する時に利用される

SSH接続をする場合、ポート番号22で接続する

ポート番号の決め方 1.静的に決められている番号 代表的なプログラムが使うポート番号はあらかじめ決められている 接続元(クライアント)が接続先のポート番号を省略した時は、 このウェルノウンポート番号が使用される

2.動的に決められている番号 サービスを提供する側(サーバー)はポート番号が決まっている必要があるが, 接続元(クライアン)のポート番号は決まってなくてもいい OSが他のポート番号と被らないように、ランダムに決める 動的に割り当てる番号は49142~65535のいずれかの整数値

Apacheをインストールしよう

ファイアウォールを設定しよう

ネットワークを不正アクセスから守るために、通してよい通信だけを通して、それ以外は通さない機能の総称

AWSにおけるファイアウォール セキュリティグループがファイアウォールの役割を担っている インバウンドは必要なものだけを開ける アウトバウンドのポートは多くの場合は全て開いている

セキュリティグループのポート80番(HTTP)を開ける

Elastic IPアドレスIPアドレスを固定しよう

EC2インスタンスのパブリックIPは、起動・停止すると別のIPアドレスが割り当てられる。 ElasticIPアドレスを使用すると、IPアドレスを固定できる

インスタンスが起動中は無料。そうでなければ無料