使用React Native和Spring Boot构建一个移动应用

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。

React Native是使用React构建移动应用程序的框架。 React允许您使用声明式编程风格来描述UI外观。 它使用嵌入式HTML（称为JSX）来呈现按钮，列表，可滚动视图和许多其他组件。

我是一位经验丰富的Java和JavaScript开发人员，喜欢Spring和TypeScript。 有人可能称我为Java赶时髦的人，因为我喜欢JavaScript。 在本文中，我将向您展示如何构建与PostgreSQL数据库对话的Spring Boot API。 您将使用Elasticsearch使数据可搜索。 您还将学习如何使用Kubernetes将其部署到Cloud Foundry和Google Cloud Platform。

真正很酷的部分是您将看到如何使用React Native构建移动应用程序。 React Native允许您使用已知和喜爱的Web技术构建移动应用程序：React和JavaScript！ 我将向您展示如何在设备仿真器上对其进行测试并将其部署到手机中。 Giddyup！

创建一个Spring Boot应用

在我最近的开发人员生涯中，我构建了一个应用程序来帮助我跟踪和监视我的健康状况。 我在编写JHipster Mini-Book时想到了这个主意。 我的灵感来自Spring Boot的执行器，它可以帮助您监视Spring Boot应用程序的运行状况。 该应用程序名为21-Points Health，您可以在GitHub上找到其源代码 。

21点健康系统使用21点系统来查看您每周的健康状况。 它的规则很简单：由于以下原因，您每天最多可以赚取三分：

• 如果您饮食健康，那么您会有所收获。 否则为零。
• 如果您运动，就会有所收获。
• 如果你不喝酒，你会得到一点。

我将在本教程中作弊。 与其逐行编写每个组件，不如使用JHipster和Ignite JHipster 生成 API和应用程序。

什么是JHipster？

我很高兴你问！ 这是一个Apache许可的开源项目，可让您生成Spring Boot API以及Angular或React UI。 它包括对生成CRUD屏幕和添加所有必要管道的支持。 它甚至生成微服务架构！

Ignite JHipster是JHipster的补充功能。 这是Ignite CLI项目的蓝图模板。 Ignite CLI是开源的，并由MIT许可，由Infinite Red的好伙伴制作。 通过Ignite CLI，您可以在几秒钟内生成预集成了许多组件的React Native应用程序。 第一次看到Gant Laborde的演示时，我被震撼了 。

为了使事情Swift发展，我运行了jhipster export-jdl来从21点健康导出一个实体定义。 导出实体定义后，我使用JDL-Studio为我的项目创建了一个应用程序定义。 然后，我单击下载图标以将文件保存到硬盘。

您在下面看到的代码称为JDL或JHipster域语言。 它最初是为JHipster设计的，以允许多个实体并指定其所有属性，关系和分页功能。 最近对其进行了增强，可以从一个文件生成整个应用程序！ 💥

