[vue-cli] Vue 프로젝트 github pages에 배포하고 커스텀 도메인 적용하기
회사에서 vue 프로젝트를 github pages에 배포할 일이 생겨 오랜만에 배포해보았다. 금방 끝날 줄 알았는데 생각보다 사소한 에러가 있어 해결하는 시간을 가져야 했다.. 두세시간 정도 걸린듯하다.
(금요일에 배포하느라 집에 늦게가느라 슬프다...)
참고로 개발하는 환경 및 기술스택은 Vue3, yarn 등을 사용하고 있다.
vue 프로젝트는 일반적으로 gh-pages라는 라이브러리를 활용하여야 배포할 수 있다.
배포 방법
1. gh-pages 설치
npm install gh-pages --save-dev
yarn add gh-pages --dev무조건 dev 환경에 설치해야한다. package.json을 확인하여 devDependencies 아닌 다른 곳에 설치했다면 라이브러리를 삭제하고 다시 설치하자.
2. 레포지토리 생성
그냥 임의의 레포지토리를 생성해주면 된다.
3. 레포지토리 리모트
git remote add <remote-name> <repository-url>
이것도 그냥 명령어로 레포지토리를 연결해주면 된다. 이미 원격 레포지토리가 있는 경우에도 명령어로 원격 레포지토리를 추가해주자. origin 레포지토리가 이미 있으면 remote-name 부분에 임의의 이름을 지정해주도록 하자.
4. package.json 파일 수정
"homepage": "http://<gitHub아이디>.github.io/<레포지토리명>"이 부분을 추가해주고, scripts 하위에도 아래와 같이 명령어를 추가해준다.
"deploy": "gh-pages -d dist"이 부분을 추가할 때 주의할 점은 원격 레포지토리가 여러개인 상태라면 명령어 부분을 추가해서 git repository 저장소 위치를 지정해야한다.
나는 회사에서 사용하는 origin 저장소 외에 git Pages 배포용 원격 레포지토리를 따로 생성했으므로 이 과정이 필요했다.
-r https://github.com/<gitHub아이디>/<레포지토리명>이 부분을 dist 뒤에 붙여주면 된다.
또는 deploy 명령어에 빌드를 포함시켜도 된다. 이제 deploy 명령어를 실행해보자. cmd 창에는 Published 라는 상태가 노출된다.
5. git 레포지토리 설정 변경
이와같이 gh-pages 브랜치가 생성되었고, 빌드파일이 정상적으로 push 되었으면 마지막 git 사이트 내에서 설정만 남는다.
레포지토리 내의 settings > Pages 메뉴에서 deploy 브랜치를 gh-pages로 바꿔준다.
이제 최종적으로 url에 접속하여 정상적으로 배포가 되었는지 확인해보자.
참고로 git pages로 배포하면 기본 도메인은
https://<깃허브아이디>.github.io/<레포지토리명>/
으로 설정되니까 착오없이 확인해보자.
커스텀 도메인 적용
공식 오픈해야하는 서비스이므로 커스텀 도메인 적용이 필요했다.
내가 적용하는 도메인은 hosting.kr에서 구매한 도메인이여서 이를 기준으로 적용하였다. (도메인 제공 서비스마다 크게 방법은 다르지 않다.)
1. 도메인 DNS 설정
유형 A, 호스팅이름 @ 로 설정하여 아래의 아이피 주소들을 등록한다.
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
git Pages에서 사용하는 서버들 IP 주소값이다. 마지막으로는 도메인 유형 CNAME, 호스트이름 www, 도메인 값은 git pages에서 등록된 기본 도메인을 설정해줘야한다.
2. CNAME 파일 생성
gh-pages 브랜치에 package.json에 설정한 명령어로 라이브러리를 실행하여 배포를 실행하고 있는 방식이므로 CNAME 파일은 해당 브랜치 경로에 빌드되어 업로드된 파일로 포함되어야 한다.나는 vue 프로젝트를 배포하고 있으므로 vue config 파일 설정을 건드려주었다.
이 과정이 잘 안되서 조금 헤맸다.
우선은 작업하고있는 프로젝트 파일의 src root 디렉토리 경로에 CNAME 파일을 생성해준다. 명령어로도 가능하다.
echo 'exaple.com' > CNAMEexaple.com에 각자 원하는 커스텀 도메인을 입력해주면 된다.
그리고 이제는 vue.config.js 파일을 수정해주자. 아래와 같이 수정하면 이제는 CNAME 파일이 빌드파일에 포함된다.
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'CNAME'),
to: path.resolve(__dirname, 'dist'),
},
],
}),
],
},
publicPath: '/',
outputDir: 'dist',
});이렇게 설정하고 빌드 명령어를 실행해보면, copy-webpack-plugin에 대한 오류가 발생할 수 있는데, 그냥 npm install 또는 yarn add로 설치해주면 된다.
설치하고 deploy 명령어를 실행해보자. 정상적으로 동작했다면 커스텀 도메인이 설정되었는지 git 레포지토리에서 확인해보자.
3. Git Pages 도메인 확인
마찬가지로 레포지토리의 settings > Pages에 들어가면 된다.
사이트 도메인 주소가 'Your site is live at [주소]' 로 상단에 표기 된다. 이러면 정상적으로 적용된 것이다.
실제 사이트 주소에 접속했을 때 반영되기 까지는 수 분이 소요되므로 조금 기다렸다가 확인해보자.
마지막으로 TIP
모두 정상적으로 적용되었다면 접속한 사이트 내에서 확인해볼 점이 있다.
나는 vue-router로 앱을 라우팅하고 있는데, 새로 적용한 도메인에서 vue-router로 이동한 url에서 새로고침을 실행하면 사이트가 아예 404 에러가 나면서 표시되지 않았다.
혹시나 vue-router를 통해서 라우팅을 적용했다면, vue.config.js 파일에 다음과 같은 설정을 추가하여 새로고침된 페이지에서 404로 응답받지 못하도록 리다이렉트 시켜주자.
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'public/404.html'),
to: path.resolve(__dirname, 'dist'),
},
],
}),
],
},
publicPath: '/',
outputDir: 'dist',
});또한 public 경로 하위에 있는 404.html 파일을 다음과 같이 수정해주니, vue-router가 정상적으로 동작되었다.
<!doctype html>
<html>
<meta charset="UTF-8" />
<script type="text/javascript">
var path =
window.location.pathname + window.location.search + window.location.hash;
window.location.replace('/index.html?redirect=' + encodeURIComponent(path));
</script>
<body></body>
</html>사실 제일 좋은 해결법은 아닐 수 있지만 일단은 이렇게 적용해두었다.
혹시 더 좋은 방법을 발견한다면 차후에 반영할 계획이다.
react 또는 vue로 개발한 페이지를 Git pages로 배포한 후 커스텀 도메인을 적용하는 데에 참고가 되길 바란다.
