技術的備忘録

基本自分用備忘録

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