시작하기

포트폴리오 사이트용으로 오픈소스 및 템플릿을 사용하려다 맘에 드는게 없어 직접 Nuxt.js + vuetify로 포트폴리오 정적 사이트를 만들었다. 정적 사이트를 빌드 및 배포하는 방법을 빠르게 공유하고자 한다.

Nuxt 공식문서를 들어가면 아주 자세히 설명되어 있으니 하나씩 따라해도 금방 이해가 될 것이다.


nuxt.config.js 설정

일단, 3가지만 설정하면 된다.

  • target : 배포 대상을 명시하는 프로퍼티이다. 정적 사이트는 static을 추가해야하며 기본값은 server이다.
  • router : base를 추가하지 않고 폴더를 배포한 경우 배포된 사이트를 방문하면 자산 누락으로 사이트가 작동하지 않을 수 있다. 이는 웹사이트가 루트가 아니라는 가정으로 넣어줘야한다. 나의 github repository가 'nuxt-test'이면 'nuxt-test'를 넣으면 된다.
  • env : baseUrl는 기본으로 사용될 Url을 기입한다. 즉 개발은 http://localhost:port에서 했어도 배포시 github repository의 이름이 경로에 추가되기 때문에 src경로들의 추적이 안될 수 있다.

추가적으로, 하나의 특정 리포지토리에 대한 GitHub 페이지를 생성하고 사용자 지정 도메인이 없는 경우 페이지의 URL은 다음 형식이 된다. http://<username>.github.io/<repository-name>.

export default {
  target: 'static', // 정적 웹사이트임을 명시 default is 'server'
  router: {
    base: '/<repository-name>/' // github repository name
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://domain/<repository-name>/'
  },
}


나의 repository 이름은 nuxt-test로 생성할 것이므로 아래와 같이 작성한다.

export default {
  target: 'static', // 정적 웹사이트임을 명시 default is 'server'
  router: {
    base: '/nuxt-test/' // github repository name
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://domain/nuxt-test/'
  },
}


소스코드 빌드 및 배포준비

Nuxt.js로 프로젝트를 생성하여 개발을 완료했다면, 이를 정적호스팅에 사용 될 소스코드로 build 해줘야 한다. Nuxt.js는 static용 build를 기능을 제공한다. 이 기능은 모든 경로의 .vue파일을 HTML 파일로 생성하고 정적으로 dist/ 디렉토리에 내보내준다. dist/에 생성된 코드들을 깃허브 페이지같은 정적호스팅에 배포하면 끝이다.


package.json의 scripts의 generate 명령어가 정적페이지로 build 해주는 명령어이다.

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
  },


정적 웹 배포 파일 생성

$ npm run generate

빌드 완료시 dist/ 폴더가 생성되고 하위에 배포 할 정적파일들이 생성된다.

image


github 배포 패키지

push-dir은 디렉토리의 내용을 원격 브랜치로 푸시해주는 패키지이다.

  • 디렉토리를 커밋할 필요가없다.
  • dist/로 빌드된 디렉토리를 gh-pages 브랜치로 push해준다.

여기서 가장 중요한건 gh-pages의 이름으로 로컬브랜치를 생성해야 된다는 점이다. 그리고 나서 master(main)로 브랜치를 이동하고 명령어를 실행해야한다.

npm install push-dir --save-dev

설치가 완료되면 package.json에 deploy script를 추가한다.

"scripts": {
  "dev": "nuxt",
  "generate": "nuxt generate",
  "start": "nuxt start",
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
}

여기까지 완료했다면 배포준비는 끝났다. 실습을 통해 배포해보자


배포 진행하기

github repository 생성하기

github repository 이름을 nuxt-test으로 생성한다.

image


로컬 저장소 및 gh-pages 브랜치 생성

로컬 저장소를 생성한다. 그리고 master 브랜치에 최초로 커밋을 해야 gh-pages 브랜치를 생성할 수 있다.
add .로 프로젝트 전체를 추가 및 커밋해준다.

$ git init
$ git add .
$ git commit -m "first commit"


gh-pages 브랜치를 생성한다. master 브랜치를 바라보고 있어야 명령어가 수행되므로 gh-pages을 바라보고 있다면 master 브랜치로 checkout한다.

$ git branch gh-pages
$ git branch -v
  gh-pages 9945a81 first commit
* master   9945a81 first commit


원격 리모트 연결

$ git remote add origin https://github.com/s-seongsik/nuxt-test.git
$ git remote -v
origin  https://github.com/s-seongsik/nuxt-test.git (fetch)
origin  https://github.com/s-seongsik/nuxt-test.git (push)


배포(deploy)하기

npm run deploy

배포가 완료되면 github 원격 저장소에 gh-pages 브랜치가 생성되고 그 안에 빌드한 dist 하위 파일들이 배포된다.

image


github 저장소에서 Settings - Pages 메뉴를 들어가면 github pages에 배포되어 접속이 가능한 것을 확인할 수 있다. 여기서 중요한건, Source가 바라보는 브랜치는 gh-pages여야 한다는 점이다. 그래야 도메인으로 올라간다.

image


접속하기

GitHub Pages에서 제공하는 호스팅에 접속하면 아래와 같이 잘 배포된 것을 확인할 수 있다.

image