Deploy] Nuxt Github Pages

TaeJune Joung

2019-12-23

Nuxt

Deploy, Nuxt

Settings

vue를 설치하기 이전에 Node.js가 필요하다.

처음해보는 사용자라면 https://nodejs.org/ko/에서 LTS 버전 다운받기를 권한다.

1
2

npm install -g @vue/cli #vue 3이상의 버전을 사용할 수 있다. 2019.12.23일 기준으로 4버전
npm i -g @vue/cli-init #vue 2버전을 가져오려면 이렇게 하면 된다. i는 install의 약자

아래의 내용들은 npm으로 진행한 후에 yarn으로 처리한 내용들이다.

그렇기에 yarn으로 진행하여도 무관하다.

결론부터 얘기하자면 yarn을 쓰는 것이 좋다.

yarn은 페이스북, 구글의 일부 엔지니어가 만들었다고 한다.

Performance(속도): yarn >= npm

속도에서는 yarn이 더 빨랐으나, 현재는 차이가 거의 없다고 함
Stablility(안정성): yarn == npm
Security(보안성): yarn >= npm

페이스북에서 yarn을 개발한 메인이유라고 한다.

npm은 패키지 설치시 자동으로 코드와 의존성을 실행할 수 있도록 허용되어 있기에 편리하나, 안정성의 위험이 있다. yarn은 yarn.lock이나 package.json으로부터 설치만 한다. 이로 인해 버그의 양이 많이 줄었다고 한다.

yarn create nuxt-app myapp
# npx create-nuxt-app myapp
yarn install
# npm install

nuxt.config.js

(테스트결과 아래의 내용을 틀리게 했는데도 진행되는 것보니 필요없을 수도 있음.)

1	router: { base: '/레파지토리 이름/' },

github pages를 이용을 편리하게 하기 위해 push-dir를 설치하여 진행하자.

1 2	yarn add push-dir --dev # npm i push-dir --save-dev

package.json

1	"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"

이제 Git Repository에 기본적인 내용들을 저장하고 아래에 Command를 작성하면 완성

yarn generate
# npm run generate
yarn deploy
# npm run deploy

-npm vs yarn

-nuxt create

-yarn 커맨드 옵션

-nuxt deploy github pages