🚀 Hướng Dẫn Cấu Hình React Native CodePush với Máy Chủ Tùy Chỉnh

Bạn có một ứng dụng React Native và muốn cập nhật nó mà không cần thông qua App Store hay Google Play? CodePush chính là giải pháp! Nhưng nếu bạn không muốn sử dụng máy chủ của Microsoft mà muốn có một máy chủ riêng? Đừng lo! Bài viết này sẽ giúp bạn cấu hình React Native CodePush với máy chủ riêng chỉ trong vài bước đơn giản!

Cài đặt và cấu hình máy chủ CodePush riêng: Ở đây, tôi sẽ hướng dẫn cách cài đặt bằng Docker để mọi thứ trở nên dễ dàng hơn. 1️⃣ Clone repo về máy Mở terminal và chạy:

git clone https://github.com/shm-open/code-push-server.git cd code-push-server

2️⃣ Chỉnh sửa file cấu hình Mở file docker-compose.yml để thay đổi cấu hình:

vim docker-compose.yml

Sau đó, thay thế dòng YOUR_MACHINE_IP trong DOWNLOAD_URL bằng địa chỉ IP hoặc tên miền của bạn.

3️⃣ Triển khai Docker

docker-compose up -d

4️⃣ Kiểm tra xem máy chủ đã hoạt động chưa Chạy lệnh sau để gửi request đến máy chủ CodePush:

curl -I http://YOUR_CODE_PUSH_SERVER_IP:3000/

Nếu mọi thứ chạy ngon lành, bạn sẽ thấy phản hồi như sau:

HTTP/1.1 200 OK
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Content-Type: text/html; charset=utf-8
Content-Length: 592
Date: Sat, 23 Nov 2023 15:45:46 GMT
Connection: keep-alive

Vậy là xong! Bây giờ bạn đã có một máy chủ CodePush riêng, giúp cập nhật ứng dụng nhanh chóng mà không còn phụ thuộc vào Microsoft. 🚀

Cài đặt CodePush vào dự án React Native: Sử dụng npm để cài đặt gói react-native-code-push:

npm install --save react-native-code-push
Cấu hình URL máy chủ tùy chỉnh: Đối với Android: Mở tệp androidapp/src/main/res/values/strings.xml. Thêm dòng sau vào bên trong thẻ <resources>:

<string moduleConfig="true" name="CodePushServerUrl">https://your-custom-server.com</string>

Thay thế https://your-custom-server.com bằng URL của máy chủ tùy chỉnh của bạn.

Đối với iOS: Mở tệp Info.plist trong thư mục iOS của dự án. Thêm mục sau:

<key>CodePushServerURL</key>
<string>https://your-custom-server.com</string>

Thay thế https://your-custom-server.com bằng URL của máy chủ tùy chỉnh của bạn.

Sử dụng CodePush trong ứng dụng React Native: Trong mã nguồn React Native, bạn có thể sử dụng CodePush như sau:

import codePush from 'react-native-code-push'; let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME }; class App extends Component { // Ứng dụng của bạn } App = codePush(codePushOptions)(App);
Sử dụng CodePush CLI với máy chủ tùy chỉnh: Cài đặt CodePush CLI:

npm install -g code-push-cli

Đăng nhập vào máy chủ tùy chỉnh:

code-push login https://your-custom-server.com

Thay thế https://your-custom-server.com bằng URL của máy chủ tùy chỉnh của bạn. Lúc này ta sẽ được điều hướng sang một trang web, tiến hành đăng nhập bằng tài khoản mặt định là admin/123456 để đăng nhập. Sau khi đăng nhập ta sẽ có một token và ta sẽ tiến hành copy token dán vào cmd đang chạy lệnh code-login ở trên. Bạn hãy bấm vào nút change

Tạo ứng dụng trên máy chủ CodePush tùy chỉnh:

code-push app add [APP_NAME] [PLATFORM] [DESCRIPTION]

Ví dụ cho iOS:

code-push app add MyApp-ios ios "Mô tả ứng dụng iOS"

Ví dụ cho Android:

code-push app add MyApp-android android "Mô tả ứng dụng Android"

Sau khi tạo ứng dụng, bạn sẽ nhận được Deployment Key. Sử dụng Deployment Key này trong ứng dụng React Native của bạn.

Đóng gói và phát hành bản cập nhật: Để đóng gói ứng dụng ta sử dụng lệnh sau: Ví dụ cho Android:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./code-push/index.android.bundle --assets-dest ./code-push

Ví dụ cho iOS:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./code-push/main.jsbundle --assets-dest ./code-push

Để phát hành bản cập nhật, sử dụng lệnh sau:

code-push release-react [APP_NAME] [PLATFORM] -d [DEPLOYMENT_NAME]

Ví dụ cho iOS:

code-push release-react MyApp-ios ios -d Production

Ví dụ cho Android:

code-push release-react MyApp-android android -d Production

Thay thế [APP_NAME], [PLATFORM], và [DEPLOYMENT_NAME] bằng thông tin tương ứng của bạn.

Lưu ý: Đảm bảo rằng bạn đã cấu hình đúng URL máy chủ tùy chỉnh và sử dụng Deployment Key chính xác trong ứng dụng của mình.

Mục lục