Nuxtで作ったものをGithub.ioに自動デプロイするActionsを作ったお話
最近Nuxtに触ったのだけれど、pages
フォルダの構造がそのままルートになってくれたり、 Vue特有の簡単コンポーネントづくりができたりとイケてる子だなって思いました
どうせなら作ったものを自動でデプロイまでできれば楽しそうだと思い立ち、Github.ioなら簡単に公開できそうだなということで作りました。そんなお話。
ちなみに公式にNuxtをデプロイするためのActionsがあるので、この記事は完全に趣味の領域での作ってみたというお話
(なんか普通にGithub PagesのSourceのプルダウンをActionsにすると NuxtJSが出てきた。便利だね)
Github Actionsの動き
github actionsは以下の順に動かせば良いだけなので、結構シンプルに作れそうだ
- Nuxtで作った
.vue
ファイルたちを.html
の形に変換する - Github pagesの公開ディレクトリに配置する
- 配置したものをプッシュする
できたものがこれ。
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
フォルダのみなので自分でコミットしたことを検知してまた発火する無限ループは起きないようにしている。
.vue
ファイルたちを.html
の形に変換する
1. Nuxtで作った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