0. 환경
OS : Ubuntu 22.04 ver
서버엔진 : nginx
nodejs : 18.17 ver
리액트 프로젝트 배포
1. Ubuntu 원격접속 설정 및 확인
당연하게도 배포서버인 Ubuntu에 자동배포가 이루어지게 하려면
원격접속이 가능해야한다.
따라서 ssh 설정을 해주어야한다.
sudo apt update
sudo apt install openssh-server
sudo systemctl status ssh
기본적으로 22번 포트로 설정되어 접속할 수 있다.
보안을 위해서는 key를 생성하여 접속하는 것이 좀 더 권장되지만
편의상 계정/비밀번호를 위해 접속할 것이다.
윈도우라면 putty를 이용해서 정상적으로 원격접속이 되는지 확인해보는 것이 좋다.
2. Git repository에서 secret 등록
깃저장소에서 Ubuntu에 접속하기 위한 설정값들을 등록해주어야한다.
(Host 주소, 아이디, 비밀번호 등등..)
Repository에서 Setting - Secrets and variables 로 들어가서
New repository secret을 눌러 사용할 설정값을 입력한다.
Name은 변수명, Secret은 값이다.
예로 들자면 서버비밀번호가 asdf1234라면 아래와 같은 형태로 저장하면된다.
Name : SERVER_PASSWORD, Secret : asdf1234
여기서 우분투에 접속할 HOST 주소(ip주소), Username, Password, Port를 설정해둔다.
한번 설정하면 기존 입력값을 볼 수 없고, 오로지 새로 덮어쓰는 수정만 가능하다.
3. actions 등록
저장소의 actions 탭에서 New workflow를 눌러 새로운 작업을 등록한다.
set up a workflow yourself를 눌러 바로 등록창으로 이동한다.
위와 같은 편집창에서 액션설정을 할 수 있다.
나와 같은 경우에는 다음과 같이 설정을 하였다.
name: Deploy React App
on:
push:
branches:
- main # main브랜치에 푸쉬가 일어나면 실행되도록 설정
jobs:
deploy:
runs-on: ubuntu-latest # 작업환경 : Ubuntu 최신버전
steps:
# Build 전 pre-code-check (코드 검사)
- name: Checkout code
uses: actions/checkout@v2
# 필요한 package를 설치하고 build
- name: Install dependencies and build
run: |
sudo yarn install
sudo yarn build
# ubuntu 서버에 접속하여 빌드파일을 전송하고 배포된 파일을 교체
- name: Copy build directory to server
uses: appleboy/scp-action@master
with:
host: ${{ secrets.REACT_SERVER_HOST }}
username: ${{ secrets.REACT_SERVER_USER }}
password: ${{ secrets.REACT_SERVER_PASSWORD }}
port: ${{ secrets.REACT_SERVER_PORT }}
source: "./build/*"
target: "/home/user/myapp/"
script: sudo systemctl restart nginx 4. 자동배포 확인
해당 repository의 main branch에 push를 해서 push된 버전이 배포서버에 반영되는지 확인
