Git Product home page Git Product logo

deploy-react-vercel's Introduction

Vercel에 React 프로젝트 배포해보기


개발 환경(Ubuntu)

Node.js, npm

# apt 명령을 통해 nodejs, npm 설치
sudo apt install nodejs
sudo apt install npm


# 버전 확인 : 옛날 버전이 받아짐 
node -v      
v12.22.9
 
npm -v
8.5.1

# n 을 npm에 글로벌 추가 후, lst 버전으로 node 버전 변경
sudo npm install -g n
sudo n lts

$ node -v   
v20.10.0
 
$ npm -v
10.2.3

yarn

# yarn 설치(https://yarnpkg.com/getting-started/install)
sudo corepack enable

# yarn 업데이트
corepack prepare yarn@stable --activate

리액트 프로젝트 생성(Create React App)

## create-react-app 으로 프로젝트 생성
yarn create react-app deploy-react-netlify

## 최신 yarn 버전과 create-react-app의 eslint 충돌 해결
yarn add eslint eslint-config-react-app --dev

.gitignore 처리

yarn에서 공식적으로 제공하는 솔루션

방법1: yarn의 zero install 을 사용할 경우

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

방법2: yarn의 zero install을 사용하지 않을 경우

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

배포

  • Vercel
  • 리포지토리 등록, 배포브랜치 설정을 해주면 해당 브랜치 푸시 과정에서 CD를 지원

deploy-react-vercel's People

Contributors

ttasjwi avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.