이번에 리액트로 쇼핑몰 프로젝트를 연습삼아 만들어보게되면서 닷홈의 무료 호스팅을 신청해서
그 서버에 빌드한 파일을 올리는 방법으로 호스팅해주었다. 과정은 간단한데 로컬에서 파일을 빌드하고 닷홈서버의 html폴더에 빌드한 파일을 넣어주기만 하면되는거라서 간단하게 자동화가 가능할것같았다. 그래서 github action을 이용해서 업데이트 자동화를 해보기로 했다.
우선 깃허브에 코드를 올려주고 해당 리포지토리로 이동해준다.
리포지토리에서 Actions로가서 simpleworkflow를 검색한다음 configure를 클릭한다.
그러면 생성한 리포지토리의 .github/workflows 경로에 blank.yml 파일을 생성해주게 된다.
이제 이파일에 필요한 동작들을 작성해주면 코드가 푸쉬됐을때 깃허브에서 띄워주는 가상의 컴퓨터에서 입력한 동작들을 수행해준다
내가작성한 코드를 올려줄테니 참고해서 닷홈에 자동화로 올리는 걸 많이 시도해봤으면 좋겠다.
name: CI/CD Pipeline
on:
push:
branches:
- main # 메인 브랜치가 푸쉬될때 동작
jobs:
build:
runs-on: ubuntu-latest # 사용할 os 버전
steps:
- name: Check out code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '18' # 사용할 Node.js 버전을 설정합니다.
- name: Install dependencies
run: npm install # 프로젝트의 의존성 설치
- name: Build project
run: npx vite build # 프로젝트 빌드 명령어를 실행합니다.
- name: List dist directory contents
run: ls -al dist # 빌드된 파일의 폴더로 이동
- name: Install LFTP
run: |
sudo apt-get update
sudo apt-get install -y lftp # ftp 프로그램 설치
- name: Transfer files via SCP
env:
SERVER_HOST: ${{ secrets.SERVER_HOST }}
SERVER_USERNAME: ${{ secrets.SERVER_USERNAME }}
SERVER_PASSWORD: ${{ secrets.SERVER_PASSWORD }}
run:
lftp -u ${{ secrets.SERVER_USERNAME }},${{ secrets.SERVER_PASSWORD }} ftp://${{ secrets.SERVER_HOST }}:21 -e "
mirror -R dist /html;
bye
"
이렇게 설정하면 원격컴퓨터에서 노드를 설치하고 파일의 의존성을 설치한다음 빌드 하고 해당 파일을 원격지의 닷홈서버로 ftp프로토콜로 전송하게되는 코드이다.
vite를 사용해서 dist 폴더에 저장되는것같은데 build명령어나 의존성을 설치하는명령어는 사용하는 패키지 매니저나 명령어에 따라서 다르기때문에 자신의 환경에 맞춰서 써주면 될것같다. yarn을 이용하는사람은 yarn 명령어를 사용해야할테고..
닷홈은 ssh 를 열어놓지않기때문에 수작업으로 할때는 빌드한 파일을 파일질라로 닷홈서버에 옮겼는데 이렇게하면 메인 브랜치에 코드가 푸쉬될때 자동으로 빌드한파일을 닷홈의 /html폴더로 이동시켜서 코드만올려도 자동으로 업데이트 되는 효과를 볼수있다. 프로젝트가 복잡해지면 다른 추가적인 과정도 필요하게 될수도있지만 현재로서는 잘 동작하는듯하다.
'프론트엔드 정복기 > 리액트' 카테고리의 다른 글
| 리액트 쇼핑몰 만들기 - AI로 화면구성 (feat v0.dev) (0) | 2025.03.02 |
|---|---|
| 리액트 쇼핑몰만들기(프로젝트 세팅) (1) | 2024.11.10 |
| [React]25 Redux middleware( 리덕스 미들웨어 개념 ) (0) | 2023.01.31 |
| [React] react-redux part2 (todos추가) (0) | 2023.01.27 |
| [React] 24 상태관리 3 (react-redux) (1) | 2023.01.27 |
