ReactNativeでAPKファイルを作成する方法【Windows】

# ReactNativeでAPKファイルを作成する方法

## 1. Node.jsインストール
1. 以下のURLからインストーラーをダウンロードする。
    - [https://nodejs.org/ja/](https://nodejs.org/ja/)
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/f1b145e9-9cd7-c7b1-ce4d-28098e3c52ce.png)
2. インストーラーを起動し、インストールする。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/5be3d647-b449-a94d-0cc6-cae17c437c88.png)
3. コマンドプロンプ開き、以下コマンドを実行する
    ```
    node --version

    npm --version
    ```
4. バージョンが表示されれば成功
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/6b875401-1402-422f-b7d9-00019eb51afa.png)


## 2. ReactNativeインストール
1. コマンドプロンプトを開き、以下コマンドを実行する
    ```
    npm install -g react-native-cli

    npx react-native -v
    ```
    - 実行結果
    ```
    C:\Users\ユーザ名>npm install -g react-native-cli
    C:\Users\ユーザ名\AppData\Roaming\npm\react-native -> C:\Users\ユーザ名\AppData\Roaming\npm\node_modules\react-native-cli\index.js
    + react-native-cli@2.0.1
    added 88 packages from 27 contributors in 6.872s
    ```
2. `npx react-native -v` コマンドでバージョンが表示されれば成功

## 3. Java11インストール
1. 以下のリンクからJava11をダウンロードする
    - [https://jdk.java.net/java-se-ri/11](https://jdk.java.net/java-se-ri/11)
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/53c230e0-b611-e2e2-9b7e-d8936bca2f8d.png)
2. ダウンロードしたZIPファイル（`openjdk-11+28_windows-x64_bin.zip`）を展開し、`C:\Program Files\Java` 直下（任意）に配置する
3. システム環境変数を開く
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/cf203d24-60ed-adb9-425d-90e0862afc26.png)
4. `環境変数(N)...` を押下する
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/89326d58-121f-e07b-7f81-daf2a70270ea.png)
5. `新規(W)...` を押下し、変数名：`JAVA_HOME` 値：`展開したZIPファイルを配置したパス` を作成する
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/ccecbe22-6b69-3e8f-6fc0-2bff34a71f58.png)
6. `Path` を選択し、`編集(I)...` を押下する
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/b0fa88c9-4a6f-a9a9-53a5-d93f674f7264.png)
7. `新規(N)` を押下し、`%JAVA_HOME%\bin` を追加する
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/d674d98c-6ff9-f82b-cae0-e23ab2a56584.png)
8. コマンドプロンプトを開き、以下コマンドを実行する
    ```
    javac -version
    ```
9. バージョンが表示されれば成功
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/cd3c4f89-be30-4407-50cc-48848acc6f9b.png)

## 4. Android Studioインストール
1. 以下のURLからインストーラーをダウンロードする。
    - [https://developer.android.com/studio/index.html?hl=ja](https://developer.android.com/studio/index.html?hl=ja)
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/d5f1e383-23ef-d72c-20b7-935ed48e5b08.png)
2. インストーラーを起動し、インストールする。
3. Android Studioの起動が確認できれば成功
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/588715e1-6852-867b-1612-c3eee9329ff7.png)

## 5. ReactNativeプロジェクト作成
1. コマンドプロンプトを開く
2. 任意のフォルダに移動してサンプルのプロジェクトを作成する
    ```
    npx create-react-native-app プロジェクト名
    ```
3. 以下の文章が表示された場合、 `Enter` を押下する
    ```
    npx: installed 1 in 1.307s
    ? How would you like to start » - Use arrow-keys. Return to submit.
    >   Default new app
        Template from expo/examples: https://github.com/expo/examples
    ```
4. 以下の文章が表示され、プロジェクト名のフォルダが作成されていれば成功
    ```
    npx: installed 1 in 1.307s
    √ How would you like to start » Default new app
    √ Downloaded and extracted project files.

    Using Yarn to install packages. You can pass --use-npm to use npm instead.

    √ Installed JavaScript dependencies.
    √ Skipped installing CocoaPods because operating system is not on macOS.

    ✅ Your project is ready!

    To run your project, navigate to the directory and run one of the following yarn commands.

    - cd Sample
    - yarn android
    - yarn ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac
    - yarn web
    ```
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/4c8437cd-02b3-5403-9690-c40d2583233e.png)

