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
     
    cache:
      paths:
        - 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.

    before_script:
      - 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.

    deploy_production:
      only:
        refs:
          - master
      stage: deploy
      environment: 
        name: production
      script:
        - 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.

    Comments

    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

    Give Her Wings - Women's day special

    Woman equality . A burning issue in the current world. How we can manage to get through this? an obvious answer is " Equal parenting to boy and girl." This is the base to start achieving the goal. Why differentiate the parenting to boy and girl? Giving boys all the freedom and for a girl its ban to go out alone! Isn’t there something wrong? Why should boys have all the fun? If you have a baby girl, it’s a blessing, cheer her, encourage her and protect her. Yes, it’s hard to be a parent of a girl child in this cruel minded culture where we read the news of acid attacks and rap every second day. Yes, it is the duty of every parent to make their children safe, But don’t be so overprotective that she feels the burden over her head. As Newton's third law, as hard as you push the spring, it’ll bounce back to you with the same force.  Give her freedom to be herself. If you gave her good sacrament than belief in her, she’ll not do anything wrong that ruin

    Electron app with AngularJs and MySQL Database

    Hello folks,  Do you know about Electron API (a GitHub repository, helping a web developer to make standalone cross-platform app)? The electron can make any web app to Desktop Application in all three major OS (i.e. Windows, Mac, Linux). Okay, enough intro about Electron, let's move on Problem... So, if you are an Angular Developer and you want to make a Desktop app having a database in MySQL, you came to right place!  The Directory structure should look like this : AngularElectronMySQL ->      -Electron      -WebApp (Angular app)      -Setup So, First Initialize your Angular project using angular-cli  (you can use also build it simply). Here, I am assuming that you completed your Angular Project and Built it. Just one more thing add a data-service for getting data from MySQL. Subscribe to the MySQL server (for our case: http://localhost:1024). After that, you need to copy the files from the built project to electron folder. I used npm like this :  Now, for Electr