test_t_55_memo

メモ書きです!

【React Native】エラー対応

■エラー

console.error "React Native version mismatch.

JavaScript version: 0.61.5

Natvie version: 0.63.3

[対応]

watchman watch-del-all && react-native start —reset-cache

 

 

■エラー

error listen EADDRINUSE: address already in use :::8081

ポートの衝突

 [対応]

一度使用しているポート8081を消去してから、再度立ち上げる

//ポートのPIDを特定する

lsof -i :8081

//消去

kill -9 PID

(参考)

https://qiita.com/shumatsukishu/items/68755725a9370c119c8c

 

 

■エラー

error Could not find the following native modules: react-native-camera. Did you forget to run "pod install" ?

(対応)

cd ios

pod install --repo-update

(参考)

pod repo update を実行することで、任意のタイミングでキャッシュを更新することが出来る。

リリース済みのバージョンであるにもかかわらず、Podfile 上で指定されたバージョンのライブラリが見つからない、もしくは最新のバージョンが入らない(Podfile 上でバージョンの指定がない場合には、そのライブラリの最新バージョンが取得される)場合には、これによって対処できるかもしれない。

https://qiita.com/msh5/items/c35717b27975c9e48d15

 

■エラー

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

  - react-native-camera (to unlink run: "react-native unlink react-native-camera")

(対応)

react-native unlink react-native-camera

 

■エラー

ExceptionsManager.js:179 Error:

`createStackNavigator()` has been moved to `react-navigation-stack`.

See https://reactnavigation.org/docs/stack-navigator.html for more details.

(対応)

https://www.366service.com/jp/qa/a78df5ad655f7b59b58259d70bd13c9d

以下のコマンドで追加

react-native install react-navigation-stack save

 

■エラー

ExceptionsManager.js:179 Error:

