ことの起こりは

AWS amplifyを使ってみようと思います。

https://amplify-sns.workshop.aws/ja/
こちらが題材としてちょうどよかったので、このままやってみようと思います。

はて？開発環境ねぇ。。。

いつも使っているWindows PCにnode.js入れて、、、というのでもよかったのですが、wslがうまく起動しなかったりとかありまして。
それはそれで好奇心をくすぐられたのですが、今回はそこじゃないよ！ということでEC2でも立てるかぁ、と思っていたときにLightsailが目に留まり、使ってみることに。

• PlatFormはUnix/Linux
• BluePrintはnode
• Instance Planは最小の512MB,1 vCPU　←ここダメ～

チュートリアルは進む、そしてそれは起こった。

amplify init

ここで見事にメモリ不足が。。。
そこで、

1. スナップショットを取得（インスタンスを起動していないと取得できません！）
2. スナップショットからCreate Instance。 Instance Planを1GB（コンポーネント増えたら足りなくなった）2GBに。

気を取り直して

amplify delete
amplify init

今度はOk！

はいはい。そうですよね。

development serverは立ち上がったものの
ブラウザからポート3000でアクセスせよ！
と。
ローカルIPから。。。？でもGUI動くんだっけ。。。？
インスタンス一覧から該当のインスタンスの右上3点ドットでManageを選ぶとPublicIPが付与されていることは分かる。
NetworkingタブのIPv4 Firewall。これですね。

Custom-TCP-3000

を追加して、http://PublicIP:3000で表示されました。

認証機能を追加する

チュートリアルを進めて、./src/App.jsファイルの中身を書き換えて

npm start

ユーザ名、パスワード、メールアドレスを入力して、CREATE NEW ACCONTからユーザ登録するとメールが送られて、そこに記載されている確認コードを入力するとユーザ登録される。

なるほど。そこまでこれだけでできるのか！と思いつつCREATE NEW ACCONTをポチっ！
Authentication Errorの表示が。。。

いろいろ調べてみたところ、以下の記事を見つけ、
https://github.com/aws-amplify/amplify-js/issues/6930

yarn add aws-amplify@latest
yarn add @aws-amplify/ui-react@latest

したところ無事に動作しました（npmとyarnは混ぜない方がいいのかな。。。）。
ちなみにアップグレード前のバージョンがこちらで

@aws-amplify/[email protected]
[email protected]

アップグレード後がこちら。チュートリアルは細かにモジュールのバージョンの指示あったのに無視するから。。。

@aws-amplify/[email protected]
[email protected]

MVPは作れた？

サンプルコードを追求するのは本意ではないので放置しますすが、ログアウトしても画面はサインイン画面に戻らない。。。
リロードするとサインイン画面になりますけど。

Mockは素敵なんですけど。。。

amplify mock api
npm start

これを別なターミナルから順番に起動すると、mock apiを使ってアプリを動作させることができる！
でも追加した機能のところが「くるくる」となって表示されない。。。うーん、もしや。。。

Amplify CLIでは、 $ amplify pushを実行すると、Amplify Framework(SDK)がリソースにアクセスするために必要なエンドポイント、IDといった情報をaws-exports.jsにexportします。

aws-exports.jsの中のAPIのベースとなるIPアドレスがローカルIPになっていたので、グローバルIPに変更してOK！
ただ、これってMock終わると書き換えられてしまうので、毎回手で直すのか！？というところは調査中。。。

クラウドに反映

amplify publish

予定通りにアプリとして動作していないところがあるような気はするものの、今は放置。

ここまでで地味に面倒だったのが、チュートリアルで用意されているソースのコピペ。ブラウザからLightsailでviを開いてコピペしたのですが、

1. 作業しているのがWindowsPCのため（？）改行コードがCR+LFでコピーされている。そのためペーストしたときに改行が2つになってしまう。コピーしたものをsakuraエディタで改行コードをLFにしてからペースト。
2. viの仕様（？）かhoge.jsを開いてInsertモードでペーストしたときにコピー元に行コメント(//)があると、それ以降の行の先頭に//が付いてしまう。

:set paste

で、ペーストモードに入ってからi を押してペーストするとコピー元どおりにペーストされます。

staging環境を作ろう！

amplify env add

としてstaging環境を作ります。

バックエンドの構築が完了したらアプリケーションを実行します。

npm start

あれ？productionと同じサインイン画面が出る代わりに以下の表示が。。。

Welcome
Your app will appear here once you complete your first deployment.

stagingができたのはバックエンドだけでフロントはLightsailで動いているので、
https://staging.xxxxx.amplifyapp.com
ではなくて、
http://PublicIP:3000
にアクセスなんですね。。。

CI/CDだぜ！

amplify add hosting
（中略）
Continuous deployment is configured in the Amplify Console. Please hit 
enter once you connect your repository 

と表示されたので、Enter！すると

No hosting URL found. Run 'amplify add hosting' again to set up hosting w
ith Amplify Console.

おや？

コマンドラインから「Continuous deployment (Git-based deployments)」を選択したタイミングで、ソースリポジトリを選択する画面が自動で開きます。

じゃないの？
開かないので自分でAmplify Consoleを開きます。

E2Eテストだぜ！

見事に×。。。実行結果も出ていない。

cypress.jsonに以下の設定を追加し、Cypressがテストを実行するためのサーバを指定します。

{
    "baseUrl": "http://localhost:3000",
    "includeShadowDom": true
}

localhostでいいのか。。。？
amplifyでテストするときって、どこで実行してるんだろう。デプロイより前だからビルドしたものをホスティングした場所ではないはず。cypressをインストールしているのだから、当然ローカルってことか。。。
というわけでamplify.ymlに記載されているコマンドを打ってみる。

npx start-test 'yarn start' 3000 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'

すると、Xvfbがない、libgbmがない、と言われるのでインストール。

sudo apt install xvfb
sudo apt-get install libgbm-dev

動いた！×だけど。。。
シナリオを動かした結果エラーなので、これでOK！

一通りできた！

実務での利用シーンを考えると、まだハテナ？なところがあるので、さらにいろいろやってみようと思います。