技術的備忘録

基本自分用備忘録

AWS IAM

AWS IAM

IAM

  • AWSサービスやリソースへのアクセスを管理する
  • AWSのユーザーとグループを作成、管理し、アクセス権を使用してAWSリソースへのアクセスを許可、拒否する

IAMポリシー

IAMユーザー

  • IAMポリシーを付与されたユーザー
  • rootアカウント
    • AWSアカウント作成時に作成される
    • rootユーザーのみ実施できる権限がある
    • 普段は使わないほうがいい
  • 管理者ユーザー
    • 管理者権限の許可が付与されたIAMユーザー
    • IAMを操作できる
  • パワーユーザー
    • IAM以外のすべてのAWSサービスにフルアクセスできる
    • IAMの操作はできない

IAMグループ

  • グループとして権限をまとめて設定された単位のこと

IAMロール

  • AWSWSリソースに対するアクセス権限のこと

IAM権限ベストプラクティス

  • AWS アカウントのルートユーザー アクセスキーをロックする
  • 個々の IAM ユーザーを作成する
  • IAM ユーザーへのアクセス許可を割り当てるためにグループを使います
  • 最小限の特権を認める
  • AWS 管理ポリシーを使用したアクセス許可の使用開始
  • インラインポリシーではなくカスタマー管理ポリシーを使用する
  • アクセスレベルを使用して、IAM アクセス許可を確認する
  • ユーザーのために強度の高いパスワードポリシーを設定する
  • MFA の有効化
  • Amazon EC2 インスタンスで実行するアプリケーションに対し、ロールを使用する
  • ロールを使用してアクセス許可を委任する
  • アクセスキーを共有しない
  • 認証情報を定期的にローテーションする
  • 不要な認証情報の削除
  • 追加セキュリティに対するポリシー条件を使用する
  • AWS アカウントのアクティビティの監視

docs.aws.amazon.com

IAM設計

  • 少数利用はIAMユーザー
  • 組織利用はIAMグループ

IAMポリシー

  • AWSリソースにアクセスするための権限設定
  • AWSが用意してくれているものがめちゃくちゃある
  • AWSが用意しているポリシーを組み合わせて自作のポリシーが作成できる
    • EC2フルアクセスとS3フルアクセスをまとめたポリシーとか
  • IAMユーザー、IAMロール、IAMグループに紐付ける

IAMロール

  • AWSリソースやユーザーに付与するもの
  • 実態はIAMポリシーの集合
  • EC2にS3へのアクセス権を持ったロールを付与することで、EC2からS3へ保存処理
  • EC2やLambdaに付与して、「それらが他AWSリソースに対してできることを増やす」みたいな使い方が多いらしい
  • 監査人などに一時的な権限を移譲するときにも使う
    • アカウントAでロールを作成し、アカウントBでロールARNを指定して権限を移譲する
    • JSON形式でポリシー指定

アクセスアナライザー

  • AWSリソースに紐付いているポリシーを検査し、管理者として"意図せぬ公開設定がされていないか"を検出および可視化してくれる機能
  • 新規または更新されたポリシーを継続的に監視
  • 付与されたアクセス許可を数学的なロジックや推論を使用して分析
  • アクセス制御状況のインパクトを集約、可視化
  • 利用されているアカウントの外側からの意図しないアクセスからリソースが保護されていることが確認できる

AWS Organizations

  • 複数のAWSアカウントをまとめて管理する
    • IAMはアカウント内のユーザーを管理

AWS 概要

AWS

仕組み

  • インフラ/システム機能をオンライン上で、AWSから提供されているサービスを組み合わせて構築する

アンマネージド型

  • スケーリング、耐障害性、可用性を利用者側で設定し管理する
  • 設定が柔軟に可能
  • 管理する手間がかかる
  • EC2とか

マネージド型

  • スケーリング、耐障害性、可用性はAWS側で管理されている
  • 管理に時間を割かなくていい
  • 設定が限定的
  • Route53とか

リージョン

AZ

クラウド

  • 仮想化されたインフラ
  • 物理的なインフラの構成を隠して仮想化された単位に分けたり、統合したりして利用させる技術
  • 物理的なインフラに仮想化ソフトウェアを設定して、実質的な機能をユーザーに切り分けて提供する
  • 各ユーザーは個別のサーバーのように利用できる

サーバーの仮想化

  • 1台の物理サーバ上に複数のOSを動作させる
  • ハイパーバイザ型、VMware型、コンテナ方式

ストレージの仮想化

  • 複数のストレージを仮想的に統合して、1つの大きなストレージプールを構成する
  • ブロックレベル仮想化、ファイルレベル仮想化

ネットワークの仮想化

  • 新たな仮想ネットワークの構築や制御を、ソフトウェアにより動的に実施する技術
  • SDN、VLAN

デスクトップの仮想化

  • サーバ上においたPC環境のデスクトップ画面を遠隔地にある接続端末に転送する技術
  • 仮想PC方式、ブレードPC方式

AWS Day1対応

AWS Day1

Day1対応

  • AWS登録後に対応すること

MFAの有効化

  • rootユーザーのMFA
  • パスワードポリシーの変更

管理者用のIAMユーザー作成

  • アクセスレポート

    • IAMユーザーのアクセス情報を解析する

  • AdministratorAccessポリシーを付与した管理者IAMユーザーを作成

  • AdministratorAccessポリシーを持つグループを作成
    • ユーザーに権限がなくても、グループに所属していれば権限を持つ

  • ユーザー => 認証情報 => コンソールサインインリンク（各IAMユーザーごとのサインインページURL）

  • タグ

    • ユーザーの部署・部門など、分類分けをしたいときに使用する

