フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

Windows環境でchocolateyでReactNativeの開発環境を構築するまで

chocolatey

chocolateyとは

Windows 用のパッケージ管理ソフトウェアとなります。

chocolateyのインストール

  1. PowerSellを管理者モードで起動する f:id:PX-WING:20200202104655p:plain

  2. 下記のページに記載されているインストールコマンドを起動したPowerSellにコピペする。 chocolatey.org

PS C:\WINDOWS\system32> Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Getting latest version of the Chocolatey package for download.
Getting Chocolatey from https://chocolatey.org/api/v2/package/chocolatey/0.10.15.
Downloading 7-Zip commandline tool prior to extraction.
Extracting C:\Users\81703\AppData\Local\Temp\chocolatey\chocInstall\chocolatey.zip to C:\Users\81703\AppData\Local\Temp\chocolatey\chocInstall...
Installing chocolatey on this machine
Creating ChocolateyInstall as an environment variable (targeting 'Machine')
  Setting ChocolateyInstall to 'C:\ProgramData\chocolatey'
WARNING: It's very likely you will need to close and reopen your shell
  before you can use choco.
Restricting write permissions to Administrators
We are setting up the Chocolatey package repository.
The packages themselves go to 'C:\ProgramData\chocolatey\lib'
  (i.e. C:\ProgramData\chocolatey\lib\yourPackageName).
A shim file for the command line goes to 'C:\ProgramData\chocolatey\bin'
  and points to an executable in 'C:\ProgramData\chocolatey\lib\yourPackageName'.

Creating Chocolatey folders if they do not already exist.

WARNING: You can safely ignore errors related to missing log files when
  upgrading from a version of Chocolatey less than 0.9.9.
  'Batch file could not be found' is also safe to ignore.
  'The system cannot find the file specified' - also safe.
chocolatey.nupkg file not installed in lib.
 Attempting to locate it from bootstrapper.
PATH environment variable does not have C:\ProgramData\chocolatey\bin in it. Adding...
警告: Not setting tab completion: Profile file does not exist at 'C:\Users\81703\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1'.
Chocolatey (choco.exe) is now ready.
You can call choco from anywhere, command line or powershell by typing choco.
Run choco /? for a list of functions.
You may need to shut down and restart powershell and/or consoles
 first prior to using choco.
Ensuring chocolatey commands are on the path
Ensuring chocolatey.nupkg is in the lib folder

3.インストールが完了したことを確認するためにchocoを実行するとバージョン情報が表示される 

PS C:\WINDOWS\system32> choco
Chocolatey v0.10.15
Please run 'choco -?' or 'choco <command> -?' for help menu.

chocolateyでnodejsインストール

1.下記のコマンドを実行する

choco install nodejs.install

※インストールを実行したPowerSellの落として再度起動する

  1. インストールされていることを確認できる
PS C:\WINDOWS\system32> node -v                                                                                         v13.7.0
v13.7.0

chocolateyでnvmをインストールしてからnodeをインストールする 

1.下記のコマンドを実行する 

PS C:\WINDOWS\system32> choco install nvm -y

※インストールを実行したPowerSellの落として再度、起動する

2.インストール可能なnodeのバージョンを確認する

PS C:\WINDOWS\system32> nvm list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    13.7.0    |   12.14.1    |   0.12.18    |   0.11.16    |
|    13.6.0    |   12.14.0    |   0.12.17    |   0.11.15    |
|    13.5.0    |   12.13.1    |   0.12.16    |   0.11.14    |
|    13.4.0    |   12.13.0    |   0.12.15    |   0.11.13    |
|    13.3.0    |   10.18.1    |   0.12.14    |   0.11.12    |
|    13.2.0    |   10.18.0    |   0.12.13    |   0.11.11    |
|    13.1.0    |   10.17.0    |   0.12.12    |   0.11.10    |
|    13.0.1    |   10.16.3    |   0.12.11    |    0.11.9    |
|    13.0.0    |   10.16.2    |   0.12.10    |    0.11.8    |
|   12.12.0    |   10.16.1    |    0.12.9    |    0.11.7    |
|   12.11.1    |   10.16.0    |    0.12.8    |    0.11.6    |
|   12.11.0    |   10.15.3    |    0.12.7    |    0.11.5    |
|   12.10.0    |   10.15.2    |    0.12.6    |    0.11.4    |
|    12.9.1    |   10.15.1    |    0.12.5    |    0.11.3    |
|    12.9.0    |   10.15.0    |    0.12.4    |    0.11.2    |
|    12.8.1    |   10.14.2    |    0.12.3    |    0.11.1    |
|    12.8.0    |   10.14.1    |    0.12.2    |    0.11.0    |
|    12.7.0    |   10.14.0    |    0.12.1    |    0.9.12    |
|    12.6.0    |   10.13.0    |    0.12.0    |    0.9.11    |
|    12.5.0    |    8.17.0    |   0.10.48    |    0.9.10    |

3.2020年2月3日時点で安定版の12.14.1をインストールする

PS C:\WINDOWS\system32> nvm install 12.14.1
Downloading node.js version 12.14.1 (64-bit)...
Complete
Creating C:\ProgramData\nvm\temp

