영화 앱 깃허브에 배포하기

package.json 파일 수정하기

homepage 키와 키 값을 browserslist키 아래에 추가합니다.

{
  "name": "movie_app_2025",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "6.6.3",
    "@testing-library/react": "16.2.0",
    "@testing-library/user-event": "14.6.0",
    "axios": "^1.7.9",
    "cra-template": "1.2.0",
    "prop-types": "^15.8.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.5",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://canine89.github.io/movie_app_2025",
  "devDependencies": {
    "web-vitals": "^4.2.4"
  }
}

 

이어서 package.json 파일을 열어 scripts 키값으로 명령어를 추가합니다.

{
  "name": "movie_app_2025",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "6.6.3",
    "@testing-library/react": "16.2.0",
    "@testing-library/user-event": "14.6.0",
    "axios": "^1.7.9",
    "cra-template": "1.2.0",
    "prop-types": "^15.8.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.5",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://sally.github.io/movie_app_2025",
  "devDependencies": {
    "web-vitals": "^4.2.4"
  }
}

 

최종 코드 깃허브에 업로드하기

최종 코드를 깃허브에 업로드합니다. 아래의 명령어를 입력하여 최종 완성 코드를 깃허브 저장소에 업로드합니다.

git add .
git commit -m "최종 완성 코드"
git push origin main

 

gh-pages 설치하기

깃허브에서 제공하는 GitHub Pages 서비스(무료)로 영화 앱을 배포합니다. 프로젝트 루트 폴더에서 다음 명령어를 입력하여 gh-pages를 설치합니다.

npm install gh-pages

 

깃허브 저장소 다시 확인하기

다음 명령어를 입력하면 여러분이 업로드한 깃허브 저장소의 주소를 확인할 수 있습니다.

저장소 주소에 있는 깃허브 계정 이름과 깃허브 저장소 이름을 확인합니다.이 이름들이 깃허브에 배포한 영화 앱 주소에 사용될 것입니다.

git remote -v
origin  https://github.com/sally/movie_app_2025.git (fetch)
origin  https://github.com/sally/movie_app_2025.git (push)

 

영화 앱 깃허브에 배포하기

터미널에서 다음 명령어를 입력하여 영화 앱을 배포합니다.

npm run deploy

 

Github Pages에 접속하여 영화 앱 확인하기

URL에 https://[깃허브 계정].github.io/[저장소 이름]을 입력합니다.