Vue Application 구성 및 Git Actions 를 통한 배포

[Supergrammer]

---

💣 이슈 (Issue) :

Vue Application 구성 및 Git Actions 를 통한 배포

📋 업무 체크리스트 (Task Checklist) :

여기에 업무 체크리스트를 작성하세요.

• [x] Vue Application 구성 (Vue 3)
• [x] Git Actions 설정
• [ ] Git Actions 를 통한 배포

📜 상세 설명 (Description) :

Vue Application 을 구성하고, Git Actions 를 통해 Vue App 을 배포하는 작업

🔗 관련 이슈 (Related Issues) :

여기에 관련 이슈에 대해 기술하거나 링크를 첨부하세요.

📚 참고 (Reference) :

Create and Deploy a Vue.js App to Github Pages GitHub Actions로 Vue.js 자동 배포

---

✏️ 처리 내용

해당 이슈 처리 후, 처리 내용에 대해 기술하는 부분입니다. 이슈 처리 후 작성해 주세요

Vue 3 설치

% npm init vue@latest

% mv ./github-pages/* .
% npm install
% npm run dev

gh-pages 를 이용한 배포

% npm i --save gh-pages

package.json, vite.config.js 수정

• package.json

{
    "name": "github-pages",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "predeploy": "vite build",
        "deploy": "gh-pages -d dist"
    },
    "dependencies": {
        "gh-pages": "^4.0.0",
        "pinia": "^2.0.28",
        "vue": "^3.2.45",
        "vue-router": "^4.1.6"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.0.0",
        "vite": "^4.0.0"
    }
}

• vite.config.js

export default defineConfig({
    base: "/github-pages/",

    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
})

배포 스크립트 실행

% npm run deploy

> github-pages@0.0.0 predeploy
> vite build

vite v4.0.3 building for production...
✓ 44 modules transformed.
dist/assets/logo-da9b9095.svg        0.31 kB
dist/index.html                      0.45 kB
dist/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-81e4655a.css       4.18 kB │ gzip:  1.31 kB
dist/assets/AboutView-33131cd0.js    0.23 kB │ gzip:  0.20 kB
dist/assets/index-6fc56ef7.js       84.54 kB │ gzip: 33.25 kB

> github-pages@0.0.0 deploy
> gh-pages -d dist

Published

자동 생성된 pages-build-deployment GitHub Actions

---

[Supergrammer]

수동으로 Git Actions 를 트리거하는 부분은 작성 완료 추후 자동으로 Git Actions 를 사용하는 방법에 대해 고민해 봐야 함

[Supergrammer]

GitHub Pages 배포 후에, '/' 외에 다른 path 들을 인식하지 못하는 문제가 있음. 검색해 보니 react 의 router 에서도 같은 현상이 발생하는듯 함

[Supergrammer]

Git Actions 를 이용한 배포는 추후 다시 리서치 진행 필요