Reactで開発した、サイトをCircleCI経由でデプロイする。 構成は以下の通り CloudFrontでCDNに乗せるまでの流れ IAMユーザーの作成 S3バケットの作成 Route53にドメインの設定 CloudFrontのDistributionを作成 IAMポリシーの作成、適用 GitHubリポジトリの作成 CircleCIの設定 使用技術 インフラ AWS S3 CloudFront Route53 IAM Certificate Manager CricelCI クライアントサイド React IAMユーザーの作成 ユーザーを追加 から新規でIAMユーザーを作成。 「アクセスの種類」は「プログラムによるアクセス」チェックする。 「アクセス許可の設定」は後で行うため一旦スキップ。 S3バケットの作成 パブリックアクセスの設定は一旦false パケットホスティングの有効化 S3のバケットポリシー編集 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::xxxxxx:user/xxxxxxxxxxxxxx" // 作成したIAMユーザーを設定 }, "Action": "s3:*", "Resource": [ "arn:aws:s3:::xxxxxxxxxxxx", // 作成したS3バケットを設定 "arn:aws:s3:::xxxxxxxxxxxx/*" // 作成したS3バケットを設定 ] }, { "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::xxxxxxxxxxxx/*" // 作成したS3バケットを設定 } ] } Route53にドメインの設定 今回はMuuMuuDomainで取得したドメインをRoute53に登録しサブドメインを登録し使用します。

Laravelで作成したアプリケーションでフォームからsubmit(POST処理)を行ったところ、 duplicate key value violates unique constraint ~~とエラー画面が表示された。 原因 tableのレコード数とシーケンス番号がづれていたため、 エラーが発生していた。 解決方法 PostgreSQLにログイン # 1. tableのレコード数の確認 $ SELECT MAX(id) FROM table_name; max ----- 15 (1 row) # 2. シーケンス番号の確認 $ SELECT nextval('table_name_id_seq'); nextval --------- 11 (1 row) # 3. シーケンス番号をレコード数に合わせる $ SELECT setval('table_name_id_seq', (SELECT MAX(id) FROM table_name)); setval -------- 15 (1 row) なぜシーケンス番号がずれたのか sqlから INSERT文 を実行した際、下記コードの様なsqlを実行していた。 INSERT INTO table_name (id, hoge, fuga) VALUES (1, 'HOGE1', 'FUGA1'), (2, 'HOGE2', 'FUGA2'), (3, 'HOGE3', 'FUGA3'); INSERT文 を一行で実行していたため、シーケンス番号として1番しか採番されなかった。

three.jsのIE対応で詰まったこと build時に--mode developでbuildした時はIEでも、しっかり表示されている。 だが、--mode productionでbuildした際は、IEだけ画面が表示されない。 consoleを確認すると構文エラーが出ていた。 追っかけていくと、class構文が使わている箇所がありbabelを通しているはずなのになぜ……？ 結論 webpack.config.jsのbabel-loaderのexcludeでnode_modulesを指定してたので、babelが通らなかった。 exclude を 以下の様に変更すると、babelを通してくれるようになった。 exclude: /node_modules\/(?!(three)\/).*/,

ReactとBabel 7 Babel 7 persetには@babel/preset-envを利用する。 $ yarn add -D @babel/preset-env @babel/polyfillが非推奨(Babel 7.4.0) As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions): @babel/polyfillの代わりに、core-jsとregenerator-runtime/runtimeを利用する。 import 'core-js/stable'; import 'regenerator-runtime/runtime'; core-jsは@babel/polyfillも利用しているpolyfill 利用が推奨されているのはv3で@babel/polyfillが利用しているのはv2

もくもく会 5日目 GW最終日、 昨日に引き続き、Reduxを使用してStoreの調整や取得の実装を行った。 ReactでのRedux 使用技術 React Redux React Router 所感 GWの5日間を通してReactでのコンポーネントやロジック処理の切り分けなど、 今まで雰囲気でやっていたところを、改めて学べた。 他にも何度か触って挫折した、 ReduxでのStore管理やFluxの利点、それらを使用したSPAでのアプリケーション開発を学ぶことができた。 また、AWSを使用したユーザー管理やログイン実装を体験してみて 今後ユーザー管理が必要なサービスやアプリケーションを作る際の選択肢が広がった気がした。 今回、主にフロントサイドの実装を行い、APIとの連携を行う箇所があり、 APIの設計や実装にも興味が出てきたので、機会があれば挑戦してみたい。

