⛰️

Nuxtで作ったものをGithub.ioに自動デプロイするActionsを作ったお話

2023/12/01に公開

最近Nuxtに触ったのだけれど、pagesフォルダの構造がそのままルートになってくれたり、 Vue特有の簡単コンポーネントづくりができたりとイケてる子だなって思いました

どうせなら作ったものを自動でデプロイまでできれば楽しそうだと思い立ち、Github.ioなら簡単に公開できそうだなということで作りました。そんなお話。

ちなみに公式にNuxtをデプロイするためのActionsがあるので、この記事は完全に趣味の領域での作ってみたというお話

(なんか普通にGithub PagesのSourceのプルダウンをActionsにすると NuxtJSが出てきた。便利だね)

Github Actionsの動き

github actionsは以下の順に動かせば良いだけなので、結構シンプルに作れそうだ

  1. Nuxtで作った.vueファイルたちを.htmlの形に変換する
  2. Github pagesの公開ディレクトリに配置する
  3. 配置したものをプッシュする

できたものがこれ

name: autodeployer
on:
  push:
    branches:
      - 'main'
    paths-ignore:
      - 'docs/**'

jobs:
  compiling:
    runs-on: ubuntu-latest
    defaults:
      run: 
        working-directory: ./autodeployer
    steps:
      - uses: actions/checkout@v3
      - run: yarn install
      - run: npm run generate -y
      - run: ls
      - run: rm ../docs -rf
      - run: mv dist ../docs
      - run: git add -A
      - run: git status
      - run: git config --global user.email "ci@rie_amasato"
      - run: git config --global user.name "Amasato CI"
      - run: git commit -m "auto deployer's push"
      - run: git push

0. 準備(もといActions発火条件)

github Actionsを発火させるための条件を指定する2行目のonでは、mainブランチにプッシュされた時に発火することにします。
ただし、ページとして公開する/docsフォルダはこのActionsで更新するものなので、paths-ignoreで監視対象から除外します。
これでNuxtのコードが変更されたときに自動でActionsが動いてくれるという寸法。
そしてこのActions自身のプッシュはdocsフォルダのみなので自分でコミットしたことを検知してまた発火する無限ループは起きないようにしている。

1. Nuxtで作った.vueファイルたちを.htmlの形に変換する

Nuxtではnpm run generateコマンドで.htmlファイルその他もろもろを生成できます
サーバー起動のnpm run devと同じ要領でコマンドを打ってやります。
この際、コマンドはプロジェクトファイルで打つ必要があるので、14行目でActionsがプロジェクトフォルダ(今回はautodeployer)に移動しておきます。
移動後、17行目のyarn installでライブラリを取得。続く18行目で.htmlファイルを生成します。
npm run generateではプロジェクト直下にdistフォルダが生成されてその中に.htmlファイルたちが生成されます。かんたん

2. Github pagesの公開ディレクトリに配置する

rm <前の名前> <後の名前>でリネームも一緒にやってしまおうという横着込みでの21行目mv dist ../docs

移動の際にすでにdocsフォルダがあると、docs/dist/<生成されたHTMLファイルたち>のようなフォルダができてしまうので、20行目であらかじめdocsフォルダは全削除してしまいます。ぬけめなく。

3. 配置したものをプッシュする

残りはシンプルに、git add -Aで変更点(追加したdocsフォルダ)をステージング、git configでコミット者の名前とメールアドレスの設定をしてプッシュします。
プッシュされたらあとはGithu.ioのほうでdocsフォルダの中身を表示してくれるという寸法。
実際にmainブランチにプッシュすると、自動デプロイとPages用のActionsがそれぞれ動いていることがわかる。(上からPages用、今回作った自動デプロイ、Pages用のActions)

変更と自動デプロイ用のアクションで2回コミットする関係上、Pages用のActionsが2回出てきてしまうけれども、これでNuxtプロジェクトから自動で.htmlを生成してPagesで表示することができました。ということでこの記事はおしまい

あとはPagesのURLは設計から見たり独自ドメイン持つなり適当にやればおっけー

Discussion