React-Gitlab actions CI/CD Pipeline & Aws Integration (Bucket) #Part-1
Reference: https://www.youtube.com/watch?v=PGyhBwLyK2U
Extra Useful Docs:
This article includes 2 topic
- Gitlab (Gitlab)
- Aws (What about AWS ?)
Gitlab
Gitlab Steps
1 -)Create file .gitlab-ci.yml
2-)Determine stages:
3-) Merge settings (Sidebar > Settings >Merge requests):
- Fast-forward merge = checked
- Squash commits when merging > Encourage = checked
- Merge checks = Pipelines must succeed = checked
4-) Setup your repository protected branches:
5-)Determine scripts of stages ( ‘.build website’ means it is commented stage you should remove it like and it should be like: “build website”):
6-)Commit your changes (git add . && git commit -m “my commit” && git push)
7-)On the GitLab page sidebar has CI/CD -> Pipelines section. Click there and bottom of the main content you will see these stages are running(It can take 5 min. It depends on your stage scripts.)
8-) You can check which branch is in action with script of rules(https://docs.gitlab.com/ee/ci/variables/predefined_variables.html)
9-) Post deployment:
pull curl image => https://hub.docker.com/r/curlimages/curl
10-) Define variables in yaml file
11-) Staging point :
- Create a new bucket with named APP_NAME-staging
12-) Yaml file stages and production should look like
13-) Environments
- Deployment > Environments > new > production > URL(http://xyz.com)
- Deployment > Environments > new > staging> URL(http://xyz-staging.com)
- gitlab > variables > edit > environment scope > production & staging(what variable do you need to change) > update variable
- Select predefined variables from https://docs.gitlab.com/ee/ci/variables/predefined_variables.html
- curl $CI_ENVIRONMENT_URL | grep “Lidyana Crm”
Now our yaml file can be simpler than before:
Most simplified version :
14-)Artifacts
Let's add versioning configuration to our pipeline
- First, we must assign pipeline numbers to version variables with predefined variables of GitLab(CI_PIPELINE_IID)
- Then we can write our version in HTML file
- Then we can grep that file on build of stages process
- After we pushed your branch and when tests completed you should go to CI/CD > Pipelines > Stages (column) > click on $YOUR_STAGE_NAME(passed) > on the right side click on Job artifacts (browse) > then build > version.html and after you clicked that you should see this screen
15-) Manual deploy(it will required clicking the button on stages process) :
- This is the difference between continuous deployment & continuous delivery pipeline.
What about AWS?
1-) Create an Aws account https://aws.amazon.com/
2-) Create a bucket
3-)Create a user
4-)Get credentials AWS_ACCESS_KEY_ID, AWS_DEFAULT_REGION, AWS_S3_BUCKET, AWS_SECRET_ACCESS_KEY
5-) Gitlab->Settings->CI/CD-> Variables store credentials that AWS USER INFO provided you
6-) Aws Deploy Stage (you must find aws commands from https://hub.docker.com/r/amazon/aws-cli stage will register and build this image for us):
7-)Your bucket should be like this
8-) Our files are ready to deploy. Go to properties section and find Static website hosting (bottom of the page) option > click ‘edit’ > enable > index document, error document =>index.html > save changes
9-) At the same place Static website hosting you will find the hosting server you set like http://bartu-2022.s3-website-us-east-1.amazonaws.com
10-)On the link you will have 403 screen
11-) On the bucket page > click ‘permissions’ > Permission overview not public > click on Block public Access > Edit > uncheck all boxes > Save changes > write ‘confirm’
12-)You will see ‘Bucket Policy’ in the same page > Edit > right side pick s3 > GetObject
13-) Bucket Policy > JSON
Part 2
