「JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門」のメモアプリをGitHub ActionsでGitHub Pagesにデプロイしてみた。

はじめに

Stay HomeのGWということで、今年こそは何かしらの勉強をするぞ！！

という意気込みの元、たにぐち まことさんがUdemyにて公開している「フロントエンド技術入門」にチャレンジしてみました！

www.udemy.com

本来なら、全てのレクチャー（07:58:23）を最初から受けたいところですが、小さい子供がいる家庭ではそんな時間は取れるわけもなく。。

とにかく手を動かして、何かしらのSPAを作ってみようという事で、最後のコースである「Vue CLIで、SPAを開発しよう」のメモアプリを作成しました。

で、せっかくアプリ作るならデプロイを自動化するまでが開発！という事で、最後のレクチャーである「アプリケーションをビルドしよう」の続きで、GitHub Actionsを使ってGitHub Pagesで公開する方法の記事です。

作業

GitHubにnotepadプロジェクトを上げる

レクチャー通りに作業を進めていれば、「notepad」というディレクトリ配下でプロジェクトの開発を行っていると思います。

なので、GitHubでリポジトリを作成し、「notepad」配下の資産をpushします。

(注意：GitHub Pagesを使う場合はリポジトリをPublicで作成する必要があります。)

$ cd notepad
$ git remote add origin https://github.com/dehio3/vuejs-handson-notepad.git
$ git push -u origin master

vue.config.jsを追加する

GitHub Pagesで公開する場合、URLは以下になります。

https://username.github.io/repository

その為、そのままの設定では公開後のCSSなどが404で見つからずサイトが正しく表示されません。

対策として、vue.config.jsのpublicPathにrepository名を設定する事で、サブパスでのアクセスを可能にします。

vue.config.js

module.exports = {
    publicPath: '/' + process.env.GITHUB_REPOSITORY.split('/')[1]
}

GitHub Actionsではデフォルトの環境変数がいくつか存在し、その中のGITHUB_REPOSITORYにて、所有者名を含むリポジトリ名（例：octocat/Hello-World）を取得できます。

その為、publicPathに設定したいリポジトリ名を環境変数から動的に取得して設定しています。 （リポジトリ名だけを含む環境変数は見受けられませんでした。）

GitHub Actionsを作成する

デプロイを自動化する以下のworkflowを追加します。

.github/workflows/vue-deploy.yml

name: vue-deploy

on:
  push:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
      
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
          ${{ runner.os }}-build-${{ env.cache-name }}-
          ${{ runner.os }}-build-
          ${{ runner.os }}-

    - name: install
      run: npm install

    - name: build
      run: npm run build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist  # default: public

今回GitHub Pagesへのデプロイについては、actions-gh-pagesというActionsを利用しています。

github.com

buildを実行するとデフォルトでdist配下にソースが格納されるので、publish_dirには./distを設定しています。

GitHub Pagesを設定する

上記のGitHub Actionsのworkflowをpushすると、GitHub Actionsが実行され、gh-pagesというブランチが作成されます。

ブランチを切り替えてみるとわかりますが、これはactions-gh-pagesActionsにて作成された、./dist配下のソースだけが格納されたブランチです。

GitHub PagesではこのブランチをSourceとして設定します。

あとは、表示されているGitHub PagesのURLにアクセスすると、作成したメモアプリが表示されます。

まとめ

GitHub Pagesのパスによる問題は、他にも対処法があるようでしたが、なるだけレクチャーの内容には手を加えないようにする為、新規にvue.config.jsを追加する方法にしました。

また、汎用的に使えるようにpathについては、環境変数から値を設定できるようにしました。

Vue.jsについては、基本をすっ飛ばしてるので雰囲気だけ掴んだ感じなので、GW明けてからも空いた時間で少しずつレクチャーを進めて行きたいと思います！