AmplifyでPythonのfunctionを追加したけど2回目のpushができない😇
AmplifyでPythonのfunctionを追加し amplify push
をして、プログラムを修正後、もう一度、 amplify push
したらエラーがでてpushできなかったときの対処方法の備忘録📝
環境
エラー内容
$ amplify push ✖ There was an error pulling the backend environment dev. 🛑 ENOENT: no such file or directory, stat '/xxxx/react-ts-workspace-amplified/amplify/.temp/#current-cloud-backend/function/samplePythonFunction/.venv/bin/python'
#current-cloud-backend
内にPythonの仮想環境の .venv
があり、その中にシンボリックリンクがあることが悪さをしているらしい。
#current-cloud-backend
は現在のクラウド状態が格納されている。
対処方法
Pipenvの2つの環境変数を .env
に記載し対処
- プロジェクト配下に仮想環境を配置するか指定できる環境変数:PIPENV_VENV_IN_PROJECT
- 仮想環境の独自の配置場所を指定できる環境変数: WORKON_HOME
Amplifyでは「PIPENV_VENV_IN_PROJECT」がデフォルトで「true」になっているようなので、 amplify push
を行うと作成したfunction配下に仮想環境( .venv )が作成される
これが #current-cloud-backend
にはいってしまう。
このため、 Pipenvの.env の自動読み込み機能を利用するため .env
を Pipfile
と同じ場所に配置し以下を記載
PIPENV_VENV_IN_PROJECT=false WORKON_HOME=../../../../.venvs
- .envの記載内容の補足
PIPENV_VENV_IN_PROJECT
がtrue
のままだとWORKON_HOME
が有効にならなかった- このため
PIPENV_VENV_IN_PROJECT
をfalse
に設定し - 仮想環境の配置場所を
#current-cloud-backend
に含まれない場所に変更
無事、2回目以降も amplify push
できるようになりました🙌
懸念点
ただ、この方法だとPythonのfunctionが複数になった場合、仮想環境が被ってしまうので、 amplify/backend/function
とは別の場所でPipfileを統一した方がよさそう
補足:エラーが出た場合の復帰方法
こちら参考にさせていただきました!ありがとうございます🙏
以下ページの「amplify pushができなくなったら」です!
SORACOM Beamのプラットフォームバージョン変更ではまなったこと
「プラットフォームバージョン 201509 は 2022 年 8 月 1 日にサポートを終了します」ということで少し遅くなってしまいましたが「201912」に変更したところエラーがでたのでその備忘録です!(ちなみにちゃんと以下ドキュメントを読んでいればはまらなかった・・・)
プラットフォームバージョンを変更
SORACOMコンソールで該当グループのBeamのプラットフォームバージョンを「201912」に変更し保存
他設定はこんな感じ
- 転送先
- 証明書 (key と cert) を利用しています
エラー
データをBeamに送ったところ以下エラーが発生
{ "time": xxxxxxxxxxxxx, "service": "Beam", "resourceType": "Subscriber", "resourceId": "xxxxxxxxxxxxxxx", "body": { "message": "[MQTT] Destination error mqtt://xxxxx.iot.ap-northeast-1.amazonaws.com:8883: Cannot parse protocolId" } }
原因
以下ちゃんと記載があるのに、転送先プロトコルを「MQTT」のまま変更していませんでした😇
「201509」のときに転送先プロトコルを「MQTT」にしていましたが、証明書 (key と cert) を利用していたので、「MQTTS」で接続してくれていたんですね!今回、プラットフォームバージョンを変更したことにより「MQTT」で接続するようになりエラーが発生したようです📝
プラットフォームバージョン 201509 においては、証明書 (key と cert) を利用している場合、転送先に接続するプロトコルの設定に関わらず MQTTS プロトコルで転送先に接続されます。プラットフォームバージョン 201912 においては、証明書の利用有無に関わらず、転送先に指定されたプロトコルで接続します。転送先のプロトコルが正しく設定されているかを事前に確認ください。
リファレンス: 制限事項と注意事項 | SORACOM Beam | ソラコムユーザーサイト - SORACOM Users
対処
SORACOMコンソールで該当グループのBeamの転送先プロトコルを「MQTTS」に変更したところ無事解決🙌
(ちなみに、別アカウントではプラットフォームバージョンを変更しても特にエラーがでなかったのでそちらとBeamの設定を比較したところ気がつきました(^^; )
Notionで進捗状況を可視化してみる
スケジュール管理するときに、予定日、開始日、終了日を入力しいちいち状況を「着手中」とか「完了」とか変更するのがめんどいし、遅れているのかオンスケなのかわからない・・・
なのでNotionのpropertyにある Formula
を使って日付を入力すると現状の進捗状況が自動で切り替わるようにしてみました🙌
前提
- ちゃんと動きを確認していないところもあるので想定外の動きをするかもです。。。了承を🙏
- Notinoの説明については割愛させてください🙏
property: Formulaについて
ExcelやGoogle Sheetsの関数と同じような機能です。合計値や様々な値の算出が可能です。
詳細はこちら!
このように prop("[property名]")
でpropertyの値を参照できたり、分岐やいろいろな関数等が用意されています🙌
完成イメージはこちら
予定、開始日、終了日により 状態
と 状況
がかわります👀
※ 進捗バー、進捗率は「おまけ」で説明します🙏
作成していきましょう!
まずは各propertyを用意
名前 | タイプ | 内容 |
---|---|---|
状態 | Formula | empty(prop("終了日")) ? (empty(prop("開始日")) ? "" : "👨💻") : "🔚" |
状況 | Formula | if(empty(prop("終了日")) == false, "🔚", if(start(prop("予定")) > now(), if(empty(prop("開始日")) == false, "🆒", ""), if(empty(prop("開始日")), "🔥", if(end(prop("予定")) < now(), "🔥", "✅")))) |
予定 | Date | 予定日を入力。 End date をONにしてrangeで設定。 |
開始日 | Date | 該当のタスクに着手開始した日を入力 |
終了日 | Date | 該当のタスクが完了した日を入力 |
状態
と 状況
の判定については以下を参照
状態の判定について
状況の判定について
完成したもの
おまけ
進捗バー、進捗率については以下を参考に作成させてもらいました🙏
ただ、進捗率により進捗バーを変更するようにした簡易版です!
【Notion】進捗を可視化したガントチャートの作成手順 - Qiita
property
名前 | タイプ | 内容 |
---|---|---|
進捗バー | Formula | slice("▓▓▓▓▓▓▓▓▓▓", 0, prop("進捗率") * 10) + slice("░░░░░░░░░░", 0, 10 - prop("進捗率") * 10) |
進捗率 | Number | Number format を Percent に設定 |
完成したもの
Let's Enjoy Notion🙌
Flutterインストール📝 to Mac
自分のMacに以下サイトを参考にFlutterをインストールしたときの備忘録📝
環境
インストール
Get the Flutter SDK
Intel用のFlutter SDKファイル(zip)をダウンロードし解凍
解凍したファイルはホームディレクトリ配下に以下のように配置
$ cd $ cd Documents $ mkdir development $ cd development $ pwd /Users/chino/Documents/development # 解凍したファイルを移動 $ mv ~/Downloads/flutter ./ $ ls -la total 0 drwxr-xr-x 3 chino staff 96 7 24 10:49 . drwx------@ 58 chino staff 1856 7 24 10:49 .. drwxr-xr-x@ 27 chino staff 864 7 14 05:40 flutter
Flutterのパスを設定
$ vi ~/.zshrc # 以下を追記し保存 --- # flutter export FLUTTER_HOME="$HOME/Documents/development/flutter" export PATH="$PATH:$FLUTTER_HOME/bin" ---
Run Flutter Doctor
flutterの doctor
というコマンドでFlutterに必要な開発環境が準備できているか確認できるので実行💻
$ flutter doctor ╔════════════════════════════════════════════════════════════════════════════╗ ║ Welcome to Flutter! - https://flutter.dev ║ ║ ║ ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║ ║ statistics and basic crash reports. This data is used to help improve ║ ║ Flutter tools over time. ║ ║ ║ ║ Flutter tool analytics are not sent on the very first run. To disable ║ ║ reporting, type 'flutter config --no-analytics'. To display the current ║ ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║ ║ event will be sent, and then no further information will be sent by the ║ ║ Flutter tool. ║ ║ ║ ║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║ ║ Note: The Google Privacy Policy describes how data is handled in this ║ ║ service. ║ ║ ║ ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║ ║ crash reports to Google. ║ ║ ║ ║ Read about data we send with crash reports: ║ ║ https://flutter.dev/docs/reference/crash-reporting ║ ║ ║ ║ See Google's privacy policy: ║ ║ https://policies.google.com/privacy ║ ╚════════════════════════════════════════════════════════════════════════════╝ Running "flutter pub get" in flutter_tools... 10.3s Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP) [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [!] Xcode - develop for iOS and macOS (Xcode 13.4.1) ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web [!] Android Studio (not installed) [✓] VS Code (version 1.69.1) [✓] Connected device (2 available) [✓] HTTP Host Availability ! Doctor found issues in 3 categories.
以下がまだ準備できていなかった
- Android toolchain - develop for Android devices
- Xcode - develop for iOS and macOS (Xcode 13.4.1)
- →CocoaPodsがインストールされていない⚠
CocoaPodsのインストール
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
ということなのでCocoaPods Guides - Getting Startedを参照しインストール👀
$ sudo gem install cocoapods
パスを設定
$ vi ~/.zshrc # 以下を追記し保存 --- export GEM_HOME=$HOME/.gem export PATH=$GEM_HOME/bin:$PATH ---
もう一度、 doctor
を実行!
$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP) [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) [✓] Chrome - develop for the web [!] Android Studio (not installed) [✓] VS Code (version 1.69.1) [✓] Connected device (2 available) [✓] HTTP Host Availability ! Doctor found issues in 2 categories.
Xcodeについては準備完了🙆
Android関連のインストール
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
ということなのでmacOS install | Flutterを参照しセットアップ!
まずはAndroid Studioをインストール
インストール後、Android Studioを起動し初期セットアップも完了
再び doctor
を実行!
flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP) [!] Android toolchain - develop for Android devices (Android SDK version 33.0.0) ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.69.1) [✓] Connected device (2 available) [✓] HTTP Host Availability ! Doctor found issues in 1 category.
✗ cmdline-tools component is missing
macOS install | FlutterのページでAndroid Studioの初期セットアップ時にインストールされると記載があったがなぜかインストールされず。。。一応、 sdkmanager
を実行してみたが command not found
になってしまった・・・
このため、こちらのDownload Android Studio & App Tools - Android Developersからzipファイルをダウンロードできるようなのでダウンロード、解凍してSDK配下に配置
# SDK配下に移動 $ cd /Users/chinoyuuji/Library/Android/sdk # ダウンロードして解凍したcommand-toolsをsdk配下に配置 $ sudo mv ~/Downloads/cmdline-tools ./
SDKの場所はAndroid Studioを起動し確認しました
sdkmanagerのパスを設定
$ vi ~/.zshrc # 以下を追記し保存 --- # Android export ANDROID_USER_HOME="/Users/chinoyuuji/Library/Android" export ANDROID_HOME="$ANDROID_USER_HOME/sdk" export ANDROID_CMDLINE_TOOLS="$ANDROID_HOME/cmdline-tools" export PATH="$PATH:$ANDROID_CMDLINE_TOOLS/bin" ---
sdkmanagerの最新をインストール
$ sdkmanager --install "cmdline-tools;latest" The operation couldn’t be completed. Unable to locate a Java Runtime. Please visit http://www.java.com for information on installing Java.
JAVAがインストールしていなかったので、http://www.java.comからjavaをインストールしてから再度、コマンドを実行
$ sdkmanager --install "cmdline-tools;latest" Error: Could not determine SDK root. Error: Either specify it explicitly with --sdk_root= or move this package into its expected location: <sdk>/cmdline-tools/latest/
SDKのパスを指定が必要だったので指定して再実行!
$ sdkmanager --install "cmdline-tools;latest" --sdk_root=/Users/chinoyuuji/Library/Android/sdk [=======================================] 100% Unzipping... cmdline-tools/lib/RE
できたみたいなので、 doctor
で出力されていたもうひとつのコマンドを実行(すべて「y」で承諾)
$ flutter doctor --android-licenses ・・・ All SDK package licenses accepted
再び、 doctor
を実行👀
$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale ja-JP) Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.69.1) [✓] Connected device (2 available) [✓] HTTP Host Availability • No issues found!
No issues found!
になり準備完了🙌
TWELITEをいじってみる(センサデータをみてみる)
この記事は↓の続きになります!
今回は、TWELITE DIPにセンサを繋いで、MONOSTICKで受信したセンサデータをみてみます!
こちらのページが参考になりますが、スイッチサイエンスで購入したBME280は配線が違うため、あわせて記載していきます📝
前提
センサデータをみてみる
準備
ハード側
配線はこちら
- 抵抗は10kΩを使用
- BME280についてはこちらも参考になります
- Fritzingのパーツはこちらからダウンロード
ソフトの書き換え、設定の編集・変更
手順としては無線タグアプリ (App_Tag) - MONO-WIRELESS.COMをMONOSTICK、TWELITE DIPに書き込み、設定等をインタラクティブモードで編集・設定します!
- TWELITE DIPに子機用の「App_Tag_EndDevice_Input」を書き込み
- MONOSTICKにOTAでTWELITE DIP側の設定を変更する「App_Tag_EndDevice_Input_OTA」を書き込み
- インタラクティブモードで子機用の設定を行う
- 子機(TWELITE DIP)の設定を変更
- MONOSTICKでデータを受信するための「App_Tag_Parent_MONOSTICK」を書き込み
TWELITE DIPに子機用の「App_Tag_EndDevice_Input」を書き込み
- TWELITE DIPをTWELITE R2に装着して、PCとUSB接続
- ⚠⚠⚠差し込む方向を間違えるとTWELITE DIP側が壊れてしまう可能性があるので注意!⚠⚠⚠
- TWELITE STAGEを起動
- シリアルポートは「TWELITE R2」を選択
- 「アプリ書き換え」⇒「TWELITE_APPSビルド&書換」⇒「App_Tag」⇒「App_Tag_EndDevice_Input」を選択
- ⇒アプリがTWELITE DIPに書き込まれます
- 書き込みが完了したら、TWELITE STAGEを終了させて、TWELITE R2もPCから外し、TWELITE DIPをブレッドボードに装着する
- ブレッドボード装着後、まだ電源はいれない!
MONOSTICKにOTAでTWELITE DIP側の設定を変更する「App_Tag_EndDevice_Input_OTA」を書き込み
- MONOSTICKをPCとUSB接続
- TWELITE STAGEを起動
- シリアルポートは「MONOSTICK」を選択
- 「アプリ書き換え」⇒「TWELITE_APPSビルド&書換」⇒「App_Tag」⇒「App_Tag_EndDevice_Input_OTA」を選択
- ⇒アプリがMONOSTICKに書き込まれます
インタラクティブモードで子機用の設定を行う
次にインタラクティブモードで子機に設定する内容を編集します
- 上記の続き
- TWELITE STAGEの「インタラクティブモード」を選択
- 設定を変更する
- 「b」キーでUART baundを変更:115200
- 「o」キーでOption Bitsを変更:0x00010001
- 「d」キーでSleep Durを変更(ms):60000(※ 1分ごと送信するようにする)
- 「w」キーでSensor Waitを変更(ms):30
- 「m」キーでSensor Modeを変更:0x39
- 「p」キーでParameterを変更:0
- 「Shift + S」キーで設定を保存
各設定の詳細はこちらを参照
無線タグアプリ インタラクティブモード - MONO-WIRELESS.COM
子機(TWELITE DIP)の設定を変更
上記に引き続き、TWELITE STAGEを起動したままで、子機に電源をいれて、以下のように表示されれば、TWELITE DIP側に設定が反映されたことになるようです!
SUCCESS [TWELITE DIPのED]
⚠障害物などに弱いので、なるべくMONOSTICKとTWELITE DIPを近い距離にして、TWELITE DIPの電源をいれてください⚠
MONOSTICKでデータを受信するための「App_Tag_Parent_MONOSTICK」を書き込み
- MONOSTICKをPCとUSB接続
- TWELITE STAGEを起動
- シリアルポートは「MONOSTICK」を選択
- 「アプリ書き換え」⇒「TWELITE_APPSビルド&書換」⇒「App_Tag」⇒「App_Tag_Parent_MONOSTICK」を選択
- ⇒アプリがMONOSTICKに書き込まれます
センサデータを確認!📈
TWELITE STAGEを起動して、シリアルポートは「MONOSTICK」を選択をすると1分ごと、センサデータを確認できます!🙌
- tm: 温度(100倍されているので、22.44℃)
- hu: 湿度(こちらも100倍されているので、39.08%)
- at: 気圧(975hPa)
::rc=80000000:lq=183:ct=0018:ed=82015460:id=0:ba=3180:a1=1138:a2=0689:tm=2244:hu=3908:at=0975
Pythonで確認してみる
Raspberry PiにMONOSTICKを装着すると /dev/ttyUSBx
として認識されます
$ ls -la /dev/ttyUSB* crw-rw---- 1 root dialout 188, 0 3月 19 23:19 /dev/ttyUSB0
Pythonでserial関連のライブラリをインストールします
$ pip3 install pyserial
コードはこんな感じ
import serial import time ser = serial.Serial('/dev/ttyUSB0', 115200) while True: time.sleep(1) recv_list = ser.readline().decode('utf-8').split(':') if len(recv_list) < 13: # いったん、受信データの要素数で不要なデータ時は出力しないようにする continue print(recv_list)
実行すると以下のように受信したデータを確認できます🙌
$ python3 app_tag_loop.py ['', '', 'rc=80000000', 'lq=159', 'ct=0002', 'ed=8201C109', 'id=0', 'ba=3190', 'a1=0916', 'a2=0612', 'tm=2270', 'hu=4060', 'at=0975\r\n']
Let's Enjoy センシング!!!!!!!! 📊
TWELITEをいじってみる(購入・標準アプリをいじる)
TWELITEの無線タグアプリ(App_Tag)は各種I2Cセンサー用のドライバを内蔵しているけど、対応していないI2Cセンサーを使いたくてTWELITEをいじってみてます。
その過程を何回かに分けて書いていこうと思います!TWELITEにこれから触りたい方にお役に立てればうれしいですー🙌
今回は、購入と標準アプリをいじってみます!💪
標準アプリはこちらの「クイックマニュアル」にある、「スイッチを押すと、LEDが点灯する例」を元に、以下を確認してみます!
TWELITE とは
特徴
- 省電力(乾電池でも動作できて、動作時間が長い!)
- それなりに長い距離の無線通信ができる(ただ障害物には弱い・・・😅)
- 中継機を置くことで通信距離を伸ばせる
などなど、その他、詳細はこちらのページの「特徴」を参照
モノをつなぐ無線マイコンモジュール TWELITE-トワイライト | 無線モジュール
どんなことができるのか👀
- 無線マイコンモジュールに温度を測れるセンサーをつけて、その無線をデータで飛ばして、ラズパイで受信する
- スイッチがついている無線マイコンモジュールからLEDがついている無線マイコンモジュールに命令をだして、スイッチが押されたら、LEDをつける
- 無線マイコンモジュールを中継機として、通信距離を伸ばせたり
- リモコンとして使用
その他、詳細はこちら!
TWELITE APPS - トワイライトアプリ - MONO-WIRELESS.COM
前提
PCに関してはMacを前提にしています🙏
- OS:macOS Big Sur(バージョン11.6.4)
購入品💴
商品 | 購入先 | 用途等 |
---|---|---|
無線マイコン高出力タイプ TWELITE RED DIP | chip1stop | 無線アイコン。今回は「高出力タイプ」を選択。 |
MONOSTICK | Amazon | ラズパイで受信したいので、親機として購入。 |
TWELITE R2*1 | Amazon | TWELITE DIPのアプリの詳細設定やアプリ書き込み用 |
KAUMO 電池ボックス | Amazon | TWELITE DIPの電源として購入 |
BME280搭載 温湿度・気圧センサモジュール ピンヘッダ実装済*2 | スイッチサイエンス | 次回の記事で使用予定 |
この他、ブレッドボード、ジャンパーワイヤー、LED、抵抗(680Ω)等必要になるので適宜、購入! ちなみに、ジャンパーワイヤーについて、ブレッドボード用バンパーワイヤーもあるので、こちらもオススメ(配線がスッキリします(^^ )。
標準アプリをいじってみる
準備
TWELITE STAGE APPをPCにダウンロード
アプリのビルド、書換、設定、表示を行うためのパソコン上で動作するソフトウエアをPCにダウンロードしします!💻
ダウンロードはこちらのページ内にある「ダウンロード」からできます
そして、解凍すると環境設定完了です!
ハード側
MONOSTICKはPCに接続。
今回、親機はMONOSTICKにして、MONOSTICKとの通信がちゃんとできているかを確認したいので、TWELITE DIPの方は、クイックマニュアルにある、子機側を参照に配線等行います。
実際にはこんな感じ。
標準アプリを試す
MONOSTICKでTWELITE DIPからのデータを受信しているところを確認
TWELITE DIPを起動する
TWELITE DIPに電気を流す!
TWELITE STAGE APPを起動する
Macの場合は、解凍した中の「TWELITE_Stage.command」をダブルクリックすると起動します。
⚠もし、アプリが起動しないなど問題が発生した場合は、こちら参考になります!
起動成功し、受信したデータを確認できれば🙆 です🙌
MONOSTICKからTWELITE DIPと繋がっているLEDのON/OFFをしてみる
MONOSTICK(親機)からTWELITE DIP(子機)に指示もできます
TWELITE STAGEを起動し、ビューアを選択
コマンダーを選択
Enterを押す
キーボードの「t」を押して「App_Twelite 0x80コマンド(t)」を選択
キーボードの「1」を押すと光ったり消したりできます (ただ、私が試したときはたまに指示通りにならず、送信(SPACEキー)を押す必要もあるときがあったりちょっと不安定感がありました。。。 )
動画はこちら(TWELITE STAGEのみですが・・・)
光ったときのハード側はこちら
今回は以上になります!Let's Enjoy TWELITE!!!!!!!!!
*1:本記事では使用しません。TWELITEをいじってみる(センサデータをみてみる) - ChinoDuino(Chino × Arduino)で使用します🙏
*2:本記事では使用しません。こちらのサイトにあるBME280とは違うので注意。TWELITEをいじってみる(センサデータをみてみる) - ChinoDuino(Chino × Arduino)で詳細は掲載してます!
Amplify ✕ Reactチュートリアルをやってみて📝
本記事はAmplify初心者の私が「AWSでReactアプリケーションする」のチュートリアルをやってみて、感想やはまったところなどをあくまでゆるーくまとめたものです
ちゃんと調べずに感覚値で記載している部分等もあるのであくまでも参考まで🙏
背景
- フロントをJavascriptフレームワーク、バックエンドをAPIみたいな構成はよくあると思います
- ただ、それだと工数が膨らんで、開発費も膨らんでしまう・・・
- Firebaseという選択肢もある
- そういえば、AWSにAmplifyあったな!
と今更ながら思いつき、どんなものかとチュートリアルをやってみました!
やってみて
- バックエンドの構成は
- 認証周りはCognito
- DBはDynamoDBでgraphqlでやりとり
- StorageはS3
- functionsというのもあって、使用していないけど、おそらくLambdaを使っている
- バックエンドの構築は
- フロントエンドのデプロイ
- githubやgitlabにPUSHしたときに自動でデプロイするようにできる
- 料金的には
- あまり詳しく調べていないけど、Amplify自体ではデプロイ時間が一番高そう?
- その他は使用しているサービスでの課金(Cognito、DynamoDB、S3などなど)
- 本番とかステージングどうするか
- このあたりが参考になりそう
はまったところなど
ビルド失敗
- フロントエンドのデプロイ時にバックエンドのビルドが失敗
- amplifyのバージョンは「7.6.19」
内容
- バックエンドのビルド時に以下のエラーが発生しデプロイが失敗してしまった・・・
amplify/cli.json
中に不明な要素がある?ようなエラーっぽい🤔
# Starting phase: build 2022-02-13T02:10:02.197Z [INFO]: [31mInvalid feature flag configuration[39m 2022-02-13T02:10:02.198Z [INFO]: [31mThese feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI:[39m [31m - project[39m [31m - graphqltransformer.transformerversion[39m [31m - graphqltransformer.suppressschemamigrationprompt[39m [31m - graphqltransformer.securityenhancementnotification[39m [31m - graphqltransformer.showfieldauthnotification[39m [31m - auth.useenabledmfas[39m [31mThis issue likely happens when the project has been pushed with a newer version of Amplify CLI, try updating to a newer version.[39m [31mEnsure that the CI/CD pipeline is not using an older or pinned down version of Amplify CLI.[39m [31mLearn more about feature flags: https://docs.amplify.aws/cli/reference/feature-flags[39m 2022-02-13T02:10:02.207Z [ERROR]: !!! Build failed 2022-02-13T02:10:02.207Z [ERROR]: !!! Non-Zero Exit Code detected 2022-02-13T02:10:02.207Z [INFO]: # Starting environment caching... 2022-02-13T02:10:02.208Z [INFO]: # Uploading environment cache artifact... 2022-02-13T02:10:02.351Z [INFO]: # Environment caching completed Terminating logging...
解決方法
- こちらのissues中にライブラリのバージョンを指定できる設定があってので試してみたところ解消
どうも、ビルド時にAmplify CLIが古いバージョンを使用していた?っぽい
ログアウトをカスタマイズ
内容
チュートリアルでは <AmplifySignOut />
コンポーネントを使用するが、ヘッダのバー部分にログアウトの機能を置きたかった
解決方法
Auth.signOutを使用してログアウトするように変更
import { Auth } from 'aws-amplify'; ・・・ function App() { ・・・ const signOut = (e) => { e.preventDefault(); Auth.signOut().then(() => { window.location.reload(); }); } ・・・ return ( <div> <CssBaseline /> <Box sx={{ flexGrow: 1}}> <AppBar position="static"> <Toolbar> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> My Notes App </Typography> <IconButton onClick={signOut}><LogoutIcon sx={{ color: 'white' }} /></IconButton> </Toolbar> </AppBar> ・・・
以下をクリックするとログアウトするようにしてみました!
その他
Material-UI
Material-UIを使ってちょこっとチュートリアルの画面からきれいにしてみましたw
Enjoy Amplify!!!!!