application {
  config {
    applicationType monolith,
    baseName HealthPoints
    packageName 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

创建一个新目录，其中包含jhipster-api目录。

mkdir -p react-native-spring-boot/jhipster-api

将上面的JDL复制到react-native-spring-boot目录内的app.jh文件中。 使用npm安装JHipster。

npm i -g generator-jhipster@5.4.2

在终端窗口中导航到jhipster-api目录。 运行下面的命令以生成具有大量可用功能的应用程序。

jhipster import-jdl ../app.jh

运行您的Spring Boot应用

此应用程序在其应用程序配置中指定了许多技术和功能，包括OIDC身份验证，PostgreSQL，Gradle，Elasticsearch，量角器测试，React和Sass。 不仅如此，它甚至还涵盖了大多数代码的测试范围！

为了确保您的应用程序正常运行，请为Elasticsearch，Keycloak，PostgreSQL和Sonar启动一些Docker容器。 以下命令应从jhipster-api目录运行。

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

这些容器可能需要一点时间才能下载，因此您可能想要喝杯咖啡或一杯水。

在等待时，您还可以将项目提交到Git。 如果安装了Git，JHipster将在jhipster-api目录中运行git init 。 由于您将Spring Boot应用程序和React Native应用程序放在同一存储库中，因此请从jhipster-api删除.git并在父目录中初始化Git。

rm -rf jhipster-api/.git
git init
git add .
git commit -m "Generate Spring Boot API"

使用声纳确保测试覆盖率

JHipster生成具有高代码质量的应用程序。 使用SonarCloud分析代码质量，SonarCloud由JHipster自动配置。 “代码质量”度量标准由测试覆盖的代码百分比确定。

一旦所有Docker容器启动完成，请运行以下命令以证明代码质量为👍（来自jhipster-api目录）。

./gradlew -Pprod clean test sonarqube

如果您不将项目提交给Git，那么sonarqube任务可能会失败 。

此过程完成后，您可以在Sonar仪表板上的http://127.0.0.1:9001上获得对项目的分析。 进行检查-您的应用程序获得了AAA评级！ 还不错吧？

为您的Spring Boot API创建一个React Native应用

您可以使用Jon Ruddell创建的Ignite JHipster为Spring Boot API构建React Native应用。 乔恩（Jon）是最多产的JHipster贡献者之一 。 ❤️

安装Ignite CLI：

npm i -g ignite-cli@2.1.2 ignite-jhipster@1.12.1

确保您位于react-native-spring-boot目录中，然后生成一个React Native应用程序。

ignite new HealthPoints -b ignite-jhipster

当提示您输入jhipster-api项目的路径时，输入jhipster-api 。

项目完成生成后，将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"

您可能会注意到，两个新文件已添加到您的API项目中。

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

这些类为您的项目配置资源服务器（以便您可以传递带有访问令牌的Authorization标头），并通过REST端点公开OIDC颁发者和客户端ID。

修改React Native App以进行OAuth 2.0 / OIDC登录

您将需要对React Native应用程序进行一些更改 ，以便OIDC登录有效。 我在下面总结了它们。

为iOS更新文件

如果您想在iOS上运行您的应用，则需要修改react-native-app/ios/HealthPoints/AppDelegate.m以在顶部添加openURL()方法和导入。

#import <React/RCTLinkingManager.h>

然后在文件底部的@end之前添加方法。

- (BOOL)application:(UIApplication *)application
           openURL:(NSURL *)url
           options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
 return [RCTLinkingManager application:application openURL:url options:options];
}

您还需要配置iOS URL方案。 运行open ios/HealthPoints.xcodeproj以在Xcode中打开项目。 导航到“ 项目” >“ 信息” >“ 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方案，请将其添加到android/app/src/main/AndroidManifest.xml 。 以下XML应该位于现有的<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需要此功能以在现有MainActivity接收深度链接响应，而不是新响应。

<application
      android:name=".MainApplication"
      android:launchMode="singleTask"

更新Keycloak的重定向URI

您还需要更新Keycloak才能知道您应用的URL方案，因为它用作重定向URI。 在浏览器中打开http://localhost:9080/auth/admin ，然后使用admin / admin登录。 导航到客户端 > web_app并添加healthpoints://authorize作为有效的重定向URI。

在iOS上运行您的React Native App

要运行React Native应用程序，您需要首先启动Spring Boot应用程序。 导航到jhipster-api目录并运行./gradlew 。 在另一个终端窗口中，导航到react-native-app并运行react-native run-ios 。

如果出现错误Print: Entry, ":CFBundleIdentifier", Does Not Exist ，请运行rm -rf ~/.rncache试。

单击左上角的汉堡菜单，然后单击登录，验证您可以登录 。 使用“ admin”作为用户名和密码。

要在iOS Simulator中启用代码的实时重载，请先单击模拟器，然后按⌘ + R 。

在Android上运行您的React Native App

要在Android模拟器上运行您的应用，请运行react-native run-android 。 如果您没有插入电话或没有运行Android虚拟设备（AVD），则会看到错误消息：

Could not install the app on the device, read the error above for details.

要解决此问题，请打开Android Studio，选择打开现有项目 ，然后在项目中选择android目录。 如果系统提示您“安装构建工具并同步项目”，请执行此操作。

要创建新的AVD，请导航至工具 > Android > AVD Manager 。 创建一个新的虚拟设备，然后单击播放。 从下面的设置中可以看到，我选择了Pixel 2。

为了使Keycloak和您的API在模拟器中与Android一起使用，您必须将所有localhost链接更改为计算机的IP地址（例如192.168.0.2 ）。

这意味着您需要将JHipster应用src/main/resources/config/application.yml中的src/main/resources/config/application.yml更新为以下内容。

security:
    oauth2:
        client:
            access-token-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/token
            user-authorization-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/auth
            client-id: web_app
            client-secret: web_app
            scope: openid profile email
        resource:
            user-info-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/userinfo

您还需要在React Native应用程序的App/Config/AppConfig.js更新apiUrl 。

export default {
  apiUrl: 'http://{yourIPAddress}:8080/',
  appUrlScheme: 'healthpoints'
}

再次运行react-native run-android 。 您应该能够像在iOS上一样登录。

要在Android上实时重新加载代码，请先在模拟器上单击，然后按Ctrl + M （在MacOS上为⌘ + M ）或摇晃具有正在运行的应用程序的Android设备。 然后从弹出窗口中选择“ 启用实时重新加载”选项。

在本教程的其余部分中，我将展示iOS上的所有示例，但您可以根据需要使用Android。

在React Native App中生成CRUD页面

要在Spring Boot API中生成用于管理实体的页面，请在react-native-app目录中运行以下命令。

ignite generate import-jdl ../app.jh

运行react-native run-ios ，登录，然后单击“ 实体”菜单项。 您应该会看到类似下面的屏幕。

单击点 ，您应该可以添加点。

调整React Native Points编辑屏幕以使用Toggles

我的21点健康应用程序的目标是计算一周内您获得的健康点总数，最大值为21。因此，我认为更改运动，进餐，和酒精可以切换，而不是原始整数。 如果用户将其打开，则应用程序应将值存储为“ 1”。 如果他们关闭它，它应该记录为“ 0”。

要对React Native应用程序进行此更改， App/Containers/PointEntityEditScreen.js在您喜欢的编辑器中打开App/Containers/PointEntityEditScreen.js 。 更改formModel以将t.Boolean用于运动，进餐和饮酒。

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()
}),

