Nuxt.js+GitHub Actions+Netlifyでサイトを作成・公開

Nuxtプロジェクトの作成

公式ドキュメントに従ってNuxt.jsをインストールしていく。
下記の前提条件は満たしているものとする。

前提条件

create-nuxt-app

プロジェクト名は仮に「nuxt-resas」とする。

1
$ npx create-nuxt-app nuxt-resas

インストール時の設定は次のとおり。
ここではVuetifyをインストールしている。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in nuxt-resas
? **Project name:** nuxt-resas
? **Programming language:** TypeScript
? **Package manager:** Yarn
? **UI framework:** Vuetify.js
? **Nuxt.js modules:** (Press **<space>** to select, **<a>** to toggle all, **<i>** to invert selection)
? **Linting tools:** (Press **<space>** to select, **<a>** to toggle all, **<i>** to invert selection)
? **Testing framework:** None
? **Rendering mode:** Universal (SSR / SSG)
? **Deployment target:** Static (Static/Jamstackhosting)
? **Development tools:** (Press **<space>** to select, **<a>** to toggle all, **<i>** to invertselection)
? **What is your GitHub username?** [ここにGitHubアカウント]
? **Version control system:** Git

インストールが完了すると、ローカルにプロジェクト名のディレクトリが作成される。

build

プロジェクトのディレクトリに移動し、ビルドする。

1
2
$ cd nuxt-resas
$ yarn dev

ビルドが成功したらlocalhost:3000にアクセスする。
初回起動では下記画面が表示される。

GitHubリポジトリと連携

リモートリポジトリ作成

GitHubホーム画面のRepositories> Newから新規リポジトリを作成する。
Repository nameDescriptionを記入したら他の選択はせずに、Create Repositoryを押して完了する。
Repository name は任意だが、個人的にはいつもローカルのディレクトリ(ここではnuxt-resas)に合わせている。

リポジトリの作成に成功したら、画面にリモートURLが発行される。

ローカルリポジトリと連携

再びターミナルでローカルプロジェクトを開き、下記を実行。

1
2
3
4
5
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/******/nuxt-resas.git
$ git push -u origin master

これで、ローカルリポジトリとリモートリポジトリが連携できた。

GitHub ActionsでビルドしてNetlifyでデプロイする

Netlifyの無料プランではビルド時間が月300分までに限定されているため、比較的規模の大きいプロジェクトでは足りない可能性がある。
そこで、GitHub ActionsでビルドしてNetlifyにデプロイする方法を採用する。
Github Actions ではパブリックリポジトリは完全無料。プライベートリポジトリでも 2000 分/月までビルド時間を使うことが許されている。

NetlifyでアクセストークンとサイトIDを発行

アクセストークンの発行

Netlifyのアカウントページを開き、Personal access tokens内のNew access tokenへ移動する。
任意のトークン名を入力する。例えばGitHub ActionsとしてGenerate tokenをクリックするとアクセストークンが表示・発行されるのでメモしておく。

サイトの作成

Netlifyトップページに戻り、Sitesへ移動する。
ページ下部にDrag and drop your site output folder hereの欄が表示されているので、ここにNuxtプロジェクトのdistディレクトリをドラッグ&ドロップする。

サイトIDの発行

作成したサイトのSite settings内のSite detailsAPP IDが発行されているのでメモしておく。

GitHub Seacret にアクセストークンとサイトIDを設定

GitHubのリポジトリを開き、SettingsSeacretsからNew repository secretをクリックする。
NameとValueの組み合わせで値を設定できる。仮に次のように設定する。

  • NETLIFY_AUTH_TOKEN:アクセストークン
  • NETLIFY_SITE_ID:サイトID

GitHub Actions にworkflowを設定

最後に、GitHub Actionsのワークフローを設定する。
リポジトリ内の.github/workflowsディレクトリ にnetlify.ymlを作成する。GitHub Actionsから作成することもできる。
ワークフローについての詳細は公式ドキュメント参照。

workflow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
name: Netlify

on:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-18.04
env:
RESAS_API_KEY: ${{ secrets.RESAS_API_KEY }}


steps:
- uses: actions/checkout@v2

# 「./dist」にビルド結果が生成する
- uses: actions/setup-node@v1
with:
node-version: 14.x
- run: npm ci
- run: npm run build
- run: npm run generate

# Netlifyにデプロイする
- run: npx netlify-cli deploy --dir=dist --prod
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

ビルドするブランチを変更したい場合、on pushの部分を変更すれば良い。

1
2
3
4
on:
push:
branches:
- develop

GitHub Actionsでエラーがでた場合

GitHub Actionsで下記エラーが発生する場合がある

1
2
Run npm ci
npm ERR! cipm can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or later to generate it, then try again.

pakege.lock.jsonがないということなので、プロジェクトのディレクトリでnpm installするとpackege.lock.jsonが生成される

1
npm install