Skip to main content

Automate Build & Deploy React production build with gitlab-ci to Linux base server (AWS)

Right now as everyone wanting to automate literaly everything, this post will show you how you can automate the react build and deployment. I am using create-react-app getting started with react and assuming you have a similar setup.

    Setup .gitlab-yml file for gitlab auto deploy

    Here's the whole .gitlab-yml file that you can copy directly to root of your project.

    Breaking each line:
    image: node:10
        - node_modules/

    This line define the node version that should be used by the docker instance of shared gitlab-runner and the path defines to cache the node_modules dir.

      - apt-get update -qq && apt install -y openssh-client openssh-server
      - mkdir -p ~/.ssh     
      - echo -e "$SSH_PRIVATE_KEY" > ~/deploy.pem     
      - chmod 400 ~/deploy.pem     
      - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

    The code in `before_script` runs before the actual execution. This is to install and setup pre-requisits for deployment like openssh. Also, as I am using AWS ec2 instance to host the project, I have a .pem file to logging in to server via ssh, which is stored in gitlab variables as  SSH_PRIVATE_KEY and accessed by $SSH_PRIVATE_KEY in yml file. So, I'm adding the public-key to the a file and updating permission of the file as per AWS guidelines.

          - master
      stage: deploy
        name: production
        - npm install
        - REACT_APP_SERVER=production CI=true npm run build
        - scp -i ~/deploy.pem -r build/* $USER_NAME@$SERVER_IP:/var/www/html/provider
    'deploy_production' & 'deploy_staging' blocks are almost similar except 'deploy_production' have all the setup for production build and master branch of react whereas 'deploy_staging' have setup for staging build and staging branch. You can define any other branch you want in `refs`
    Gitlab ci/cd has 3 stages: test, build & deploy, I have merged the build and deploy part in the deploy stage but you can implement it seperatly.
    The script block, runs the essential script to make the project live. Here, for production, I set the environment variable `CI` to true; that'll consider any warning pops-up while building as error, so make sure there is no warning (or error ofcourse) else you can set that to false as I did for staging.
    Atlast, you need to define the dir path where you want to upload/copy the build
    We are using scp command to sync the build folder to our server. Basically, It uploads the build folder to our server.

    You can easily setup the variables mentioned in code (i.e. SSH_PRIVATE_KEY, USER_NAME, SERVER_IP) from your project's CI/CD settings. Visit this link for reference.

    Note: While setting up environment variables, if you want to use it for protected branches only (i.e master/production) remember to select that option.

    After setting up the variables, just push or merge to the branch you've specified in yml file and check the CI/CD Pipeline. It will assign the job to the shared gitlab-runner (Also, you can setup your own gitlab-runner on your server and you can use your own docker image too) and execute these commands.

    So, That's it, your react app deployed. Reach me out incase you catch any issue while setting up.


    Popular posts from this blog

    Live Game Streaming on YouTube

    Hello Guys, Today I gonna talk about how to stream your mobile gameplay to YouTube Gaming. Nowadays, PUBG (PlayerUnknown's BattleGround) is the most trending mobile game. Many Pro players upload/stream their gameplay to YouTube and earn money through monetization. Ok. Let's start. First of all Download YouTube Gaming App. After download, open the app and create/choose your google account for your YouTube channel. If you're a new user then you have to wait for 24 hours until you stream your gameplay (YouTube need to activate your account). Now Just click on the first icon(streaming icon) on the top left corner and this screen will appear: Click Next and select Stream if you want to live stream your gameplay or Record if you want to save the video to your phone and upload it later. Select the video format you want to upload/stream. Click next, you'll see a tips screen, read it and click next. Now, Select the game you want to stream or record. Add the st

    Dynamic Form and Grid with C# in WPF

    Ever wanted to generate the form & grid dynamically and add data from some data source? Here's to help you. Create a WPF project in Visual Studio. Add a UserControl and name it mainUserControl.xaml Now add a stackpanel just like this : <UserControl x:Class="TestApp.mainUserControl" xmlns="" xmlns:x="" xmlns:mc="" xmlns:d="" xmlns:local="clr-namespace:SaiData.TestApp" mc:Ignorable="d" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="5*"/> <ColumnDefinition Width="43*"/> </Grid.ColumnDefinitions>