然后，根据用户的选择，更改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
  }
}

在使用它时，您可以将默认的Points实体更改为具有默认日期的今天日期和true日期。 您可以通过修改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中刷新应用。 创建新点时，应该会看到新的默认值。

调整React App的使用要点复选框

由于您的JHipster应用程序也具有React UI，因此有必要将点输入/编辑屏幕更改为使用类似的机制：复选框。 打开jhipster-api/src/main/webapp/…​/points-update.tsx并用以下三个字段替换TSX（T表示TypeScript）。 您可能会注意到trueValue和falseValue属性处理将检查转换为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目录中，运行npm start （或yarn start ）并验证您的更改是否存在。 下面的屏幕快照显示了编辑React Native应用输入的记录时的外观。

使用Okta的API进行身份识别

借助Spring Boot和Spring Security，在JHipster应用程序中从Keycload切换到Okta以获得身份很容易。 首先，您需要一个Okta开发人员帐户。 如果您还没有，请访问developer.okta.com/signup进行注册。 Okta是像Keycloak这样的OIDC提供程序，但它始终处于打开状态，因此您不必对其进行管理。

登录到您的Okta Developer帐户，然后导航到Applications > Add Application 。 单击“ Web” ，然后单击“ 下一步” 。 给应用程序起一个您会记住的名称，并指定http://localhost:8080/login和healthpoints://authorize作为登录重定向URI。 单击完成 ，然后再次对其进行编辑以选择“隐式（混合）” +允许ID和访问令牌。 请注意客户端ID和密码，您需要在一分钟内将它们复制/粘贴到文件中。

创建一个ROLE_ADMIN和ROLE_USER组（“ 用户” >“ 组” >“ 添加组” ）并将用户添加到其中。 我建议将您注册时使用的帐户添加到ROLE_ADMIN并创建一个新用户（“ 用户” >“ 添加人” ）以添加到ROLE_USER 。

导航到API > 授权服务器 ，然后单击一个名为default的名称进行编辑。 点击索赔标签，然后添加索赔 。 将其命名为“角色”，并将其包含在ID令牌中。 将值类型设置为“ Groups”，并将过滤器设置为.*的正则表达式。 单击创建以完成该过程。

在硬盘驱动器上创建一个名为~/.okta.env的文件，并在其中指定应用程序的设置。

#!/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变量中没有-admin 。 这是一个常见的错误。

