Lesson 1 - React Native DevOps basic concepts and settings
01/02/2023 - 4 phút
Summary
Concepts
- Hardware requirements
- Source code control
- iOS provisioning profiles
- Build environment
Instructions
- Initial computer setup
- Installing applications
- Adding a new node to Jenkins master
- Running test job
System Overview
Concepts
Hardware requirements
- Here I am using hardware Mac Mini M1 2020 (3.2Ghz Apple M1 Chip With 8-CPU, 16G RAM, SSD 512), but if you want to use it on the cloud, you can refer to the server here macincloud.com
- My Mac Mini will be kept at the company and can only be built on the company’s internal network via the machine’s IP address, while you can bring the network out by NATing the IP to the network or using a service on Mac Cloud.
Source code control
In this guide, I will use Github to manage source code, Jenkins and GitHub work together to bring consistency and speed to the development team. Jenkins runs all types of automated DevOps workflows, such as hourly build verification, nightly builds, on-demand builds, and many more.
iOS provisioning profiles
- My favorite part of iOS development is Provisioning profiles. I like the Android approach because of its simplicity, especially when managing different types of builds. Apple’s approach to building destinations is limiting and requires additional work from developers to test all cases.
- To use Provisioning profiles, we use Match, which stores and updates iOS provisioning profiles and signing certificates. All files created by Match are then stored in an encrypted Github repository, with the decryption key shared by the development team.
Build environment
- Releasing a React Native (RN) project for production requires a lot of tools. At a minimum, a successful release will use Node.js, NPM/Yarn, Xcode, and Android Studio. Projects that incorporate third-party SDKs add complexity and additional tools to releases. Managing this complexity is critical to creating a build process.
- It is very important for all developers working on the project to have the same environment. Automatically incrementing the version in the environment for RN is not as simple as other platforms - there are many tools and many places to make small mistakes. The small differences between the development machine and the build machine can lead to wasted developer time and the potential to sit and debug build errors.
- Setting up and installing Jenkins requires standardizing the build environment for yourself and the development team. Develop in the same environment that runs your builds.
Instructions
Initial computer setup
1. Update to the latest operating system
To ensure that the build runs smoothly and the environment is synchronized with the developer, we need to update the system by updating the operating system:
- Select the Apple icon
- Select ‘Software Update’
- Update macOS
2. Install Xcode
Open the Appstore application
Search for Xcode
Click on download and install
Open Xcode and complete the initial setup.
Click on Agree
Click on Install
Click on Continue
Finish the setup
3. Install xcode cli
Open the terminal and type the command:
xcode-select --install
Click on Install
Click on Agree
Installation successful
Next, use the command:
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license
Enable developer mode with the command:
DevToolsSecurity -enable
4. Install Android Studio
Go to the Android Studio homepage to download it: https://developer.android.com/studio
Click on Download Android Studio Electric Eel
Selectbecause I am using an Apple M1 chip.
After downloading, open the file and drag it to the Applications folder.
Then open Android Studio in the Applications folder.
Click on Open
Click on Ok
Click on Next
Select Standard, then click on Next
Click on Next
Click on Next
Select Accept, then click on Finish
Click on Finish
5. Install Android SDK
Android Studio is now set up. Set up the necessary SDK components on the welcome screen.
Click on More Actions, then select SDK Manager. Check the boxes as shown in the image and then click on OK.
6. Install CLI software
- Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
This command installs Homebrew, a package manager for macOS.
- JDK 11
brew tap homebrew/cask-versions
brew install --cask zulu11
7. Install .zshrc
Open the .zshrc file and add the line below
# Android
export ANDROID_SDK="$HOME/Library/Android/sdk"
export ANDROID_SDK_TOOLS="$ANDROID_SDK/tools"
export ANDROID_SDK_TOOLS_BIN="$ANDROID_SDK_TOOLS/bin"
export ANDROID_PLATFORM_TOOLS="$ANDROID_SDK/platform-tools"
export PATH="$PATH:$ANDROID_SDK:$ANDROID_SDK_TOOLS"
export PATH="$PATH:$ANDROID_SDK_TOOLS_BIN:$ANDROID_PLATFORM_TOOLS"
# Fastlane
export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8
export LC_ALL=en_US.UTF-8
Use command to apply configuration
source $HOME/.zshrc
8. Install Jenkins
We install jenkins using the command
brew install jenkins-lts
After installing successfully, we start with the command
brew services start jenkins-lt
Then we go to http://127.0.0.1:8080/login?from=%2F to log into the system
We get the default password with the command
cat /Users/duytran/.jenkins/secrets/initialAdminPassword
Configure the public ip connection by opening all connection ips to jenkins by command
#nano /usr/local/opt/jenkins-lts/homebrew.mxcl.jenkins-lts.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>homebrew.mxcl.jenkins-lts</string>
<key>LimitLoadToSessionType</key>
<array>
<string>Aqua</string>
<string>Background</string>
<string>LoginWindow</string>
<string>StandardIO</string>
<string>System</string>
</array>
<key>ProgramArguments</key>
<array>
<string>/usr/local/opt/openjdk@17/bin/java</string>
<string>-Dmail.smtp.starttls.enable=true</string>
<string>-jar</string>
<string>/usr/local/opt/jenkins-lts/libexec/jenkins.war</string>
<string>--httpListenAddress=0.0.0.0</string> # <= Thêm ở đây
<string>--httpPort=8080</string>
</array>
<key>RunAtLoad</key>
<true/>
</dict>
</plist>
Then restart the service and connect normally using the network’s IP
brew services restart jenkins-lt
9. Install fastlane
We install using the fastlane command
brew install fastlane
So you have understood and installed the basic jenkins build server for React native, the next article I will guide you to build and push it to firebase distribution.