この記事について

【初心者向けワークショップ】Cloud9+React+Amplify+Cypressでアプリの公開からCI/CD+E2Eテスト自動化までやってみよう！
https://qiita.com/oh_rusty_nail/items/90f19b14fe12b65f0ed8

上記のAmplify + Cloud9環境でreactアプリをつくってみるチュートリアルをやってみたので、詰まった点を共有します

ボリュームの容量が足らない！

今回の作業メモリ容量が10Gほどだったため、途中で「容量が足りません」と怒られることがありました。

df -h

上記のコマンドで容量を確認してみると99%使用済みとなっており、やばそうです。

下記の記事を参照に、プロジェクトのEC2インスタンスに紐づけられたボリュームの容量を増やしてあげると改善されました。

AWS Cloud9 で利用している EBS ボリューム領域を拡張する
https://qiita.com/ktrkmk/items/8cf1e100da2e717f3be2

Amplifyプロジェクト上限数を超えてしまった！

複数人で同じAWS環境でチュートリアルを実施したため、Amplifyのアプリ数が上限である25個を超えてしまいました。そのため、ホスティング時にエラーが発生する事態に・・・

対策

アプリ名は個人が特定できるものを設定する
「amplify init」に失敗した際はコンソールのプロジェクトも削除しておく
個人AWSアカウントでチュートリアルを実施する

Cypressのテストがうまくいかない

「チュートリアル通りに行っているのにCypressのテストが失敗してしまう」という状況にはまったのですが、テスト用jsファイルのアカウント名とパスワードの設定に原因がありました。

チュートリアルにおいてCypressは画面操作を再現するのみです。
そのため、テストを行う前に「npm start」のプレビュー画面からテスト用アカウントをあらかじめ作成しておく必要があります。

アカウントを作成したら、アカウント名とパスワードを下記のコードへ適宜挿入するとテストが成功するかと思います。

cypress/integration/authenticator_spec.js


describe('Authenticator:', function() {
  beforeEach(function() {
    cy.visit('/');
  });

  describe('Sign In:', () => {
    it('allows a user to signin', () => {
      cy.get(selectors.usernameInput).type(
        'テスト用に作成したアカウント名'
      );
      cy.get(selectors.signInPasswordInput).type(
        'テスト用に作成したアカウントのパスワード'
      );
      cy.get(selectors.signInSignInButton)
        .contains('Sign In')
        .click();
      cy.get(selectors.root).contains('Global');
    });
  });
});
export const selectors = {
  usernameInput: '[data-test="username-input"]',
  signInPasswordInput: '[data-test="sign-in-password-input"]',
  signInSignInButton: '[data-test="sign-in-sign-in-button"]',
  root: '#root'
};

勉強用リンク集

フロント実装やAPI部分を詳しく知る際に使えそうなリンク一覧

公式チュートリアル
https://ja.reactjs.org/tutorial/tutorial.html

Reactのチュートリアルをhooks + TypeScriptでモダンな仕様にリファクタしてみた
https://dragon-taro.com/technology/modern-react-tutorial

Material-UI
https://material-ui.com/

Web API初心者と学ぶGraphQL
https://qiita.com/SiragumoHuin/items/cc58f456bc43a1be41b4

Cypress
https://qiita.com/sinpaout/items/4313ed75e603508696b1