How to setup a production-ready Devops environment for React without a penny — Part 3
--
If you like me, have countless side projects, and want to deploy your project in industry-standard, but don’t want to spend too much money? I believe this series can help you.
In this series, I will teach you how to deploy your app in multi environment with CI/CD pipeline, using Firebase and Gitlab CI/CD only. And the most important part is, it costs ZERO dollar!
Part 1: Project setup and deployment
Part 2: CI/CD pipeline for auto deployment
Part 3: Multi-environment setup
In part 2, you have learnt how to automate your deployment using Gitlab CI/CD. Your web is finally goes live! Next thing you will want to do is to setup multiple environments for development and production. This is essential because we don’t want to mess up your in-progress work and the production. It would be a disaster if you pushed the new feature without proper testing, and those hidden bugs clash your site. In general, we need at least 2 environments: staging and production. In this article, we will discuss how to setup a staging environment and integrate with our previous CICD pipeline.
Step 1: Setup project in firebase
For a new environment, you need to create a new project in firebase by the same procedure in part 1. For the project ID, I suggest to use suffix to indicate the environment name. For example, if your project name is abc, then the project id will be abc-staging for staging environment. If you have multiple staging environment, this small trick can help you easily identify when you are using the firebase web console.
Step 2: Setup multiple project in your codebase
firebase allows you to setup multiple projects in the your codebase. All you need to do is to add .firebaserc
file in the root directory, with a simple JSON.
{
"projects": {
"prd": "abc",
"stg": "abc-staging"
}
}
Step 3: Update your CICD pipeline
If you follow my step to setup the CICD, you may notice I have setup prod-build
and prod-deploy
. For staging development, we can clone the same script for prod-build
and prod-deploy
and rename as staging-build
and staging-deploy
. If your image has no difference in production and staging, you may even skip the clone of staging-deploy
.
To make prod- and staging- works in their corresponding branches only, we use only
property in gitlab to indicate the dedicated branch. For example:
staging-hosting:
stage: deploy
script:
- firebase deploy --only hosting --token $FIREBASE_TOKEN
only:
- branch_staging
dependencies:
- staging-buildprod-hosting:
stage: deploy
script:
- firebase deploy --only hosting --token $FIREBASE_TOKEN
only:
- master
dependencies:
- prod-build
Step 4: Update your deployment script
Last but not least, you need to tell firebase which project you need to deploy when running the pipeline. firebase CLI has a flag -P
to indicate the project name. For example:
prod-hosting:
...
script:
- firebase deploy -P prd --only hosting --token $FIREBASE_TOKENstaging-hosting:
...
script:
- firebase deploy -P stg --only hosting --token $FIREBASE_TOKEN
The name of the project refers to the key in your .firebaserc
.
Final Words
You now have a running react app on the Internet, which is accessible by everyone! You don’t need to worry about the deployment procedure anymore, everything is be done by committing your code to a particular branch! If you want to test a new feature, push to staging branch. If your code is ready, push to master branch. Take a break, have some coffee, and is ready to share your amazing work to others. And the most important thing is, NO MONEY is needed!!