在运行Spring Boot应用程序的终端中，终止进程，运行source ~/.okta.env ， ./gradlew再次运行./gradlew 。 您应该能够在浏览器和React Native应用程序中登录http://localhost:8080 （刷新或重新启动后）。

调试React Native Apps

如果您遇到问题，或者只是想看看正在执行什么API调用，可以使用Reactotron 。 Reactotron是一个桌面应用程序，用于检查您的React和React Native应用程序。 它应该可以与iOS一起使用，而无需进行任何更改。 对于Android，在运行AVD之后，您需要运行adb reverse tcp:9090 tcp:9090 。

一旦运行，您就可以看到正在进行的API调用以及日志消息。

如果您想将自己的消息记录到Reactotron，可以使用< console.tron.log('debug message') 。

打包您的React Native App进行生产

最后，我想向您展示将应用程序部署到生产环境。 由于将React Native应用程序安装到物理设备上有很多步骤，因此我将参考React Native的“在设备上运行”文档 。 它应该像通过USB插入设备，配置代码签名以及构建/运行应用程序那样简单。 您还需要配置API所在的URL。

您知道Spring Boot有什么很棒的功能吗？ 有很多支持它的云提供商！ 如果平台支持Spring Boot，则应该可以在其上运行JHipster应用程序！

请按照以下说明使用Kubernetes将您的API部署到Pivotal的Cloud Foundry和Google Cloud Platform。 Cloud Foundry和Kubernetes都有多个提供程序，因此即使您未使用Pivotal或Google，这些说明也应适用。

将Spring Boot API部署到Cloud Foundry

JHipster具有Cloud Foundry子生成器 ，可以轻松部署到Cloud Foundry。 它只需要您运行一个命令。 但是，您已经在API中配置了Elasticsearch，并且子生成器不支持自动为您配置Elasticsearch实例。 要解决此限制，请修改jhipster-api/src/main/resources/config/application-prod.yml并为Spring Data Jest查找以下配置：

data:
    jest:
        uri: http://localhost:9200

将其替换为以下内容，这将使Elasticsearch以嵌入式模式运行。

data:
    elasticsearch:
        properties:
            path:
                home: /tmp/elasticsearch

由于我在JHipster中发现了一个问题 ，您还需要删除几个属性。

@@ -30,15 +30,12 @@ spring:
         url: jdbc:postgresql://localhost:5432/HealthPoints
         username: HealthPoints
         password:
-        hikari:
-            auto-commit: false
     jpa:
         database-platform: io.github.jhipster.domain.util.FixedPostgreSQL82Dialect
         database: POSTGRESQL
         show-sql: false
         properties:
             hibernate.id.new_generator_mappings: true
-            hibernate.connection.provider_disables_autocommit: true
             hibernate.cache.use_second_level_cache: true
             hibernate.cache.use_query_cache: false
             hibernate.generate_statistics: false

要使用Pivotal Web Services在Cloud Foundry上部署所有内容，您需要创建一个帐户，下载/安装Cloud Foundry CLI并登录（使用cf login -a api.run.pivotal.io ）。

登录“ No space targeted, use 'cf target -s SPACE'后，您可能会收到警告。 如果这样做， 请在浏览器中登录https://run.pivotal.io ，创建一个空格，然后根据建议运行命令。

然后在jhipster-api目录中运行jhipster cloudfoundry 。 您会在下面的提示中看到我选择的值。

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

当提示您覆盖build.gradle ，键入a 。

第一次运行jhipster cloudfoundry ，它没有用。 第二次运行成功。

source ~/.okta.env
export CF_APP_NAME=healthpoints
cf set-env $CF_APP_NAME FORCE_HTTPS true
cf set-env $CF_APP_NAME SECURITY_OAUTH2_CLIENT_ACCESS_TOKEN_URI "$SECURITY_OAUTH2_CLIENT_ACCESS_TOKEN_URI"
cf set-env $CF_APP_NAME SECURITY_OAUTH2_CLIENT_USER_AUTHORIZATION_URI "$SECURITY_OAUTH2_CLIENT_USER_AUTHORIZATION_URI"
cf set-env $CF_APP_NAME SECURITY_OAUTH2_RESOURCE_USER_INFO_URI "$SECURITY_OAUTH2_RESOURCE_USER_INFO_URI"
cf set-env $CF_APP_NAME SECURITY_OAUTH2_CLIENT_CLIENT_ID "$SECURITY_OAUTH2_CLIENT_CLIENT_ID"
cf set-env $CF_APP_NAME SECURITY_OAUTH2_CLIENT_CLIENT_SECRET "$SECURITY_OAUTH2_CLIENT_CLIENT_SECRET"
cf restage healthpoints