AWS CloudTrailを有効化

  • AWS CloudTrail
    • AWSユーザーの操作をロギングするサービス
    • ルート・IAMユーザーのオペレーションとAPIコールをトラッキング・ロギング（90日間）
    • ログ・ファイルはS3に保存
    • KMSによる暗号化
    • 無料
  • S3のバケット名はAWS内で一意のものにするため、日付とかつける
  • KMSで暗号化するときは先に「KMSエイリアス」を発行する
  • CloudWatchLogsオプション
    • 有料
    • データの可視化ができる
  • ログを記録するイベントを選択する
    • 基本的に全部でいい
  • データイベント
    • 細かい設定
  • 長期間使っていると無料枠を超えるため、アラートが送られる => S3バケット内のログ削除orS3バケット削除

請求アラートを有効化

  • rootアカウントで行う
  • 請求ダッシュボードで請求アラート設定を有効化

  • CloudWatchでアラート設定

  • 請求ダッシュボード

    • Billingの設定
  • CloudWatch
    • Ararmを作成する

Next.jsチュートリアルまとめ

Next.js React

Next.jsのチュートリアルで重要そうなとこ抜粋

ページはファイルの階層そのまま
  • pages/index.jsがルート
リンクコンポーネントでページ遷移
import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}
  • クライアント側でのナビゲーションを行う
  • javascriptを利用しての遷移
  • コード分割をNext.js側で自動的に行なってくれる
  • 最初に表示されるページのコードだけを読み込む
  • Linkコンポーネントを使用してリンクされたページのコードはバックグラウンドで自動的に読み込む
  • そのため、Linkコンポーネントを使用したページ遷移は高速
メタデータ
<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>
レイアウトコンポーネント
import styles from './layout.module.css'

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>
}

import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>
  )
}
グローバルスタイル
  • pages直下に _app.js ファイルを作成する
  • _app.jsはページ上のすべての要素に影響を与える
  • _app.jsのみでグローバルCSSをインポートできる
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component { ...pageProps } />;
}

Pre-renderingとは

  • 事前にHTMLを生成すること(ReactはクライアントのブラウザでソースコードからHTMLを生成する)
  • 表示が高速
  • StaticGenerationとSSRの2種類
  • ページごとに使い分けができる
  • 可能な限りStaticGenerationを使うことが推奨されている
StaticGeneration
  • 更新頻度が低いページに適している
  • 外部データがない場合、ビルド時にサーバ側でHTMLを生成する
  • getStaticPropsでデータを取得する
  • 外部API呼び出したりするときは、Node-fetchとかのパッケージ使う
SSR(Server-side Rendering)
  • 更新頻度が高いページに適している
  • クライアントがリクエストしたときにサーバ側でHTMLを生成する
  • getServerSidePropsでデータを取得する
SWRでクライアントサイドレンダリング
  • Next.jsで用意されているHook
  • データをキャッシュできる
  • リアルタイムでデータが更新される

ダイナミックルーティング

  • 外部データに基づいて、ページのPathを決める
  • ファイル名に [] を使うとDynamicRoutesになる
    • pages/posts/[id].js
  • getStaticPaths
    • pathsとfallbackを返す
    • pathsは事前ビルドするパス対象を指定する
    • fallbackは事前ビルドしたパス以外にアクセスしたときの動作
      • fallback: false => 指定パス以外（存在しないURL）なら404を返す
    • 返す値はparamsというオブジェクト型の配列
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
処理の流れ
  1. getStaticPathsでIDに基づいたどんなページを表示する可能性があるかを判断
  2. ページの中身はgetStaticPropsで取得する

nextjs.org

API
  • pages/apiフォルダ内に作る
  • apiルートのソースコードはクライアントに公開されない（ブラウザ側ファイルにバンドルされない）
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}
  • getStaticPathsとgetStaticPropsでAPIを叩かない
    • ↑はサーバサイドで実行される
    • 直接DBクエリの記述ができる

Meterial-UI スタイル上書き・カスタマイズ

React Material-UI デザイン CSS in JS

Material-UIで用意されたスタイルを上書きたいとき。

アプリ全体で、指定したMaterial-UIのクラスのスタイルを上書く
  • Meterial-UI側で用意されてるThemeProviderと、createMuiTheme関数を使う
  • クラス名はdevelopperToolsで確認
  • 「MuiGridListTile-tile」Mui[component name]-[style rule name]-[UUID]
// index.jsx

import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({  // 戻り値はテーマオブジェクト
  overrides: {
    MuiGridListTile: {          // クラス名 「-」 の左辺側
      tile: {                   // クラス名 「-」 の左辺側
        overflow: 'visible'
      },
    },
  },
});

render(
  <ThemeProvider theme={theme}>
    <App />
  <ThemeProvider />,
  document.getElementById('root')
);
コンポーネント内で、指定したMaterial-UIのクラスのスタイルを上書く
  • Meterial-UI側で用意されているmakeStyles関数を使う
  • propsも渡せる
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    grid: {
      overflowY: 'visible'
    },
    content: {
      margin: '8px, auto',
      borderBottom: '.5px solid #efefef',
    }),
    title: (props) => ({
      borderLeft: '.2em solid' + props.color,
    }),
  }),
);

const Component = (props) => {
  const classes = useStyles(props);

  return (
    <>
      <div className={classes.title} />
      <div className={classes.grid} />
      <div className={classes.content} />
    </>
  );
);

export default Component;
その他
  • 他にもコンポーネントのタグに直接書くとかいろいろあるっぽい
  • withStylesはコンポーネントを引数にとって、uuid指定したら一気にスタイル適用できる感じかも。使ったらまとめたい
参考

material-ui.com

material-ui.com