啟動React Native debug伺服器: react-native start
建構測試用Android APK: npx react-native run-android
建構生產用Android APK並安裝在指定裝置: cd android; ./gradlew clean; cd ..; npx react-native run-android --variant=release --deviceId=XXXXXXXXXXX
建構aab bundle: ./gradlew bundleRelease

打開debug menu: adb shell input keyevent 82
查看已連接裝置或模擬器: adb devices

查看adb device ID: adb devices
安裝APK: adb -s <device-id> install ./android/app/build/outputs/apk/debug/app-debug.apk

安裝POD：pod install
解除POD：pod deintegrate
建構新的main.jsbundle：npx react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/main.jsbundle --assets-dest ./ios/assets
建構release版本的main.jsbundle：react-native bundle --entry-file index.js --dev false --reset-cache --bundle-output main.jsbundle
(--dev false來避免'DevSettings' could not be found問題)

React native 初次建構測試 bug:
Android Studio Could not initialize classorg.codehaus.groovy.runtime.InvokerHelper
代表gradle與java版本不合，參考Gradle網頁 ，可使用sdkman轉用不同java版本（如java 11)，或到<project-path>/android/gradle/wrapper/gradle-wrapper.properties內改變gradle version的下載地址
註: react native目前不支援gradle 7或以上版本

mac版本需要用sudo npx react-native run-android來防止建構程序有權限問題

React native Bugs

圖片無法顯示：https://stackoverflow.com/questions/63949851/react-native-ios-not-showing-images-pods-issue

No matching function for call to 'RCTBridgeModuleNameForClass'：https://stackoverflow.com/questions/67287092/react-native-ios-sdk-no-matching-function-for-call-to-rctbridgemodulenamefor

CFBundleIdentifier does not exist on react-native：https://stackoverflow.com/questions/65580385/cfbundleidentifier-does-not-exist-on-react-native

Unable to prepare XYZ's iPhone for development:
更新Xcode來支援新iOS版本，https://stackoverflow.com/a/71274820

無法使用react-native run-ios來建構iOS應用,建構時出現錯誤：
phasescriptexecution [cp-user]\ generate\ specs (in target 'fbreactnativespec' from project 'pods')

解決方法：
需要在node_modules/react-native/scripts/find-node.sh中加入：

unset npm_config_prefix #add this line
unset PREFIX

在新增自訂字體時無法建構Android app，在建構時出現Duplicate resources android build error
解決方法：https://github.com/oblador/react-native-vector-icons/issues/1416#issuecomment-1042519618
若Android仍無法顯示字體，可以將字體複製到android/app/src/main/assets/fonts內
順帶記錄新增字體方法：https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4

In-app review not shown in iOS device (dev mode):
https://stackoverflow.com/questions/45057452/why-the-skstorereviewcontroller-does-not-let-me-submit-a-review

Error: plugin with id 'maven' not found.
Solution: comment apply plugin: 'maven' in build.gradle
add maven in buildscript > repositories and repositories

buildscript {
    ...
    repositories {
        ...
        maven {url 'maven url'}
    }
}

repositories {
    ...
    maven {url 'maven url'}
}

Xcode Error:

"Communication with Apple failed. You are not allowed to perform this operation. Please check with one of your Team Admins, or, if you need further assistance, please contact Apple Developer Program Support, https://developer.apple.com/support"

"No profiles for '<bundle_id>' were found. Xcode couldn't find any iOS App Store provisioning profiles matching '<bundle_id'>."

若缺失的profile是M1 Mac的話，由於使用Rosetta會改變Device ID，在Application/Xcode中勾選使用Rosetta打開來啟用或停用rosetta即可解決。

React Native Keyevent 無法取得如Enter等部份非數字/字母的Keyevent
Android需要在MainApplication.java加入

