+13

Setup Gitlab CI/CD ReactJS App lên AWS EC2

Xin chào, trong bài viết này mình sẽ hướng dẫn cách setup CI CD một project web ReactJS lên AWS EC2

Các bước chính

  1. Khởi tạo project ReactJS và push lên remote repository
  2. Tạo 1 EC2 instance dùng làm server để deploy project
  3. Tạo SSH key và cài các package cần thiết trên EC2 instance
  4. Tạo file .gitlab-ci-yml để deploy project lên EC2 instance
  5. Thưởng thức thành quả

1. Khởi tạo project ReactJS và push lên remote repository

Để khởi tạo project ReactJS đơn giản, mình sử dụng create-react-app:

npx create-react-app demo-cicd

Sau đó chạy thử project:

cd demo-cicd
npm start

Kết quả: image.png Để có thể push code lên remote repository, truy cập Gitlab và tạo project, ở đây mình đặt tên là demo-cicd. Sau khi tạo xong, ta làm theo hướng dẫn ở phần Push an existing folder (do chúng ta đã tạo project ở local):

cd demo-cicd
git init --initial-branch=main
git remote add origin git@gitlab.com:[your_username]/demo-cicd.git
git add .
git commit -m "Initial commit"
git push -u origin main

2. Tạo 1 EC2 instance dùng làm server để deploy project

Truy cập vào tài khoản AWS, vào phần service EC2: image.png Chọn Launch Instance: Screen Shot 2022-08-19 at 10.21.17.png Ở đây mình chọn Ubuntu 20.04 (bạn có thể sử dụng AMI với hệ điều hành khác) Các phần còn lại giữ nguyên cấu hình mặc định, chọn Launch Instance: Screen Shot 2022-08-19 at 10.23.19.png Tạo key pair (sẽ sử dụng để SSH vào EC2 instance nếu muốn access vào instance từ local machine), sau khi tạo, key pair sẽ được tải về.
Khi khởi chạy EC2 instance, AWS đã mặc định mở port 22 (SSH), tuy nhiên chúng ta sẽ cần mở thêm port 3000 do ứng dụng ReactJS của chúng ta chạy trên port 3000.
Chọn instance vừa tạo, chọn tab Security, tại phần Security groups, bấm vào security group bên dưới (trong tên có chứa "launch-wizard").
Taị phần Inbound rules, chọn Edit inbound rules, chọn Add rule. Chọn Type = Custom TCP, Port range = 3000, Source = Anywhere-IPv4, sau đó chọn Save rules.
Chờ một chút để EC2 instance được khởi tạo, đến khi cột Instance stateRunning là ta có thể access đến instance: Screen Shot 2022-08-19 at 10.25.13.png

3. Tạo SSH key và cài các package cần thiết trên EC2 instance

Chọn instance vừa tạo, chọn Connect, các tuỳ chọn sẽ hiện ra, ở đây mình sử dụng EC2 Instance Connect: Screen Shot 2022-08-19 at 10.28.54.png Terminal được mở ra ở tab mới: image.png Tiếp theo ta tiến hành tạo SSH key và add vào Gitlab
Việc tạo SSH key khá đơn giản, bạn có thể tham khảo bài viết này
Sau khi tạo, ta add SSH key và Gitlab:
Edit profile -> SSH Keys
Paste SSH keys (file .pub) vào mục Key và chọn Add key:
Screen Shot 2022-08-19 at 10.37.07.png Tiếp theo mình add Gitlab host vào known_hosts để khi tránh việc ask permission khi access Gitlab:

ssh-keyscan gitlab.com

Screen Shot 2022-08-25 at 16.34.35.png Copy giá trị đầu tiên của ouput, sau đó chạy:

echo [giá trị vừa copy] >> ~/.ssh/known_hosts

Như vậy là EC2 instance đã có thể truy cập vào project trên Gitlab.
Tiếp theo ta cần cài thêm git, node, npm. Tham khảo link sau (dành cho Ubuntu 20.04, các hệ điều hành khác cũng tương tự):

  1. install git
  2. install node
  3. install npm

4. Tạo file .gitlab-ci.yml để deploy project lên EC2 instance

Trước tiên, mình sẽ lưu địa chỉ IP của EC2 instance và key pair (đã download khi khởi chạy EC2 instance ở bước 2) vào Environment Variables của Gitlab để sử dụng trong file .gitlab-ci.yml
Chọn EC2 instance, tab Details, copy địa chỉ ở mục Public IPv4 address. Vào project Gitlab, chọn Settings => CI/CD, tại phần Variables, chọn Expand, Add Variable:
Key = EC2_IPADDRESS
Value = [paste địa chỉ IP vừa copy]
Chọn Add variable.
Copy content của file key pair đã download khi khởi chạy EC2 instance và add vào Environment Variables như trên, mình để Key = SSH_PRIVATE_KEY
Tại project trên Gitlab, chọn Set up CI/CD
Screen Shot 2022-08-19 at 10.49.30.png Sau đó chọn Configure pipeline. Gitlab sẽ tự generate ra 1 template mẫu, tuy nhiên ở đây để đơn giản mình sẽ chỉ dùng 1 stage là deploy:
Sửa nội dung của file thành như sau:

stages:
  - deploy

deploy:
  stage: deploy
  image: alpine
  before_script:
    - apk add openssh-client
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
  script:
    - ssh -o StrictHostKeyChecking=no ubuntu@$EC2_IPADDRESS "git clone git@gitlab.com:[your_username]/demo-cicd.git || true"
    - ssh -o StrictHostKeyChecking=no ubuntu@$EC2_IPADDRESS "cd demo-cicd && git pull"
    - ssh -o StrictHostKeyChecking=no ubuntu@$EC2_IPADDRESS "cd demo-cicd && npm i"
    - ssh -o StrictHostKeyChecking=no ubuntu@$EC2_IPADDRESS "cd demo-cicd && (npm start || true)"
    - echo "Application successfully deployed."

Sau đó chọn Commit changes và Gitlab sẽ chạy job mà ta định nghĩa trong file. Dưới đây là kết quả: Screen Shot 2022-08-25 at 10.33.48.png Giải thích: Pipeline bao gồm 1 stages có tên là deploy.
Taị stage deploy:

  • Sử dụng image (docker) alpine: bao gồm command apk để sử dụng openssh-client mà ta dùng trong script
  • Phần beforescript sẽ chạy đầu tiên: đoạn này chúng ta sẽ add key pair vào session hiện tại để có thể SSH được vào EC2 instance
  • Phần script bao gồm các command chính dùng để pull source code từ Gitlab và run

5. Thưởng thức thành quả

Để truy cập vào ứng dụng, mình sẽ dùng địa chỉ IPv4 của EC2 instance:
Chọn EC2 instance, tab Details, copy địa chỉ ở mục Public IPv4 address, mở trong tab mới và thêm ":3000" (port 3000), Enter:
Screen Shot 2022-08-25 at 10.46.51.png Thử chỉnh sửa file App.js và commit để xem sự thay đổi.
Đợi job chạy xong và đây là thành quả:
Screen Shot 2022-08-25 at 10.58.41.png

Vừa rồi mình đã trình bày cách setup CI/CD ReactJS app từ Gitlab lên AWS EC2. Cảm ơn mọi người đã đọc bài viết!


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.