もくもく会 4日目 ReactでのRedux 使用技術 JavaScript React Redux 今日の対応 Reduxを使用した状態の管理 詰まったところ Loadingのstateをどこで持つか迷った 一覧系の取得処理で、Loadingを出す際、 StoreにLoadingの値を持ち、ReducerでStoreのLoadingを変更する。

もくもく会 3日目 GWも折り返し、昨日に引きCognitoを使用した、ユーザーまわりの更新処理を担当 ログイン系画面のレイアウトのコーディングも行った。 使用技術 JavaScript Promise React React Router reactstrap useEffect Cognito 今日の対応 ログイン、未ログインのルーティング調整 画面レイアウトの調整 サインアップ サインイン 検証コード入力画面 Cognito ユーザー取得処理 ユーザー名、パスワードの変更処理 詰まったところ JavaScript ロジック側の処理の切り出しになれておらずあたふたした。 React ライフサイクルやReactの特性がわかっておらず、 useEffectとstateに振り回された。 Cognito ユーザー情報取得の際、getUserAttributes関数を使用すれば取得できると思っていたが、 getSession関数のcallback内でしかgetUserAttributes関数は使用できない。 cognitoUser.getSession((err, session) => { cognitoUser.getUserAttributes((err, result) => { ... }); }); 所感 React Routerはv3とv4で path の match方法が変わった。 ログイン時と未ログイン時のRoterコンポーネントの切り分けがめんどくさい。 Cognitoの使ったフロント側の実装も、この3日間で行った ユーザー新規登録、ログイン処理、ユーザー情報変更処理で実装まわりも少しなれてきた。 Cognitoを使用しておどろいたことは、ユーザー情報の変更など、結構自由がきくこと。

もくもく会 2日目 AWS Cognitoを使用したログインまわりの実装担当 使用技術 AWS Cognito amazon-cognito-identity-js React React Router Props 今日やったこと AWS Cognito SignUp 処理の実装 SignIn 処理の実装 認証コード 処理の実装 React Propsの理解 Reat Router ログイン時、非ログイン時のコンポーネント表示の処理の切り分け React Routerでのリダイレクト処理 Javascript 処理ロジックの逃し方 export で処理を切り出す 使いたいコンポーネント内でimportして関数を呼び出す [src/scripts/func.js] export const hoge = () => { hugoFunc = () => {} ... } [src/componets/componet.js] import { hugo } from '.

もくもく会 1日目 使用技術 React AWS Amplify Cognito 今日やったこと Amplify Cognitoの実装環境構築 Cognito ログイン実装 React Reactの説明(概要) 詰まった箇所 Amplifyのハマったところ Amplify構築時にIAMのポリシー制限に何度か引っかかり、その度/amplifyを削除していたが、 /src/aws-exports.js内の aws_user_pools_id aws_user_pools_web_client_id aws_cognito_identity_pool_idの 項目が変わってなかったので,ログインまわりの処理ができなかった。 /* eslint-disable */ // WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten. const awsmobile = { "aws_project_region": "ap-northeast-1", "aws_cognito_identity_pool_id": "ap-northeast-1:XXXXXXXX", // ← ここ "aws_cognito_region": "ap-northeast-1", "aws_user_pools_id": "ap-northeast-1_XXXXXXXXXXXXXXXXXXX", // ← ここ "aws_user_pools_web_client_id": "XXXXXXXXXXXXXXXXXXXXXXX", // ← ここ "oauth": {} }; export default awsmobile;

新しいPCで環境を整える必要があり、色々設定を行ったのでその備考録 環境 mac OS Catalina Homebrew 2.2.13 まずはHomebrewでanyenvをインストール $ brew install anyenv .bash_profileにeval "$(anyenv init -)"を書き込み、ターミナルを再起動 $ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile $ exec $SHELL -l インストールできるenvの一覧 $ anyenv install -l pyenvのインストール $ anyenv install pyenv $ exec $SHELL -l $ pyenv install 3.7.0 $ pyenv global 3.7.0 $ pyenv global $ anyenv version