## 6. keystore作成
1. androidフォルダに移動する
    ```
    cd 【プロジェクト名フォルダのパス】\android
    ```
2. 以下コマンドを実行する
    ```
    keytool -genkeypair -v -storetype PKCS12 -keystore 【キーファイル名】.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
    ```
3. 以下の通り値を入力する
    - `キーストアのパスワードを入力してください:`
        - 6文字以上で任意の文字列
    - `新規パスワードを再入力してください:`
        - 先ほど入力したパスワード
    - `姓名は何ですか。`
        - 任意の文字列
    - `組織単位名は何ですか。`
        - 任意の文字列
    - `組織名は何ですか。`
        - 任意の文字列
    - `都市名または地域名は何ですか。`
        - 任意の文字列
    - `都道府県名または州名は何ですか。`
        - 任意の文字列
    - `この単位に該当する2文字の国コードは何ですか。`
        - jp（任意）
    - `CN=【入力した姓名】, OU=【入力した組織単位名】, O=【入力した組織名】, L=【入力した都市名または地域名】, ST=【入力した都道府県名または州名】, C=【入力した2文字の国コード】でよろしいですか。`
        - 内容が正しければ `y` 、正しくなければ `Enter` で修正できる。
    ```
    【入力例】

    キーストアのパスワードを入力してください:
    新規パスワードを再入力してください:
    姓名は何ですか。
      [Unknown]:  hogehoge
    組織単位名は何ですか。
      [Unknown]:  fugafuga
    組織名は何ですか。
      [Unknown]:  hogefuga
    都市名または地域名は何ですか。
      [Unknown]:  hoge
    都道府県名または州名は何ですか。
      [Unknown]:  fuga
    この単位に該当する2文字の国コードは何ですか。
      [Unknown]:  jp
    CN=hogehoge, OU=fugafuga, O=hogefuga, L=hoge, ST=fuga, C=jpでよろしいですか。
      [いいえ]:  y
    ```
4. 以下の文章が表示されれば成功
    ```
    10,000日間有効な2,048ビットのRSAの鍵ペアと自己署名型証明書(SHA256withRSA)を生成しています
            ディレクトリ名: CN=hogehoge, OU=hoge, O=fuga, L=hogefuga, ST=fugahoge, C=jp
    [【キーファイル名】.keystoreを格納中]
    ```

## 7. APKファイル作成
1.`【プロジェクト名フォルダのパス】/android/gradle.properties` の先頭に以下を追加する
```
MYAPP_UPLOAD_STORE_FILE=[【キーファイル名】.keystore] # keytoolコマンドで作成したファイル名
MYAPP_UPLOAD_KEY_ALIAS=[my-key-alias] # 固定
MYAPP_UPLOAD_STORE_PASSWORD=[【keytoolコマンドで設定したパスワード】] # keytoolコマンドで設定したパスワード
MYAPP_UPLOAD_KEY_PASSWORD=[【keytoolコマンドで設定したパスワード】] # keytoolコマンドで設定したパスワード
```
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/9f6e66a8-2131-de1a-14f0-6de022147683.png)
2.`【プロジェクト名フォルダのパス】/android/` に `local.properties` ファイルを作成する
```properties:local.properties
sdk.dir = C:/Users/【ユーザ名】/AppData/Local/Android/Sdk
```
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/90e15ac6-320e-dd24-8878-28b400b03f2e.png)
3.`【プロジェクト名フォルダのパス】/android/` をコマンドプロンプトで開き、以下コマンドを実行する
```
gradlew bundleRelease
```
4.以下の文章が表示されることを確認する
```
BUILD SUCCESSFUL in 1m 4s
230 actionable tasks: 224 executed, 6 up-to-date
```
5.コマンドプロンプトで以下コマンドを実行する

```
gradlew assembleRelease
```
6.`【プロジェクト名フォルダのパス】/android/app/build/outputs/apk/release` に `app-release.apk` が存在すれば成功
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/e31236de-e577-e47d-6e51-0db09780b172.png)


# 8. 適当なエミュレータで動作確認

- エミュレータで以下の画面が表示されれば成功
    - [Bluestacksリンク](https://www.bluestacks.com/ja/index.html)
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/9daa422d-1f7e-4f6a-d264-7c6db2354f82.png)

# GitHub
GitHubにソースコードを公開しています。

https://github.com/ryomeblog/qiita/tree/master/ReactNativeでAPKファイルを作成する方法/