undefined Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedViewNative.js`: @react-native-community/masked-view could not be found within the project.

(対応)

yarn add @react-native-community/masked-view

もしくは

npm install --save @react-native-community/masked-view

 

 

(参考)

https://qiita.com/kum44/items/982086c79a09b14e7afc

キャッシュのクリア

lsof -n -P -i :8081 -t | xargs kill

rm -rf ios/build

rm -rf android/app/build

rm -rf node_modules

yarn

(起動)

yarn react-native run-ios

 

■エラー

Unable to resolve module react-native install react-natvie-safe-area-context save

(対応)

npm i react-native-safe-area-context

(参考)

https://www.npmjs.com/package/react-native-safe-area-context

 

■エラー

Unable to resolve module  react-native-screens

(対応)

npm install --save react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

(参考)

https://dev-yakuza.posstree.com/react-native/react-navigation/

 

■エラー

ExceptionsManager.js:179 Error:

`createBottomTabNavigator()` has been moved to `react-navigation-tabs`.

See https://reactnavigation.org/docs/bottom-tab-navigator.html for more details.

(対応)

npm install --save react-navigation-tabs

 

■エラー

Could not find store in the context of Connect(Home)   Either wrap the root component in  a Provider

(対応)

おそらく、、、書き方が変わったのかも

React Redux 7.1.0からフック(Hook)が備わりました

import { connect } from 'react-redux'

import { useSelector, useDispatch } from 'react-redux';

(参考)

http://www.fumiononaka.com/Business/html5/FN2004004.html

 

 

【React Native】環境構築・コマンド

新しいプロジェクト作成

npx react-native init MyApp

 

依存パッケージをインストール

cd MyApp

yarn

 

ネィティブ層における依存パッケージをインストール

cd ios

pod install —repo-update

 

必要なツールがインストールされているかチェック

npx react-native doctor

 

バージョン確認

react-native info

 

起動(いろいろある)

yarn react-native run-ios

react-native run-ios --simulator "iPhone 11"

npx react-native run-ios

 

 (参考)npx の良いところ

github gistにあげているパッケージがあるとして、以下のコマンドを打つと、インストールなしで実行できる 

qiita.com

 

以下は非推奨かもしれない(react-native-cli

npm install -g react-native-cli

アンインストールする場合

npm uninstall -g react-native-cli

 

Androidエミュレータ確認(もしくは、Android端末を直接USB接続できてるか確認)

adb devices

Android端末を直接USB接続して認識されてる場合は

  Android Studioからインストール可能

 

(キャッシュのクリア関連)

# watchmanのキャッシュを削除
watchman watch-del-all

 

# iosのビルドファイルを削除
rm -rf ios/build

 

# androidのビルドファイルを削除
rm -rf android/app/build

 

# node_modulesを削除
rm -rf node_modules

 

# Podsファイルを削除
rm -rf ios/Pods

 

# Xcodeのキャッシュを削除
rm -rf ~/Library/Developer/Xcode/DerivedData

 

# yarnをインストール
yarn install

 

# podをインストール
cd ios
pod install

 

# androidのビルド環境をクリア
cd ../android
./gradlew clean cleanBuildCache

 

# metro bundlerを再起動
cd ..
yarn start -- --reset-cache

 

# metro bunlderが起動したらControl + Cでmetro bundlerを落とす
(参考)

qiita.com

 

Metro Bundler

(ツール)

ターミナル上で動作する

アプリを起動する際、同時に起動されサーバとして動作

すべてのファイルを1つにまとめて返却(1つのJavaScriptファイルにまとめることをバンドルと呼ぶ)

 

Metro Bundlerの注意点

ディレクトリ名変更・ソースファイルのディレクトリ移動すると

キャッシュ古いままで更新されない場合あり

(対応)

Metro Bundlerを終了

以下を実行

npx react-native start —reset-cache

(参考)

https://www.amazon.co.jp/React-Native-%EF%BD%9EJavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS%EF%BC%8FAndroid%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8-%E5%81%A5%E4%BB%8B-ebook/dp/B088BLSH9V/ref=pd_vtp_351_1/355-2959510-2123527?_encoding=UTF8&pd_rd_i=B088BLSH9V&pd_rd_r=613f177a-e621-49ba-8c42-54cb405386b3&pd_rd_w=tnUmu&pd_rd_wg=Vr3Yq&pf_rd_p=c908b90e-c601-4103-95b3-a2b18c6827f0&pf_rd_r=QECH3BNVKZY5ECJ1TDVB&psc=1&refRID=QECH3BNVKZY5ECJ1TDVB

 

キャッシュクリア

lsof -n -P -i :8081 -t | xargs kill

rm -rf ios/build

rm -rf android/app/build

rm -rf node_modules

yarn

 

 

 

 

【インフラ】AWS

 

【用語】

WEBサーバー
アプリとの通信

APサーバー
管理画面を提供します。日時のバッチ処理など

RDS
AWSのデータベースクラウドサービス

Amazon Elastic Cache
AWSのセッションストレージサービス
各サーバーのセッションデータを保持

Amazon ELB
AWSロードバランサーサービス
各種サーバーにHTTPリクエストを振り分け

Amazon S3
画像情報を補完するAWSのサービス

Amazon SES
AWSのメール配信サービス

 

 

【アプリ】ビルド(iOS)

以下の2ファイルを、ダブルクリックしてキーチェーンに保存

xxx.p12

yyy.p12

(このあたり、よくわからない..)

 

xcodeでプロビジョニング設定

①「Generic iOS Device」へ変更

②「TARGETS」を対象プロジェクトに設定

③「Signing & Capabilities」のタブへ切り替える

④「Automatically manage signing」のチェックをはずす

⑤「Bundle Identifier」に「jp.xxx.hogehogeapp.stg」をセット※

⑥「Provisioning Profile」に「hogehogepstg_adhoc」をセット※

development:開発

adhoc:配信

※ダウンロードしたプロビジョニングファイルを設定します

 また、Appleアカウントの同期ができていると選択できるのかも(この場合はダウンロード不要)

f:id:test_t_55:20201009002327p:plain


アーカイブ

xcode(対象のワークスペースから)

Product > Archive

 

Product を選択後、optionを押したままにすると

Archiveが表示されます

f:id:test_t_55:20201003160852p:plain

 

Archive (左側)を選択、

Archive(右下)を押す

f:id:test_t_55:20201003160926p:plain

 

添付のようなメッセージが表示された場合

自分の端末のパスワードを入力して継続

(常に許可で、今後は表示されなくなります)

f:id:test_t_55:20201003160950p:plain


Distribute Appを押す

f:id:test_t_55:20201003161024p:plain


配信(テスター)する場合は

Ad Hoc → Next

 

本番をApple Develoverにリリース申請する場合は

App Store Connect → Next

f:id:test_t_55:20201003161046p:plain


None > Next

f:id:test_t_55:20201003161104p:plain

 

Select Profile > ここで対象のプロビジョニングファイルを選択(※) > Next

ステージング環境の配信する場合は

Import Profile… > hogehogepstg_adhoc を選択

f:id:test_t_55:20201003161135p:plain

 

Exportされるとフォルダに

iPaファイルが生成されるので、完成です!

f:id:test_t_55:20201003161207p:plain


iPaファイルは、Firebase Console のApp Distributionから配信できます

 

 

 

【アプリ】プロビジョニングファイル

Apple Developer(アップルディベロッパーセンター)

https://developer.apple.com/jp/

ログイン

(2段階認証は必要かも)

 

 

ログインしたら

Certificates, Identifiers & Profiles

をクリック

 

Certificates, Identifiers & Profiles

Devices

Devices +

+ の部分をクリック

 

Register a New Device

Device Name (任意名でOKです)

Device ID(UDID) こちらはインストールしたいiOSの端末のUDIDを設定

Continueをクリック

 

Certificates, Identifiers & Profiles

Profiles

該当のプロビジョニングファイル名をクリック

Editをクリック

Devices の一覧で

先ほどUDIDを追加した端末名にチェックします

Saveをクリックで、保存します

 

Certificates, Identifiers & Profiles

Profiles

該当のプロビジョニングファイル名をクリック

「DownLoad」

 

プロビジョニングファイルは

xcodeで設定する(別記事)