CI/CD on self-hosted server using Jenkins for React

ReactJenkins.md

Jenkins CI/CD Pipeline

Part 1: Setting up the necessary configuration

(1) For Node.js to run you must install a Node.js plugin.

• The plugin panel can be accessed through Manage Jenkins > Manage Plugins

• Here select the available tab. Search for Nodejs, and click on the Install button.

(2) After the installation has finished you must configure the Nodejs in Jenkins

• Click on Manage Jenkins > Global Tool Configuration

• Scroll down to Nodejs select the Add NodeJS

• Set the name to nodejs and select the intended Node.js version and Save the setting.

(3) Setting Publish over SSH configuration

• The plugin panel can be accessed through Manage Jenkins > Configure System

• Click on Add under Publish over SSH.

• Give it a name, ex: Copy to 10.8.55.57

• Enter hostname: ex: 10.8.55.57

• Set username: ex: root

• Set remote directory: ex: /pgdata/api_builds

• Click on Advanced button and select Use password authentication, or use a different key and enter the server password.

Part 2: Setting up the build pipeline

(1) Log into Jenkins and click on New Item on the left panel.

(2) Give a name to your project & select the Freestyle project and click ok.

(3) In the Source Code Management section

• Select Subversion

• Enter the repository URL of the React project: http://10.8.52.52/svn/iesvn/hisie/trunk/his.hie.client@HEAD

• Select/Add your SVN credentials

• Local module directory: . and save

(4) In the Build Environment section

• Select the Delete workspace before build starts

• Select the Add timestamps to the Console Output

• Select the Provide Node & npm bin/folder path and set the Node.js Installation name configured in Part 1

• Select the Set Build Name and enter his.hie.client-1.0-${BUILD_NUMBER}

(4) In the Build section

• Add the Build step > Inject environment variables and inside the Properties Content enter the following:

CI=false
REACT_APP_BACKEND_API=https://hisietest.nmc.ae/

• Add the Build step > Execute shell and inside the Properties Content enter the following:

npm install
npm run build
zip -r his.hie.client-1.0-${BUILD_NUMBER}.zip build

(5) In the Post-build Actions section

• Add the Post-build Actions > Send build artifacts over SSH

• Under SSH Server, select the Name that we configured in Part 1, Step 3

• Under Transfers > Source files, enter the following: **/*his.hie.client-1.0-${BUILD_NUMBER}.zip

• Under Remote directory, enter the following: hisie/his.hie.client (Make sure the directory exists)

• Click on Save

(6) Run the build pipeline

• Click on Build Now on the left panel and wait for the build to complete.

• The build zip file will be available in the Server directory. mentioned

Part 3: Setting up the deployment pipeline

(1) SSH into 10.8.55.57 server

• Our build zip file would be available in the /pgdata/api_builds/hisie/his.hie.client directory.

• Copy the name of the latest build zip file to the clipboard

(2) SSH into the server where you want to deploy the application (In our case, 10.80.55.10 or 10.80.55.11)

• cd into /hisie-builds

• Create a new directory with the name his.hie.client to store all our build zips his.hie.client-1.0-${BUILD_NUMBER}.

(3) Rsync copy the build zip file from 10.8.55.57 to 10.80.55.10 or 10.8.55.11 using the following command:

rsync -vazP root@10.8.55.57:/pgdata/api_builds/hisie/his.hie.client/his.hie.client-1.0--${BUILD_NUMBER}.zip /root/hisie-builds/his.hie.client/.

(4) Unzip the build zip file using the following command:

unzip his.hie.client-1.0-${BUILD_NUMBER}.zip

(5) The build directory will be available in the /hisie-builds/his.hie.client directory.

(6) Now, we need to install Node.js and npm on the server where we want to deploy the application.

(7) Install Node.js by following: https://linuxize.com/post/how-to-install-node-js-on-ubuntu-18.04/

(8) Install the Serve module by : npm i -g serve

(9) Serve the react build on port 9393: serve -l 9393 -s build &

(10) To stop the client

• Get the PID of the port: lsof -t -i tcp:9393

• Gracefully kill: kill -s KILL PID_NUMBER