覆盖Spring Security的默认OIDC设置后，您需要在Okta OIDC应用程序中添加https://healthpoints.cfapps.io/login作为重定向URI。

然后...您将可以进行身份​​验证。 瞧！ 😃

将您的React Native应用程序的apiUrl （位于App/Config/AppConfig.js ）修改为https://healthpoints.cfapps.io/并将其部署到您的手机中。 提示：使用我前面提到的“在设备上运行”文档。

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 。

当我在Xcode中遇到构建问题时，我运行rm -rf ~/.rncache并修复了它们。 我还使用了一些rm -rf node_modules && yarn 。

以下是显示其工作原理的屏幕截图！

使用Kubernetes将Spring Boot API部署到Google Cloud Platform

JHipster还支持将您的应用程序部署到生产中最热门的东西：Kubernetes！

要进行尝试，请在jhipster-api目录旁边创建一个k8s目录。 然后在其中运行jhipster kubernetes 。 出现提示时，请指定以下答案：

• 应用类型： 整体应用
• 根目录： ../
• 哪些应用程序： jhipster-api
• 设置监控： 否
• Kubernetes命名空间： 默认
• Docker存储库名称：<您的Docker Hub用户名>
• docker push命令： docker push
• Kubernetes服务类型： LoadBalancer

将打印出许多您需要运行的命令。 在jhipster-api目录中运行以下jhipster-api 。

docker login
export USERNAME=<your username>
./gradlew bootWar -Pprod jibDockerBuild
docker image tag healthpoints $USERNAME/healthpoints
docker push $USERNAME/healthpoints

Google Cloud Platform（又名GCP）是基于Google核心基础架构的PaaS（平台即服务）。 它自然是云中Kubernetes的良好提供商。 完成以下步骤，将JHipster API部署到Google Cloud。

1. 1. 1. 1. 通过console.cloud.google.com创建一个Google Cloud项目。
         2. 导航到https://console.cloud.google.com/kubernetes/list初始化项目的Kubernetes引擎。 如果未自动选择项目，请在导航栏中选择它以在GCP中启动GKE初始化。
         3. 安装Google Cloud SDK ，登录并使用以下项目设置项目：

      gcloud auth login
      gcloud config set project <project-name>

      1. 创建集群：

         gcloud components install kubectl
         gcloud container clusters create <cluster-name> --machine-type n1-standard-2 --scopes cloud-platform --zone us-west1-a

         要查看可能的区域列表，请运行gcloud compute zones list 。

      2. 为您的Spring Boot应用程序设置环境变量以使用Okta for Identity。 您可以通过修改做到这一点k8s/healthpoints/healthpoints-deployment.yml ，增添了env列表，并指定你的SECURITY_OAUTH2_*您1563 OIDC应用价值。 换句话说，在JAVA_OPTS之后添加名称/值对。

         containers:
         - name: healthpoints-app
           image: mraible/healthpoints
           env:
           - name: SPRING_PROFILES_ACTIVE
             value: prod
           - name: SPRING_DATASOURCE_URL
             value: jdbc:postgresql://healthpoints-postgresql.default.svc.cluster.local:5432/HealthPoints
           - name: SPRING_DATA_JEST_URI
             value: http://healthpoints-elasticsearch.default.svc.cluster.local:9200
           - name: JAVA_OPTS
             value: " -Xmx256m -Xms256m"
           - name: SECURITY_OAUTH2_CLIENT_ACCESS_TOKEN_URI
             value: "https://{yourOktaDomain}/oauth2/default/v1/token"
           - name: SECURITY_OAUTH2_CLIENT_USER_AUTHORIZATION_URI
             value: "https://{yourOktaDomain}/oauth2/default/v1/authorize"
           - name: SECURITY_OAUTH2_RESOURCE_USER_INFO_URI
             value: "https://{yourOktaDomain}/oauth2/default/v1/userinfo"
           - name: SECURITY_OAUTH2_CLIENT_CLIENT_ID
             value: "{yourClientId}"
           - name: SECURITY_OAUTH2_CLIENT_CLIENT_SECRET
             value: "{yourClientSecret}"

      3. 从k8s目录运行./kubectl-apply.sh 。 您应该看到一堆创建的消息。

         deployment.apps "healthpoints" created
         deployment.extensions "healthpoints-elasticsearch" created
         service "healthpoints-elasticsearch" created
         deployment.extensions "healthpoints-postgresql" created
         service "healthpoints-postgresql" created
         service "healthpoints" created

         您可以使用kubectl get pods和kubectl logs -f {podName}来查看日志。

         $ 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

      4. 运行kubectl get svc healthpoints以在Google Cloud上获取应用程序的外部IP。 打开http://<external-ip>:8080以查看正在运行的应用程序。
      5. 更新您的Okta应用程序，使其具有应用程序的IP地址作为登录重定向URI（例如， http://<external-ip>:8080/login ）。 然后，验证一切正常。
      6. 使用kubectl根据需要kubectl应用程序：

   kubectl scale --replicas=3 deployment/healthpoints

   运行kubectl get pods来监视pods的启动。

   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

