javascript
使用React Native和Spring Boot构建一个移动应用
“我喜歡編寫身份驗(yàn)證和授權(quán)代碼。” ?從來(lái)沒(méi)有Java開(kāi)發(fā)人員。 厭倦了一次又一次地建立相同的登錄屏幕？ 嘗試使用Okta API進(jìn)行托管身份驗(yàn)證，授權(quán)和多因素身份驗(yàn)證。
React Native是使用React構(gòu)建移動(dòng)應(yīng)用程序的框架。 React允許您使用聲明式編程風(fēng)格來(lái)描述UI外觀。 它使用嵌入式HTML（稱為JSX）來(lái)呈現(xiàn)按鈕，列表，可滾動(dòng)視圖和許多其他組件。
我是一位經(jīng)驗(yàn)豐富的Java和JavaScript開(kāi)發(fā)人員，喜歡Spring和TypeScript。 有人可能稱我為Java趕時(shí)髦的人，因?yàn)槲蚁矚gJavaScript。 在本文中，我將向您展示如何構(gòu)建與PostgreSQL數(shù)據(jù)庫(kù)對(duì)話的Spring Boot API。 您將使用Elasticsearch使數(shù)據(jù)可搜索。 您還將學(xué)習(xí)如何使用Kubernetes將其部署到Cloud Foundry和Google Cloud Platform。
真正很酷的部分是您將看到如何使用React Native構(gòu)建移動(dòng)應(yīng)用程序。 React Native允許您使用已知和喜愛(ài)的Web技術(shù)構(gòu)建移動(dòng)應(yīng)用程序：React和JavaScript！ 我將向您展示如何在設(shè)備仿真器上對(duì)其進(jìn)行測(cè)試并將其部署到手機(jī)中。 Giddyup！
創(chuàng)建一個(gè)Spring Boot應(yīng)用
在我最近的開(kāi)發(fā)人員生涯中，我構(gòu)建了一個(gè)應(yīng)用程序來(lái)幫助我跟蹤和監(jiān)視我的健康狀況。 我在編寫JHipster Mini-Book時(shí)想到了這個(gè)主意。 我的靈感來(lái)自Spring Boot的執(zhí)行器，它可以幫助您監(jiān)視Spring Boot應(yīng)用程序的運(yùn)行狀況。 該應(yīng)用程序名為21-Points Health，您可以在GitHub上找到其源代碼 。
21點(diǎn)健康系統(tǒng)使用21點(diǎn)系統(tǒng)來(lái)查看您每周的健康狀況。 它的規(guī)則很簡(jiǎn)單：由于以下原因，您每天最多可以賺取三分：
- 如果您飲食健康，那么您會(huì)有所收獲。 否則為零。
- 如果您運(yùn)動(dòng)，就會(huì)有所收獲。
- 如果你不喝酒，你會(huì)得到一點(diǎn)。
我將在本教程中作弊。 與其逐行編寫每個(gè)組件，不如使用JHipster和Ignite JHipster 生成 API和應(yīng)用程序。
什么是JHipster？
我很高興你問(wèn)！ 這是一個(gè)Apache許可的開(kāi)源項(xiàng)目，可讓您生成Spring Boot API以及Angular或React UI。 它包括對(duì)生成CRUD屏幕和添加所有必要管道的支持。 它甚至生成微服務(wù)架構(gòu)！
Ignite JHipster是JHipster的補(bǔ)充功能。 這是Ignite CLI項(xiàng)目的藍(lán)圖模板。 Ignite CLI是開(kāi)源的，并由MIT許可，由Infinite Red的好伙伴制作。 通過(guò)Ignite CLI，您可以在幾秒鐘內(nèi)生成預(yù)集成了許多組件的React Native應(yīng)用程序。 第一次看到Gant Laborde的演示時(shí)，我被震撼了 。
為了使事情Swift發(fā)展，我運(yùn)行了jhipster export-jdl來(lái)從21點(diǎn)健康導(dǎo)出一個(gè)實(shí)體定義。 導(dǎo)出實(shí)體定義后，我使用JDL-Studio為我的項(xiàng)目創(chuàng)建了一個(gè)應(yīng)用程序定義。 然后，我單擊下載圖標(biāo)以將文件保存到硬盤。
您在下面看到的代碼稱為JDL或JHipster域語(yǔ)言。 它最初是為JHipster設(shè)計(jì)的，以允許多個(gè)實(shí)體并指定其所有屬性，關(guān)系和分頁(yè)功能。 最近對(duì)其進(jìn)行了增強(qiáng)，可以從一個(gè)文件生成整個(gè)應(yīng)用程序！ 💥
application {config {applicationType monolith,baseName HealthPointspackageName com.okta.developer,authenticationType oauth2,prodDatabaseType postgresql,buildTool gradle,searchEngine elasticsearch,testFrameworks [protractor],clientFramework react,useSass true,enableTranslation true,nativeLanguage en,languages [en, es]}entities Points, BloodPressure, Weight, Preferences }// JDL definition for application 'TwentyOnePoints' generated with command 'jhipster export-jdl'entity BloodPressure {timestamp ZonedDateTime required,systolic Integer required,diastolic Integer required } entity Weight {timestamp ZonedDateTime required,weight Double required } entity Points {date LocalDate required,exercise Integer,meals Integer,alcohol Integer,notes String maxlength(140) } entity Preferences {weeklyGoal Integer required min(10) max(21),weightUnits Units required }enum Units {KG,LB }relationship OneToOne {Preferences{user(login)} to User } relationship ManyToOne {BloodPressure{user(login)} to User,Weight{user(login)} to User,Points{user(login)} to User }paginate BloodPressure, Weight with infinite-scroll paginate Points with pagination創(chuàng)建一個(gè)新目錄，其中包含jhipster-api目錄。
mkdir -p react-native-spring-boot/jhipster-api將上面的JDL復(fù)制到react-native-spring-boot目錄內(nèi)的app.jh文件中。 使用npm安裝JHipster。
npm i -g generator-jhipster@5.4.2在終端窗口中導(dǎo)航到j(luò)hipster-api目錄。 運(yùn)行下面的命令以生成具有大量可用功能的應(yīng)用程序。
jhipster import-jdl ../app.jh運(yùn)行您的Spring Boot應(yīng)用
此應(yīng)用程序在其應(yīng)用程序配置中指定了許多技術(shù)和功能，包括OIDC身份驗(yàn)證，PostgreSQL，Gradle，Elasticsearch，量角器測(cè)試，React和Sass。 不僅如此，它甚至還涵蓋了大多數(shù)代碼的測(cè)試范圍！
為了確保您的應(yīng)用程序正常運(yùn)行，請(qǐng)為Elasticsearch，Keycloak，PostgreSQL和Sonar啟動(dòng)一些Docker容器。 以下命令應(yīng)從jhipster-api目錄運(yùn)行。
docker-compose -f src/main/docker/elasticsearch.yml up -d docker-compose -f src/main/docker/keycloak.yml up -d docker-compose -f src/main/docker/postgresql.yml up -d docker-compose -f src/main/docker/sonar.yml up -d這些容器可能需要一點(diǎn)時(shí)間才能下載，因此您可能想要喝杯咖啡或一杯水。
在等待時(shí)，您還可以將項(xiàng)目提交到Git。 如果安裝了Git，JHipster將在jhipster-api目錄中運(yùn)行g(shù)it init 。 由于您將Spring Boot應(yīng)用程序和React Native應(yīng)用程序放在同一存儲(chǔ)庫(kù)中，因此請(qǐng)從jhipster-api刪除.git并在父目錄中初始化Git。
rm -rf jhipster-api/.git git init git add . git commit -m "Generate Spring Boot API"使用聲納確保測(cè)試覆蓋率
JHipster生成具有高代碼質(zhì)量的應(yīng)用程序。 使用SonarCloud分析代碼質(zhì)量，SonarCloud由JHipster自動(dòng)配置。 “代碼質(zhì)量”度量標(biāo)準(zhǔn)由測(cè)試覆蓋的代碼百分比確定。
一旦所有Docker容器啟動(dòng)完成，請(qǐng)運(yùn)行以下命令以證明代碼質(zhì)量為👍（來(lái)自jhipster-api目錄）。
./gradlew -Pprod clean test sonarqube| 如果您不將項(xiàng)目提交給Git，那么sonarqube任務(wù)可能會(huì)失敗 。 |
此過(guò)程完成后，您可以在Sonar儀表板上的http://127.0.0.1:9001上獲得對(duì)項(xiàng)目的分析。 進(jìn)行檢查-您的應(yīng)用程序獲得了AAA評(píng)級(jí)！ 還不錯(cuò)吧？
為您的Spring Boot API創(chuàng)建一個(gè)React Native應(yīng)用
您可以使用Jon Ruddell創(chuàng)建的Ignite JHipster為Spring Boot API構(gòu)建React Native應(yīng)用。 喬恩（Jon）是最多產(chǎn)的JHipster貢獻(xiàn)者之一 。 ??
安裝Ignite CLI：
npm i -g ignite-cli@2.1.2 ignite-jhipster@1.12.1確保您位于react-native-spring-boot目錄中，然后生成一個(gè)React Native應(yīng)用程序。
ignite new HealthPoints -b ignite-jhipster當(dāng)提示您輸入jhipster-api項(xiàng)目的路徑時(shí)，輸入jhipster-api 。
項(xiàng)目完成生成后，將HealthPoints重命名為react-native-app ，然后將其提交給Git。
mv HealthPoints react-native-app rm -rf react-native-app/.git git add . git commit -m "Add React Native app"您可能會(huì)注意到，兩個(gè)新文件已添加到您的API項(xiàng)目中。
create mode 100644 jhipster-api/src/main/java/com/okta/developer/config/ResourceServerConfiguration.java create mode 100644 jhipster-api/src/main/java/com/okta/developer/web/rest/AuthInfoResource.java這些類為您的項(xiàng)目配置資源服務(wù)器（以便您可以傳遞帶有訪問(wèn)令牌的Authorization標(biāo)頭），并通過(guò)REST端點(diǎn)公開(kāi)OIDC頒發(fā)者和客戶端ID。
修改React Native App以進(jìn)行OAuth 2.0 / OIDC登錄
您將需要對(duì)React Native應(yīng)用程序進(jìn)行一些更改 ，以便OIDC登錄有效。 我在下面總結(jié)了它們。
為iOS更新文件
如果您想在iOS上運(yùn)行您的應(yīng)用，則需要修改react-native-app/ios/HealthPoints/AppDelegate.m以在頂部添加openURL()方法和導(dǎo)入。
#import <React/RCTLinkingManager.h>然后在文件底部的@end之前添加方法。
- (BOOL)application:(UIApplication *)applicationopenURL:(NSURL *)urloptions:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {return [RCTLinkingManager application:application openURL:url options:options]; }您還需要配置iOS URL方案。 運(yùn)行open ios/HealthPoints.xcodeproj以在Xcode中打開(kāi)項(xiàng)目。 導(dǎo)航到“ 項(xiàng)目” >“ 信息” >“ URL類型”，然后指定healthpoints如下面的屏幕截圖所示。
如果您不想使用Xcode，也可以修改ios/HealthPoints/Info.plist 。
<key>CFBundleSignature</key><string>????</string> + <key>CFBundleURLTypes</key> + <array> + <dict> + <key>CFBundleTypeRole</key> + <string>Editor</string> + <key>CFBundleURLName</key> + <string>healthpoints</string> + <key>CFBundleURLSchemes</key> + <array> + <string>healthpoints</string> + </array> + </dict> + </array><key>CFBundleVersion</key>Android更新檔案
為了讓Android方面了解您的URL方案，請(qǐng)將其添加到android/app/src/main/AndroidManifest.xml 。 以下XML應(yīng)該位于現(xiàn)有的<intent-filter> 。
<intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /><data android:scheme="healthpoints" /> </intent-filter>您還需要將android:launchMode屬性添加到主要的<application>元素。 Android需要此功能以在現(xiàn)有MainActivity接收深度鏈接響應(yīng)，而不是新響應(yīng)。
<applicationandroid:name=".MainApplication"android:launchMode="singleTask"更新Keycloak的重定向URI
您還需要更新Keycloak才能知道您應(yīng)用的URL方案，因?yàn)樗米髦囟ㄏ騏RI。 在瀏覽器中打開(kāi)http://localhost:9080/auth/admin ，然后使用admin / admin登錄。 導(dǎo)航到客戶端 > web_app并添加healthpoints://authorize作為有效的重定向URI。
在iOS上運(yùn)行您的React Native App
要運(yùn)行React Native應(yīng)用程序，您需要首先啟動(dòng)Spring Boot應(yīng)用程序。 導(dǎo)航到j(luò)hipster-api目錄并運(yùn)行./gradlew 。 在另一個(gè)終端窗口中，導(dǎo)航到react-native-app并運(yùn)行react-native run-ios 。
| 如果出現(xiàn)錯(cuò)誤Print: Entry, ":CFBundleIdentifier", Does Not Exist ，請(qǐng)運(yùn)行rm -rf ~/.rncache試。 |
單擊左上角的漢堡菜單，然后單擊登錄，驗(yàn)證您可以登錄 。 使用“ admin”作為用戶名和密碼。
| 要在iOS Simulator中啟用代碼的實(shí)時(shí)重載，請(qǐng)先單擊模擬器，然后按? + R 。 |
在Android上運(yùn)行您的React Native App
要在Android模擬器上運(yùn)行您的應(yīng)用，請(qǐng)運(yùn)行react-native run-android 。 如果您沒(méi)有插入電話或沒(méi)有運(yùn)行Android虛擬設(shè)備（AVD），則會(huì)看到錯(cuò)誤消息：
Could not install the app on the device, read the error above for details.要解決此問(wèn)題，請(qǐng)打開(kāi)Android Studio，選擇打開(kāi)現(xiàn)有項(xiàng)目 ，然后在項(xiàng)目中選擇android目錄。 如果系統(tǒng)提示您“安裝構(gòu)建工具并同步項(xiàng)目”，請(qǐng)執(zhí)行此操作。
要?jiǎng)?chuàng)建新的AVD，請(qǐng)導(dǎo)航至工具 > Android > AVD Manager 。 創(chuàng)建一個(gè)新的虛擬設(shè)備，然后單擊播放。 從下面的設(shè)置中可以看到，我選擇了Pixel 2。
為了使Keycloak和您的API在模擬器中與Android一起使用，您必須將所有l(wèi)ocalhost鏈接更改為計(jì)算機(jī)的IP地址（例如192.168.0.2 ）。
這意味著您需要將JHipster應(yīng)用src/main/resources/config/application.yml中的src/main/resources/config/application.yml更新為以下內(nèi)容。
security:oauth2:client:access-token-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/tokenuser-authorization-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/authclient-id: web_appclient-secret: web_appscope: openid profile emailresource:user-info-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/userinfo您還需要在React Native應(yīng)用程序的App/Config/AppConfig.js更新apiUrl 。
export default {apiUrl: 'http://{yourIPAddress}:8080/',appUrlScheme: 'healthpoints' }再次運(yùn)行react-native run-android 。 您應(yīng)該能夠像在iOS上一樣登錄。
| 要在Android上實(shí)時(shí)重新加載代碼，請(qǐng)先在模擬器上單擊，然后按Ctrl + M （在MacOS上為? + M ）或搖晃具有正在運(yùn)行的應(yīng)用程序的Android設(shè)備。 然后從彈出窗口中選擇“ 啟用實(shí)時(shí)重新加載”選項(xiàng)。 |
在本教程的其余部分中，我將展示iOS上的所有示例，但您可以根據(jù)需要使用Android。
在React Native App中生成CRUD頁(yè)面
要在Spring Boot API中生成用于管理實(shí)體的頁(yè)面，請(qǐng)?jiān)趓eact-native-app目錄中運(yùn)行以下命令。
ignite generate import-jdl ../app.jh運(yùn)行react-native run-ios ，登錄，然后單擊“ 實(shí)體”菜單項(xiàng)。 您應(yīng)該會(huì)看到類似下面的屏幕。
單擊點(diǎn) ，您應(yīng)該可以添加點(diǎn)。
調(diào)整React Native Points編輯屏幕以使用Toggles
我的21點(diǎn)健康應(yīng)用程序的目標(biāo)是計(jì)算一周內(nèi)您獲得的健康點(diǎn)總數(shù)，最大值為21。因此，我認(rèn)為更改運(yùn)動(dòng)，進(jìn)餐，和酒精可以切換，而不是原始整數(shù)。 如果用戶將其打開(kāi)，則應(yīng)用程序應(yīng)將值存儲(chǔ)為“ 1”。 如果他們關(guān)閉它，它應(yīng)該記錄為“ 0”。
要對(duì)React Native應(yīng)用程序進(jìn)行此更改， App/Containers/PointEntityEditScreen.js在您喜歡的編輯器中打開(kāi)App/Containers/PointEntityEditScreen.js 。 更改formModel以將t.Boolean用于運(yùn)動(dòng)，進(jìn)餐和飲酒。
formModel: t.struct({id: t.maybe(t.Number),date: t.Date,exercise: t.maybe(t.Boolean),meals: t.maybe(t.Boolean),alcohol: t.maybe(t.Boolean),notes: t.maybe(t.String),userId: this.getUsers() }),然后，根據(jù)用戶的選擇，更改entityToFormValue()和formValueToEntity()方法以保存1或0。
entityToFormValue = (value) => {if (!value) {return {}}return {id: value.id || null,date: value.date || null,exercise: value.exercise === 1 ? true : false,meals: value.meals === 1 ? true : false,alcohol: value.alcohol === 1 ? true : false,notes: value.notes || null,userId: (value.user && value.user.id) ? value.user.id : null} } formValueToEntity = (value) => {return {id: value.id || null,date: value.date || null,exercise: (value.exercise) ? 1 : 0,meals: (value.meals) ? 1 : 0,alcohol: (value.alcohol) ? 1 : 0,notes: value.notes || null,user: value.userId ? { id: value.userId } : null} }在使用它時(shí)，您可以將默認(rèn)的Points實(shí)體更改為具有默認(rèn)日期的今天日期和true日期。 您可以通過(guò)修改componentWillMount()并更改formValue 。
componentWillMount () {if (this.props.entityId) {this.props.getPoint(this.props.entityId)} else {this.setState({formValue: {date: new Date(), exercise: true, meals: true, alcohol: true}})}this.props.getAllUsers() }使用? + M在Simulator中刷新應(yīng)用。 創(chuàng)建新點(diǎn)時(shí)，應(yīng)該會(huì)看到新的默認(rèn)值。
調(diào)整React App的使用要點(diǎn)復(fù)選框
由于您的JHipster應(yīng)用程序也具有React UI，因此有必要將點(diǎn)輸入/編輯屏幕更改為使用類似的機(jī)制：復(fù)選框。 打開(kāi)jhipster-api/src/main/webapp/…?/points-update.tsx并用以下三個(gè)字段替換TSX（T表示TypeScript）。 您可能會(huì)注意到trueValue和falseValue屬性處理將檢查轉(zhuǎn)換為true，反之亦然。
jhipster-api / src / main / webapp / app / entities / points / points-point.update.tsx
<AvGroup check><AvInput id="points-exercise" type="checkbox" className="form-control"name="exercise" trueValue={1} falseValue={0} /> // (1)<Label check id="exerciseLabel" for="exercise"><Translate contentKey="healthPointsApp.points.exercise">Exercise</Translate></Label> </AvGroup> <AvGroup check><AvInput id="points-meals" type="checkbox" className="form-control"name="meals" trueValue={1} falseValue={0} /><Label check id="mealsLabel" for="meals"><Translate contentKey="healthPointsApp.points.meals">Meals</Translate></Label> </AvGroup> <AvGroup check><AvInput id="points-alcohol" type="checkbox" className="form-control"name="alcohol" trueValue={1} falseValue={0} /><Label check id="alcoholLabel" for="alcohol"><Translate contentKey="healthPointsApp.points.alcohol">Alcohol</Translate></Label> </AvGroup>在jhipster-api目錄中，運(yùn)行npm start （或yarn start ）并驗(yàn)證您的更改是否存在。 下面的屏幕快照顯示了編輯React Native應(yīng)用輸入的記錄時(shí)的外觀。
使用Okta的API進(jìn)行身份識(shí)別
借助Spring Boot和Spring Security，在JHipster應(yīng)用程序中從Keycload切換到Okta以獲得身份很容易。 首先，您需要一個(gè)Okta開(kāi)發(fā)人員帳戶。 如果您還沒(méi)有，請(qǐng)?jiān)L問(wèn)developer.okta.com/signup進(jìn)行注冊(cè)。 Okta是像Keycloak這樣的OIDC提供程序，但它始終處于打開(kāi)狀態(tài)，因此您不必對(duì)其進(jìn)行管理。
登錄到您的Okta Developer帳戶，然后導(dǎo)航到Applications > Add Application 。 單擊“ Web” ，然后單擊“ 下一步” 。 給應(yīng)用程序起一個(gè)您會(huì)記住的名稱，并指定http://localhost:8080/login和healthpoints://authorize作為登錄重定向URI。 單擊完成 ，然后再次對(duì)其進(jìn)行編輯以選擇“隱式（混合）” +允許ID和訪問(wèn)令牌。 請(qǐng)注意客戶端ID和密碼，您需要在一分鐘內(nèi)將它們復(fù)制/粘貼到文件中。
創(chuàng)建一個(gè)ROLE_ADMIN和ROLE_USER組（“ 用戶” >“ 組” >“ 添加組” ）并將用戶添加到其中。 我建議將您注冊(cè)時(shí)使用的帳戶添加到ROLE_ADMIN并創(chuàng)建一個(gè)新用戶（“ 用戶” >“ 添加人” ）以添加到ROLE_USER 。
導(dǎo)航到API > 授權(quán)服務(wù)器 ，然后單擊一個(gè)名為default的名稱進(jìn)行編輯。 點(diǎn)擊索賠標(biāo)簽，然后添加索賠 。 將其命名為“角色”，并將其包含在ID令牌中。 將值類型設(shè)置為“ Groups”，并將過(guò)濾器設(shè)置為.*的正則表達(dá)式。 單擊創(chuàng)建以完成該過(guò)程。
在硬盤驅(qū)動(dòng)器上創(chuàng)建一個(gè)名為~/.okta.env的文件，并在其中指定應(yīng)用程序的設(shè)置。
#!/bin/bash export SECURITY_OAUTH2_CLIENT_ACCESS_TOKEN_URI="https://{yourOktaDomain}/oauth2/default/v1/token" export SECURITY_OAUTH2_CLIENT_USER_AUTHORIZATION_URI="https://{yourOktaDomain}/oauth2/default/v1/authorize" export SECURITY_OAUTH2_RESOURCE_USER_INFO_URI="https://{yourOktaDomain}/oauth2/default/v1/userinfo" export SECURITY_OAUTH2_CLIENT_CLIENT_ID="{yourClientId}" export SECURITY_OAUTH2_CLIENT_CLIENT_SECRET="{yourClientSecret}"| 確保您的*URI變量中沒(méi)有-admin 。 這是一個(gè)常見(jiàn)的錯(cuò)誤。 |
在運(yùn)行Spring Boot應(yīng)用程序的終端中，終止進(jìn)程，運(yùn)行source ~/.okta.env ， ./gradlew再次運(yùn)行./gradlew 。 您應(yīng)該能夠在瀏覽器和React Native應(yīng)用程序中登錄http://localhost:8080 （刷新或重新啟動(dòng)后）。
調(diào)試React Native Apps
如果您遇到問(wèn)題，或者只是想看看正在執(zhí)行什么API調(diào)用，可以使用Reactotron 。 Reactotron是一個(gè)桌面應(yīng)用程序，用于檢查您的React和React Native應(yīng)用程序。 它應(yīng)該可以與iOS一起使用，而無(wú)需進(jìn)行任何更改。 對(duì)于Android，在運(yùn)行AVD之后，您需要運(yùn)行adb reverse tcp:9090 tcp:9090 。
一旦運(yùn)行，您就可以看到正在進(jìn)行的API調(diào)用以及日志消息。
如果您想將自己的消息記錄到Reactotron，可以使用< console.tron.log('debug message') 。
打包您的React Native App進(jìn)行生產(chǎn)
最后，我想向您展示將應(yīng)用程序部署到生產(chǎn)環(huán)境。 由于將React Native應(yīng)用程序安裝到物理設(shè)備上有很多步驟，因此我將參考React Native的“在設(shè)備上運(yùn)行”文檔 。 它應(yīng)該像通過(guò)USB插入設(shè)備，配置代碼簽名以及構(gòu)建/運(yùn)行應(yīng)用程序那樣簡(jiǎn)單。 您還需要配置API所在的URL。
您知道Spring Boot有什么很棒的功能嗎？ 有很多支持它的云提供商！ 如果平臺(tái)支持Spring Boot，則應(yīng)該可以在其上運(yùn)行JHipster應(yīng)用程序！
請(qǐng)按照以下說(shuō)明使用Kubernetes將您的API部署到Pivotal的Cloud Foundry和Google Cloud Platform。 Cloud Foundry和Kubernetes都有多個(gè)提供程序，因此即使您未使用Pivotal或Google，這些說(shuō)明也應(yīng)適用。
將Spring Boot API部署到Cloud Foundry
JHipster具有Cloud Foundry子生成器 ，可以輕松部署到Cloud Foundry。 它只需要您運(yùn)行一個(gè)命令。 但是，您已經(jīng)在API中配置了Elasticsearch，并且子生成器不支持自動(dòng)為您配置Elasticsearch實(shí)例。 要解決此限制，請(qǐng)修改jhipster-api/src/main/resources/config/application-prod.yml并為Spring Data Jest查找以下配置：
data:jest:uri: http://localhost:9200將其替換為以下內(nèi)容，這將使Elasticsearch以嵌入式模式運(yùn)行。
data:elasticsearch:properties:path:home: /tmp/elasticsearch由于我在JHipster中發(fā)現(xiàn)了一個(gè)問(wèn)題 ，您還需要?jiǎng)h除幾個(gè)屬性。
@@ -30,15 +30,12 @@ spring:url: jdbc:postgresql://localhost:5432/HealthPointsusername: HealthPointspassword: - hikari: - auto-commit: falsejpa:database-platform: io.github.jhipster.domain.util.FixedPostgreSQL82Dialectdatabase: POSTGRESQLshow-sql: falseproperties:hibernate.id.new_generator_mappings: true - hibernate.connection.provider_disables_autocommit: truehibernate.cache.use_second_level_cache: truehibernate.cache.use_query_cache: falsehibernate.generate_statistics: false要使用Pivotal Web Services在Cloud Foundry上部署所有內(nèi)容，您需要?jiǎng)?chuàng)建一個(gè)帳戶，下載/安裝Cloud Foundry CLI并登錄（使用cf login -a api.run.pivotal.io ）。
| 登錄“ No space targeted, use 'cf target -s SPACE'后，您可能會(huì)收到警告。 如果這樣做， 請(qǐng)?jiān)跒g覽器中登錄https://run.pivotal.io ，創(chuàng)建一個(gè)空格，然后根據(jù)建議運(yùn)行命令。 |
然后在jhipster-api目錄中運(yùn)行jhipster cloudfoundry 。 您會(huì)在下面的提示中看到我選擇的值。
CloudFoundry configuration is starting ? Name to deploy as? HealthPoints ? Which profile would you like to use? prod ? What is the name of your database service? elephantsql ? What is the name of your database plan? turtle當(dāng)提示您覆蓋build.gradle ，鍵入a 。
| 第一次運(yùn)行jhipster cloudfoundry ，它沒(méi)有用。 第二次運(yùn)行成功。 |
覆蓋Spring Security的默認(rèn)OIDC設(shè)置后，您需要在Okta OIDC應(yīng)用程序中添加https://healthpoints.cfapps.io/login作為重定向URI。
然后...您將可以進(jìn)行身份??驗(yàn)證。 瞧！ 😃
將您的React Native應(yīng)用程序的apiUrl （位于App/Config/AppConfig.js ）修改為https://healthpoints.cfapps.io/并將其部署到您的手機(jī)中。 提示：使用我前面提到的“在設(shè)備上運(yùn)行”文檔。
export default {apiUrl: 'https://healthpoints.cfapps.io/',appUrlScheme: 'healthpoints' }我在Mac上使用Xcode（ open react-native-app/ios/HealthPoints.xcodeproj ）并將其部署到open react-native-app/ios/HealthPoints.xcodeproj 。
| 當(dāng)我在Xcode中遇到構(gòu)建問(wèn)題時(shí)，我運(yùn)行rm -rf ~/.rncache并修復(fù)了它們。 我還使用了一些rm -rf node_modules && yarn 。 |
以下是顯示其工作原理的屏幕截圖！
使用Kubernetes將Spring Boot API部署到Google Cloud Platform
JHipster還支持將您的應(yīng)用程序部署到生產(chǎn)中最熱門的東西：Kubernetes！
要進(jìn)行嘗試，請(qǐng)?jiān)趈hipster-api目錄旁邊創(chuàng)建一個(gè)k8s目錄。 然后在其中運(yùn)行jhipster kubernetes 。 出現(xiàn)提示時(shí)，請(qǐng)指定以下答案：
- 應(yīng)用類型： 整體應(yīng)用
- 根目錄： ../
- 哪些應(yīng)用程序： jhipster-api
- 設(shè)置監(jiān)控： 否
- Kubernetes命名空間： 默認(rèn)
- Docker存儲(chǔ)庫(kù)名稱：<您的Docker Hub用戶名>
- docker push命令： docker push
- Kubernetes服務(wù)類型： LoadBalancer
將打印出許多您需要運(yùn)行的命令。 在jhipster-api目錄中運(yùn)行以下jhipster-api 。
docker login export USERNAME=<your username> ./gradlew bootWar -Pprod jibDockerBuild docker image tag healthpoints $USERNAME/healthpoints docker push $USERNAME/healthpointsGoogle Cloud Platform（又名GCP）是基于Google核心基礎(chǔ)架構(gòu)的PaaS（平臺(tái)即服務(wù)）。 它自然是云中Kubernetes的良好提供商。 完成以下步驟，將JHipster API部署到Google Cloud。
要查看可能的區(qū)域列表，請(qǐng)運(yùn)行g(shù)cloud compute zones list 。
您可以使用kubectl get pods和kubectl logs -f {podName}來(lái)查看日志。
$ kubectl get pods NAME READY STATUS RESTARTS AGE healthpoints-6b56d9d646-h9cn2 1/1 Running 0 3m healthpoints-elasticsearch-84cf759984-vwhv8 1/1 Running 0 18m healthpoints-postgresql-56ddd4bfc9-mptch 1/1 Running 0 18m運(yùn)行kubectl get pods來(lái)監(jiān)視pods的啟動(dòng)。
NAME READY STATUS RESTARTS AGE healthpoints-6b56d9d646-5lmjk 0/1 Running 0 14s healthpoints-6b56d9d646-h9cn2 1/1 Running 0 7m healthpoints-6b56d9d646-vsm4r 0/1 Running 0 14s healthpoints-elasticsearch-84cf759984-vwhv8 1/1 Running 0 23m healthpoints-postgresql-56ddd4bfc9-mptch 1/1 Running 0 23m結(jié)果？ 在GKE上的生產(chǎn)環(huán)境中運(yùn)行的Spring Boot API！ 哇！
在GCP上反應(yīng)Native + Spring Boot
要使您的React Native應(yīng)用程序與GCP實(shí)例一起使用，您只需要修改其AppConfig.js文件以指向其URI，然后打包并部署即可。
export default {apiUrl: 'http://<external-ip>:8080',appUrlScheme: 'healthpoints' }秘訣：更改不同環(huán)境的API URL
您可能認(rèn)為必須為不同的環(huán)境（本地開(kāi)發(fā)與Cloud Foundry與Google Cloud）更改API URL感到很痛苦。 我同意！
幸運(yùn)的是，Ignite JHipster已經(jīng)內(nèi)置了react-native-config 。 這個(gè)項(xiàng)目允許您將配置變量暴露給React Native中JavaScript代碼。 您可以將API密鑰，URL和其他敏感信息存儲(chǔ)在.env文件中。
API_URL=https://production-is-awesome.cfapps.io要在您的應(yīng)用程序中使用react-native-config，請(qǐng)使用以下步驟：
探索React Native，Spring Boot和JHipster
本教程向您展示了如何僅使用幾個(gè)命令即可構(gòu)建安全的Spring Boot API（由JPA，PostgreSQL和Elasticsearch驅(qū)動(dòng)）。 然后，您學(xué)習(xí)了如何使用Gradle運(yùn)行應(yīng)用程序，如何使用Docker運(yùn)行外部服務(wù)以及如何使用Sonar驗(yàn)證高質(zhì)量的代碼。 那僅僅是開(kāi)始！
我再次向您展示了如何構(gòu)建React Native應(yīng)用程序，僅需幾個(gè)命令。 哎呀，甚至部署到云中也只用了一些有趣的CLI命令。
本教程的源代碼位于GitHub @ oktadeveloper / okta-react-native-spring-boot-example上 。
您不覺(jué)得所有這些一流的技術(shù)都在嬉戲嗎？ 我確定！ 🤓
想保持臀部？ 查閱其他一些關(guān)于React Native，Spring Boot和JHipster的教程。
- 構(gòu)建一個(gè)React Native應(yīng)用程序并使用OAuth 2.0進(jìn)行身份驗(yàn)證 –使用React Native AppAuth，它是Ignite JHipster的計(jì)劃集成 。
- 使用OAuth 2.0和JHipster開(kāi)發(fā)微服務(wù)架構(gòu) -包括有關(guān)如何部署到Heroku的說(shuō)明。
- 使用React和Spring Boot來(lái)構(gòu)建一個(gè)簡(jiǎn)單的CRUD應(yīng)用程序 –當(dāng)您計(jì)劃JUG Tours時(shí)，CRUD應(yīng)用程序會(huì)很酷！
- 使用React，Spring Boot和JHipster構(gòu)建照相館PWA –使用JHipster和React構(gòu)建Flickr克隆。 使其成為PWA。
- 使用Ionic for JHipster來(lái)創(chuàng)建具有OIDC身份驗(yàn)證的移動(dòng)應(yīng)用程序 –不在React Native中嗎？ 離子呢？
關(guān)注我們 ， 觀看我們的視頻 ，如果您想了解更多關(guān)于最好的開(kāi)源技術(shù)的信息，請(qǐng)與我們聯(lián)系 。 我們是開(kāi)源的忠實(shí)擁護(hù)者。 💙
使用React Native和Spring Boot構(gòu)建移動(dòng)應(yīng)用程序''最初于2018年10月10日發(fā)布在Okta開(kāi)發(fā)者博客上。
“我喜歡編寫身份驗(yàn)證和授權(quán)代碼。” ?從來(lái)沒(méi)有Java開(kāi)發(fā)人員。 厭倦了一次又一次地建立相同的登錄屏幕？ 嘗試使用Okta API進(jìn)行托管身份驗(yàn)證，授權(quán)和多因素身份驗(yàn)證。
翻譯自: https://www.javacodegeeks.com/2018/11/build-mobile-app-react-native-spring-boot.html
總結(jié)
以上是生活随笔為你收集整理的使用React Native和Spring Boot构建一个移动应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 捷尼赛思汽车宣布全球销量超过 100 万
- 下一篇： standalone应用_具有Sprin