Downloading npm version 6.13.4... Complete
Installing npm v6.13.4...

Installation complete. If you want to use this version, type

nvm use 12.14.1

4.インストールした12.14.1を有効にする

PS C:\WINDOWS\system32> nvm use 12.14.1
Now using node v12.14.1 (64-bit)

PS C:\WINDOWS\system32> node -v
v12.14.1

chocolateyでyarnをインストールする

1.下記のコマンドを実行する 

PS C:\WINDOWS\system32> choco install yarn -y 

<実行結果>
Installing the following packages:
yarn
By installing you accept licenses for the packages.
Progress: Downloading yarn 1.21.1... 100%

yarn v1.21.1 [Approved]
yarn package files install completed. Performing other installation steps.
Downloading yarn
  from 'https://yarnpkg.com/downloads/1.21.1/yarn-1.21.1.msi'
Progress: 100% - Completed download of C:\Users\81703\AppData\Local\Temp\chocolatey\yarn\1.21.1\yarn-1.21.1.msi (1.57 MB).
Download of yarn-1.21.1.msi (1.57 MB) completed.
Hashes match.
Installing yarn...
yarn has been installed.
#< CLIXML
<Objs Version="1.1.0.1" xmlns="http://schemas.microsoft.com/powershell/2004/04"><Obj S="progress" RefId="0"><TN RefId="0"><T>System.Management.Automation.PSCustomObject</T><T>System.Object</T></TN><MS><I64 N="SourceId">1</I64><PR N="Record"><AV>モジュールを初めて使用するための準備しています。</AV><AI>0</AI><Nil /><PI>-1</PI><PC>-1</PC><T>Completed</T><SR>-1</SR><SD> </SD></PR></MS></Obj><Obj S="progress" RefId="1"><TNRef RefId="0" /><MS><I64 N="SourceId">1</I64><PR N="Record"><AV>モジュールを初めて使用するための準備しています。</AV><AI>0</AI><Nil /><PI>-1</PI><PC>-1</PC><T>Completed</T><SR>-1</SR><SD> </SD></PR></MS></Obj><S S="debug">Host version is 5.1.18362.145, PowerShell Version is '5.1.18362.145' and CLR Version is '4.0.30319.42000'.</S><S S="verbose">関数 'Format-FileSize' をエクスポートしています。</S><S S="verbose">関数 'Get-ChecksumValid' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyUnzip' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyWebFile' をエクスポートしています。</S><S S="verbose">関 数 'Get-EnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariableNames' をエクスポートしています。</S><S S="verbose">関数 'Get-FtpFile' をエクスポートしています。</S><S S="verbose">関数 'Get-OSArchitectureWidth' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParameters' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParametersBuiltIn' をエクスポートし ています。</S><S S="verbose">関数 'Get-ToolsLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-UACEnabled' をエクスポートしています。</S><S S="verbose">関数 'Get-UninstallRegistryKey' をエクスポー トしています。</S><S S="verbose">関数 'Get-VirusCheckValid' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFile' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFileName' をエクスポートして います。</S><S S="verbose">関数 'Get-WebHeaders' をエクスポートしています。</S><S S="verbose">関数 'Install-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyDesktopLink' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyExplorerMenuItem' をエクスポートしています。</S><S S="verbose"> 関数 'Install-ChocolateyFileAssociation' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyInstallPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPackage' をエク スポートしています。</S><S S="verbose">関数 'Install-ChocolateyPath' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPinnedTaskBarItem' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPowershellCommand' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyShortcut' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyVsixPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-Vsix' をエクスポートしています。</S><S S="verbose">関数 'Set-EnvironmentVariable' をエ クスポートしています。</S><S S="verbose">関数 'Set-PowerShellExitCode' をエクスポートしています。</S><S S="verbose">関数 'Start-ChocolateyProcessAsAdmin' をエクスポートしています。</S><S S="verbose">関数 'Test-ProcessAdminRights' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyPackage' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Update-SessionEnvironment' をエクスポートしています。</S><S S="verbose">関数 'Write-ChocolateyFailure' をエクスポートしています。</S><S S="verbose">関数 'Write-ChocolateySuccess' をエクスポートしています。</S><S S="verbose">関数 'Write-FileUpdateLog' をエクスポートしています。</S><S S="verbose">関数 'Write-FunctionCallLogMessage' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-ProcessorBits' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-OSBitness' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-InstallRegistryKey' をエクスポートしています。</S><S S="verbose">エイリアス 'Generate-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Add-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Start-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Invoke-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Remove-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'refreshenv' をエクスポートしています。</S><S S="verbose">関数 'Format-FileSize'  をエクスポートしています。</S><S S="verbose">関数 'Get-ChecksumValid' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyUnzip' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyWebFile' をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariableNames' をエクスポートしています。</S><S S="verbose">関数 'Get-FtpFile' をエクスポートしています。</S><S S="verbose">関数 'Get-OSArchitectureWidth' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParameters' をエクスポートしています。</S><S S="verbose"> 関数 'Get-PackageParametersBuiltIn' をエクスポートしています。</S><S S="verbose">関数 'Get-ToolsLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-UACEnabled' をエクスポートしています。</S><S S="verbose">関数 'Get-UninstallRegistryKey' をエクスポートしています。</S><S S="verbose">関数 'Get-VirusCheckValid' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFile' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFileName' をエクスポートしています。</S><S S="verbose">関数 'Get-WebHeaders' をエクスポートしています。</S><S S="verbose">関数 'Install-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyDesktopLink' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyExplorerMenuItem' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyFileAssociation' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyInstallPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPath' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPinnedTaskBarItem' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPowershellCommand' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyShortcut' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyVsixPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-Vsix' をエクスポートしています。</S><S S="verbose">関数 'Set-EnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Set-PowerShellExitCode' をエクスポートしています。</S><S S="verbose">関数 'Start-ChocolateyProcessAsAdmin' をエクスポートしています。</S><S S="verbose">関数 'Test-ProcessAdminRights' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyPackage' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Update-SessionEnvironment' をエクスポートしています。</S><S S="verbose">関数 'Write-ChocolateyFailure' をエクスポートしています。</S><S S="verbose">関数 'Write-ChocolateySuccess' をエクスポートしています。</S><S S="verbose">関数 'Write-FileUpdateLog' をエクスポートしています。</S><S S="verbose">関数 'Write-FunctionCallLogMessage' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-ProcessorBits' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-OSBitness' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-InstallRegistryKey' をエクスポートしています。</S><S S="verbose">エイリ アス 'Generate-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Add-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Start-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Invoke-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Remove-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'refreshenv' をエクスポートしてい ます。</S></Objs>
0
Only an exit code of non-zero will fail the package by default. Set
 `--failonstderr` if you want error messages to also fail a script. See
 `choco -h` for details.
  yarn may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of yarn was successful.
  Software installed as 'msi', install location is likely default.

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

