Vite+Vue3+TypeScript+Vue RouterのプロジェクトをGithub Pagesでデプロイする

Vite+Vue3+Vue Routerのプロジェクトをgh-pagesというライブラリを使ってGithub Pagesで簡単に公開する方法とその時の注意点をまとめていきます。

## 環境
Node v14.18.0
yarn v1.22.5
@vue/cli 5.0.8
プロジェクト名 github-pages-test
https://github.com/daiki-gaasuu/github-pages-test/tree/main

## 1. プロジェクト作成
1. `yarn create vite プロジェクト名 --template vue-ts`でプロジェクト作成
1. `cd github-pages-test`プロジェクトに移動
1. `yarn`
1. `yarn add vue-router@4`※Vue3の場合はvue-router@4になります。
1. /src/viewsフォルダ配下にHome.vueとAbout.vueを作成

ここまででこんな感じ
![スクリーンショット 2022-10-15 6.59.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883547/40d830f5-392e-90f0-3fc8-00e25a29c405.png)


## 2. Vue-Routerの設定
1. /src/router/index.tsを作成
    ```javascript:src/router/index.ts
    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
    
    const routes: Array<RouteRecordRaw> = [
      {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
      },
    ];
    
    const router = createRouter({
      // Viteの環境変数でimport.meta.env.BASE_URL = vite.config.tsのbase
      history: createWebHistory(import.meta.env.BASE_URL),
      routes,
    });
    
    export default router;
    ```
    **自分が初めてGithub PagesにVite+Vue3のプロジェクトをデプロイする時に、ここでcreateWebHistoryの引数を何も設定していなかったのでローカル環境では動くのにビルドしてデプロイするとエラーもないまま画面が真っ白になるという事件でどハマりしました。**
    後ほど設定しますが、Github Pagesでデプロイするとルートが`https://アカウント名.github.io/リポジトリ名/`となるんですよ。つまりcrerateWebHistoryにベースは**リポジトリ名**ですよと指定する必要があったワケです。
    やっぱり公式ドキュメントは読むべきですね:innocent:
    https://router.vuejs.org/api/index.html#createwebhistory
1. main.tsにrouterを追加
    ```javascript:src/main.ts
    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    import router from './router' //追加
    
    //use(router)追加
    createApp(App).use(router).mount('#app')
    ```
1. App.vueを変更
    ```Vue:src/App.vue
    <script setup lang="ts"></script>
    <template>
      <div class="app" id="app">
        <router-view />
      </div>
    </template>
    ```
## 3. Viteの設定ファイル変更
production環境ではGithubのリポジトリをベースとする記述。
ここで設定するbeseの値が先ほど`router/index.ts`で書いたcreateWebHistory()の引数に入ります。
```javascript:vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  // 下記を追加
  base: process.env.NODE_ENV === 'production' ? '/github-pages-test/' : './',
  plugins: [vue()],
});
```
ここまでの設定でローカル環境では`yarn dev`した時にルートアクセスでHome.vueの中身、/aboutにアクセスでAbout.vueの中身が表示されるようになってると思います。

## 4. Github Pagesでデプロイ
ここからは作成したプロジェクトをGithub Pagesでデプロイする方法を解説していきます。
今回はgh-pagesというライブラリを使ってやります。
1. プロジェクトルートで`git init`
1. Githubでリポジトリ作成し下記画像にある部分のコマンドでローカルのファイルをリモートへpushする
![スクリーンショット 2022-10-15 8.37.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883547/224ae908-5928-3fc5-1f52-84e36693b9fd.png)
3. `yarn add gh-pages`
3. package.jsonにデプロイコマンド追加
    ```json:package.json
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "preview": "vite preview",
        "deploy": "gh-pages -d dist" //追加
    }
    ```
4. `yarn build`でビルド実行
4. `yarn deploy`でGithub Pagesでデプロイ
    ```
        yarn run v1.22.5
        warning ../../../package.json: No license field
        $ gh-pages -d dist
        Published
        ✨  Done in 9.85s.
    ```
上記のようなログが流れれば無事デプロイ完了です。
**自動的にgh-pagesというブランチが作成されて**いて、そこに`yarn build`で生成されたdistディレクトリ以下のファイルがpushされていることが確認できると思います。
また、Github上でSettings→Pagesの中を見ると自動で設定されていて**gh-pagesブランチのルート以下が公開**されるようになってますね。
https://daiki-gaasuu.github.io/github-pages-test/
![スクリーンショット 2022-10-15 8.47.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883547/0f26394f-9317-53e7-d8b5-b1007b4da623.png)
デプロイされたURLをクリックして問題なく表示されれば完了です！

## まとめ
- Vite+Vue3+Vue RouterのプロジェクトをGithub Pagesでデプロイするときは**vite.configのbaseを設定**忘れずに
- router/index.ts内のcreateWebHistory(**import.meta.env.BASE_URL**)引数base忘れずに
- gh-pages使うと`yarn build`→`yarn deploy`の２コマンドでデプロイできるって便利すぎ（もちろん１コマンドにまとめることも可能）

以上！