@Override
  public boolean dispatchKeyEvent(KeyEvent event) {
    if (event.getKeyCode() == KeyEvent.KEYCODE_ENTER {
       if (event.getAction() == KeyEvent.ACTION_UP){
         KeyEventModule.getInstance().onKeyUpEvent(event.getKeyCode(), event);
         return true;
       }
    }
    return super.dispatchKeyEvent(event);
  }

參考來源：https://stackoverflow.com/questions/43361599/react-native-catch-volume-buttons-press-not-for-volume-adjusting

iOS需要在RNKeyEvent.m中修改getKeys

- (NSString *)getKeys {
    return  [NSString stringWithFormat:@"!,1,2,3,4,5,6,7,8,9,0,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,~,-,\r,%@,%@,%@,%@, ",UIKeyInputLeftArrow, UIKeyInputRightArrow, UIKeyInputUpArrow, UIKeyInputDownArrow]; // insert " "(space) after "%@,"
}

另外在KeyEvent.onKeyUpListener中的keyEventiOS只有pressedKey值返回，所以需要用String.fromCharCode(13)核對輸入鍵，如:

useEffect(() => {
    KeyEvent.onKeyUpListener(keyEvent => {
        if (keyEvent.pressedKey === String.fromCharCode(13)){
            ...
        }
        ...
    }
    ...
}, [])

Android: Changes are not tracked, unable determine incremental changes.

Solution1:
Clean Project by cd android; ./gradlew clean; cd ..;

Solution2:
Check if there is any invisible or redundant asset in android/app/src/main/assets

Error: resource android:attr/lStar not found

錯誤信息：

Execution failed for task ':<npm_package_name>:verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
   > Android resource linking failed
     ERROR:<path_to_gradle>/.gradle/caches/transforms-3/8ac0773c96f54a55e0dcd22123615930/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

將引起問題的node_module中的compileSdkVersion,targetSdkVersion設成31
如node_modules/<npm_package_name>/android/build.gradle：

android {
    compileSdkVersion 31
    ...
    defaultConfig {
        ...
        targetSdkVersion 31
    }
}

Error: The `pod' command exists in these Ruby versions: 2.7.5
Note: 無論更新ruby到甚麼版本都會顯示此錯誤
解決方法參考：https://qiita.com/TakaKun/items/80043d1fb437c625c81b

brew upgrade rbenv
brew upgrade ruby-build
rbenv install 2.4.1
rbenv global 2.4.1
gem install cocoapods
rbenv rehash
pod setup
pod install

更新xcode 15後 firebase出現An attribute list cannot appear here
解決方法參考：https://github.com/firebase/firebase-ios-sdk/issues/11840#issuecomment-1738875602

in Xcode, go to FIRFirestoreSettings.mm file, look for(go to pods, and you will see FIRbaseFirestore folder, open it);-

ABSL_CONST_INIT extern "C" const int64_t kFIRFirestoreCacheSizeUnlimited =
    Settings::CacheSizeUnlimited;

轉為

extern "C" const int64_t kFIRFirestoreCacheSizeUnlimited =
Settings::CacheSizeUnlimited;

Command PhaseScriptExecution failed with a nonzero exit code
解決方法參考：https://github.com/facebook/react-native/issues/36762#issuecomment-1535910492
修改node_modules/react-native/scripts/find-node.sh

set +e

最近在嘗試為多個Docker container連接域名，不用常常輸入IP:Port來連接網站。在比較Nginx和Caddy2的設置難度後，選擇了Caddy2。一來是因為Caddy設置沒有Nginx這麼繁瑣（可能是因為我對Nginx了解很少，請見諒），二來是Caddy會自動設置https，不用安裝cerbot來獲取https證書。

安裝Caddy2

按照官方說明，直接copy&paste指令即可。由於我是用Ubuntu，這邊的指令會是Ubuntu、Debian、Raspbian專用。

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo apt-key add -
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

使用Caddy2

到目錄下建立一個名叫Caddyfile的文件，按需要加入reverse_proxy代碼。

sudo nano Caddyfile

example1.com {
  reverse_proxy 127.0.0.1:3000
}

example2.com {
  reverse_proxy 127.0.0.1:3001
}

設置好DNS的A記錄(指向伺服器IP)，再輸入caddy start即可，同時Caddy會自動取得SSL證書，可以直接使用https連接網站。

最近買了一個128MB ram的nat vps來試試，之前用的VPS都有獨立IP，就記錄一下在這台VPS上架設Nginx + PHP。

域名

更新DNS

1. 在solusvm控制台找到IPv6地址

2.在Cloudflare設置AAAA記錄

VPS

更新apt

apt-get update
apt-get upgrade

安裝nginx

apt-get install nginx

安裝php和php-fpm

apt install php7.3 php7.3-fpm

設置Nginx

新增nginx server block
nano /etc/nginx/sites-available/example.com

ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

server {
        #https settings
		listen 443;
		listen [::]:443;
		ssl on;
		ssl_certificate /etc/nginx/ssl/ssl.pem;
		ssl_certificate_key /etc/nginx/ssl/ssl.key;
		ssl_session_timeout  5m;
		#ssl_protocols  SSLv2 SSLv3 TLSv1;
		ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        
        #basic web settings
        root /var/www/example.com/html;
        index index.php index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;
		
		location ~ \.php$ {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
			
			fastcgi_split_path_info ^(.+\.php)(/.+)$;
			include fastcgi_params;
			fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
        }
        
		#grav settings
		location / {
			try_files $uri $uri/ /index.php?_url=$uri&$query_string;
		}

		location ~* ^/(\.git|cache|bin|logs|backup|tests)/.*$ {
			return 403;
		}

		location ~* ^/(\.git|cache|bin|logs|backup|tests)/.*$ {
			return 403;
		}

		location ~* ^/(system|vendor)/.*\.(txt|xml|md|html|yaml|yml|php|pl|py|cgi|twig|sh|bat)$ {
			return 403;
		}

		location ~* ^/user/.*\.(txt|md|yaml|yml|php|pl|py|cgi|twig|sh|bat)$ {
			return 403;
		}

		location ~ ^/(LICENSE\.txt|composer\.lock|composer\.json|nginx\.conf|web\.config|htaccess\.txt|\.htaccess) {
			return 403;
		}
}

server {
    #http redirects
    listen 80;
	listen [::]:80;
    server_name server_name example.com www.example.com;
    return 301 https://example.com$request_uri;
}

HTTPS

到Cloudflare - SSL/TLS - Origin Server - Create Certificate 取得 certificate和 private key，儲存為ssl.key和ssl.pem，再上傳到/etc/nginx/ssl/中（需與nginx server block 設置匹配）。

設置nginx配置
nano /etc/nginx/nginx.conf

worker_connection = 128

變更html directory擁有者
chown -R www-data: /var/www/example.com/html

Grav CMS

安裝Grav所需php extension
sudo apt install php-fpm php-gd php-curl php-zip php-mbstring php-xml

最近架在VPS的wordpress經常Offline，可能跟過低的php memory_limit有關，所以記錄一下在centos8增加memory_limit的方法 ：

1. 修改wp-config.php，添加define( 'WP_MAX_MEMORY_LIMIT', '256M' );
2. 修改php.ini中的memory_limit=128M為memory_limit=256M(按需求)
3. 重啟php-fpm和nginx:

   sudo service nginx reload
   sudo systemctl reload php-fpm
   

後記(8/4/2020)：

無效，網站仍會有時Offline

調整Nginx的worker_connections來解決網站掉網問題

經過上次增加PHP memory_limit後，網站仍然不時Offline，為了找出問題，安裝了Hetrixtools的Monitoring Agent來監察VPS的資源使用，發現每當掉網時，CPU使用率都飆升至100%，過一陣又回復正常。

因此google了許久，發現可能是Nginx的設定問題，Nginx中的nginx.conf一欄worker_connections設得太高，所以有機會在運行時佔用了全部的CPU。原本的worker_connections被設為50000，目前下調到1024，看看能否解決問題。

Reference: https://support.plesk.com/hc/en-us/articles/360002222493-High-CPU-usage-by-nginx-is-shown-in-Health-Monitor

後記(9/4/2020)：

無效，網站仍會有時Offline

修改php-fpm的config檔案

1. sudo nano php-fpm.conf
2. pm.max_children = 10
pm.start_servers = 5
pm.min_spare_servers = 5
pm.max_spare_servers = 8
3. sudo systemctl  restart php-fpm.service 重啟php-fpm

Reference: https://blog.gtwang.org/linux/nginx-php-fpm-configuration-optimization/

後記(15/4/2020)：

設置後數天，網站仍正常運作

最近在用Directadmin板面的Shared hosting架設網站， 由於只想把subdomain掛到該伺服器，不想搬遷整個域名，所以要用A record指向該網頁伺服器。

但是因為服務商只提供Nameservers，而Nameservers的IP亦和網站在用的IP有別， 所以並不能直用接Ping指令來取得IP。

想在DirectAdmin中取得IP，只需要到Account Manager中的DNS Management查看即可。

在DNS列表中域名對應的一欄中的Value就是服務在用的真實IP。

最近在設計網頁，在html/css/js方面仍是起步階段，遇到一個問題，就是如何將header以下的地方填滿。

首先要一個不固定高度的header ，下面放兩欄，兩欄都要填滿高度，而他們的內容都可能會溢出(overflow)，所以要在該欄overflow時使用滾動(scroll)

最後經過一輪google、stack overflow後，發現要先設html,body,兩列的高度到100%，(header高度不用調)，將兩欄套入一個div中，再將header和內容套入一個div中，用flex-grow將內容的高度填滿，同時overflow設為hidden，兩欄overflow設為auto，滿時就會自動溢出。

示意圖：

示範code：