Enjoy using Chocolatey? Explore more amazing features to take your
experience to the next level at
 https://chocolatey.org/compare

※インストールを実行したPowerSellの落として再度、起動する

2.yarnがインストールされたことを確認する

PS C:\WINDOWS\system32> yarn -v
1.21.1

chocolateyでOpenSDKをインストールする

1.下記のコマンドを実行する 

choco install openjdk

<実行結果>
PS C:\WINDOWS\system32> choco install openjdk
Chocolatey v0.10.15
Installing the following packages:
openjdk
By installing you accept licenses for the packages.
Progress: Downloading openjdk 13.0.102... 100%

openjdk v13.0.102 [Approved]
openjdk package files install completed. Performing other installation steps.
The package openjdk wants to run 'chocolateyinstall.ps1'.
Note: If you don't run this script, the installation will fail.
Note: To confirm automatically next time, use '-y' or consider:
choco feature enable -n allowGlobalConfirmation
Do you want to run the script?([Y]es/[A]ll - yes to all/[N]o/[P]rint): Y

Downloading openjdk 64 bit
  from 'https://download.java.net/java/GA/jdk13.0.2/d4173c853231432d94f001e99d882ca7/8/GPL/openjdk-13.0.2_windows-x64_bin.zip'
Progress: 100% - Completed download of C:\Users\81703\AppData\Local\Temp\chocolatey\openjdk\13.0.102\openjdk-13.0.2_windows-x64_bin.zip (186.89 MB).
Download of openjdk-13.0.2_windows-x64_bin.zip (186.89 MB) completed.
Hashes match.
Extracting C:\Users\81703\AppData\Local\Temp\chocolatey\openjdk\13.0.102\openjdk-13.0.2_windows-x64_bin.zip to C:\Program Files\OpenJDK...
C:\Program Files\OpenJDK
PATH environment variable does not have C:\Program Files\OpenJDK\jdk-13.0.2\bin in it. Adding...
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of openjdk was successful.
  Software installed to 'C:\Program Files\OpenJDK'

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

React Native CLIをインストール

  • グローバルにreact-native-cliをインストールする
PS C:\WINDOWS\system32> yarn global add react-native-cli
yarn global v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "react-native-cli@2.0.1" with binaries:
      - react-native
Done in 7.49s.

react-native プロジェクトの作成

react-native.cmd init example

Android Studioの設定

  • AVD Managerを起動する f:id:PX-WING:20200204001711p:plain
  • バーチャルデバイスの作成する(手順は割愛します。GUIですべてできるので。) f:id:PX-WING:20200204001715p:plain f:id:PX-WING:20200204001719p:plain f:id:PX-WING:20200204001722p:plain

環境変数の設定

(参考文献)

android - SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable - Stack Overflow

gradleのバージョン変更

  • project_dir/android/gradle/wrapper/gradle-wrapper.propertiesファイルの指定されているgradle-5.5を6系に指定する
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

(参考文献)

https://github.com/facebook/react-native/issues/26625

Androidのヴァーチャルデバイスにアプリをインストール

  • 自分のスペックだと5分かかった。スペックいいのに変えようかな。
 npx react-native run-android

React Native起動

  • ついに起動するところまで確認できました。でもここからようやくスタート地点 f:id:PX-WING:20200204010028p:plain