结果？ 在GKE上的生产环境中运行的Spring Boot API！ 哇！

在GCP上反应Native + Spring Boot

要使您的React Native应用程序与GCP实例一起使用，您只需要修改其AppConfig.js文件以指向其URI，然后打包并部署即可。

export default {
  apiUrl: 'http://<external-ip>:8080',
  appUrlScheme: 'healthpoints'
}

秘诀：更改不同环境的API URL

您可能认为必须为不同的环境（本地开发与Cloud Foundry与Google Cloud）更改API URL感到很痛苦。 我同意！

幸运的是，Ignite JHipster已经内置了react-native-config 。 这个项目允许您将配置变量暴露给React Native中JavaScript代码。 您可以将API密钥，URL和其他敏感信息存储在.env文件中。

API_URL=https://production-is-awesome.cfapps.io

要在您的应用程序中使用react-native-config，请使用以下步骤：

1. 将.env.example复制到.env并更新.gitignore以将其忽略。
2. 添加您的配置变量。
3. 按照luggit / react-native-config＃setup上的说明进行操作 。
4. 将您的AppConfig.js更改为以下内容：

import Secrets from 'react-native-config'

export default {
  apiUrl: Secrets.API_URL,
  appUrlScheme: 'healthpoints'
}

探索React Native，Spring Boot和JHipster

本教程向您展示了如何仅使用几个命令即可构建安全的Spring Boot API（由JPA，PostgreSQL和Elasticsearch驱动）。 然后，您学习了如何使用Gradle运行应用程序，如何使用Docker运行外部服务以及如何使用Sonar验证高质量的代码。 那仅仅是开始！

我再次向您展示了如何构建React Native应用程序，仅需几个命令。 哎呀，甚至部署到云中也只用了一些有趣的CLI命令。

本教程的源代码位于GitHub @ oktadeveloper / okta-react-native-spring-boot-example上 。

您不觉得所有这些一流的技术都在嬉戏吗？ 我确定！ 🤓

想保持臀部？ 查阅其他一些关于React Native，Spring Boot和JHipster的教程。

• 构建一个React Native应用程序并使用OAuth 2.0进行身份验证 –使用React Native AppAuth，它是Ignite JHipster的计划集成 。
• 使用OAuth 2.0和JHipster开发微服务架构 -包括有关如何部署到Heroku的说明。
• 使用React和Spring Boot来构建一个简单的CRUD应用程序 –当您计划JUG Tours时，CRUD应用程序会很酷！
• 使用React，Spring Boot和JHipster构建照相馆PWA –使用JHipster和React构建Flickr克隆。 使其成为PWA。
• 使用Ionic for JHipster来创建具有OIDC身份验证的移动应用程序 –不在React Native中吗？ 离子呢？

关注我们 ， 观看我们的视频 ，如果您想了解更多关于最好的开源技术的信息，请与我们联系 。 我们是开源的忠实拥护者。 💙

使用React Native和Spring Boot构建移动应用程序''最初于2018年10月10日发布在Okta开发者博客上。

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。

翻译自: https://www.javacodegeeks.com/2018/11/build-mobile-app-react-native-spring-boot.html