📈

Nuxt×GitHubActions×Netlifyのプロジェクトを作成して、RESAS-APIのデータを取得するまで

2022/03/06に公開約8,100字

Nuxtプロジェクトの作成

公式ドキュメントに従ってNuxt.jsをインストールしていく。

create-nuxt-app

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

$ npx create-nuxt-app nuxt-resas

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

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

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

$ cd nuxt-resas
$ yarn dev

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

GitHubリポジトリと連携

リモートリポジトリ作成

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

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

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

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

$ 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

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の部分を変更すれば良い。

on:
  push:
    branches:
      - develop

GitHub Actionsでエラーがでた場合

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

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が生成される

npm install

RESAS-APIを利用する準備

RESAS-APIの利用者登録とAPIキーの発行

公式サイトから利用者登録を完了する。

ログインしてマイページにアクセスすると、一番下にAPIキーが表示されているのでメモ。

APIキーを環境変数として利用

プロジェクト直下に.envファイルを作成して、取得したAPIキーをRESAS_API_KEYとして記載しておく。

RESAS_API_KEY = '○○○○○○○○○○○○○○○○○'

Nuxtv2.13以降ならdotenvを利用しなくても、Nuxtの標準機能で環境変数を利用できる。

公式サイトにあるとおり、nuxt.config.jspublicRuntimeConfigを定義する。

publicRuntimeConfig: {
   RESAS_API_KEY: process.env.RESAS_API_KEY,
},

環境変数は$configのグローバルに定義されるので、どこからでも呼び出し可能。

GitHub Actionsで環境変数を利用

GitHub Actionsでビルドする場合、プロジェクト内で設定した.envは反映されないので、別途設定する必要がある。

GitHubのリポジトリにseacretを設定する

公式ドキュメントを参考に、SECRET 情報を登録する。

  1. リポジトリのメインページからSettings項目を選択し、設定ページに飛ぶ。
  2. 左のサイドバーからSecretsを押下する。
  3. New repository secretボタンを押下する。
  4. Nameに SECRET 情報の名前RESAS_API_KEYを、Valueに SECRET 情報を入力する。
  5. Add secretボタンを押下し、SECRET 情報を登録する。

workflowでseacretを読み込む

ワークフローのbuildセクションで、登録したSECRET 情報を呼び出す。
※詳しくは公式ドキュメント参照

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

nuxtjs/axiosのインストールと設定

APIを利用する場合、Promise ベースの HTTP クライアントである「axios」を利用することが多い。

ここでは、nuxt.js用のブラグイン「nuxt/axios」をインストールする。

インストール

yarn add @nuxtjs/axios

nuxt.config.jsで@nuxtjs/axiosを有効化する。

modules: [
  "@nuxtjs/axios",
],

RESAS-APIを利用するときの共通処理

公式ドキュメントに従って、baseURLとheader(API-KEY)を共通処理化する。

プラグインの作成

Nuxtプロジェクト内にplugins/resas.jsを作成。プラグインの詳細は公式ドキュメント参照。

export default function ({ $axios, $config }, inject) {
  const api = $axios.create({
    headers: {
      common: {
        Accept: 'application/json',
      },
      'X-API-KEY': $config.RESAS_API_KEY,
      'Content-Type': 'application/json',
    },
    data: {},
  })

  api.setBaseURL('https://opendata.resas-portal.go.jp')

  inject('resas', api)
}

RESAS-APIのAPI概要にあるとおり、APIのエンドポイントはhttps://opendata.resas-portal.go.jp/となるので、これをBaseUrlに設定している。

api.setBaseURL('https://opendata.resas-portal.go.jp')

また、headersの'X-API-KEY'にRESAS-API-KEYを設定する。(環境変数から取得する)

headers: {
  common: {
    Accept: 'application/json',
  },
  'X-API-KEY': $config.RESAS_API_KEY,
  'Content-Type': 'application/json',
},

最後に、injectで関数を共通処理化している。これで別のコンポーネントからthis.$resasで呼び出すことができる。

inject('resas', api)

プラグインの有効化

nuxt.config.jsでプラグインを有効化。

plugins: [
  { src: '@/plugins/resas', ssr: true, },
],

RESAS-APIのデータを取得

axiosの基本的な使い方(GET)

公式ドキュメントにあるとおり、クエリパラメータを指定する方法が2種類ある。

axios.getに指定するURLに直接記述する方法

axios.get('/user?ID=12345')

axios.getの第2引数に、オプション指定する方法

axios.get('/user', {
  params: {
    ID: 12345
  }
})

ここでは、②の方法を利用する。

都道府県一覧の取得

都道府県一覧をAPIから取得する。

共通化した this.$resasのgetメソッドを利用する。
APIのURLはapi/v1/prefectures、パラメータはなし。

const url = 'api/v1/prefectures'
const { data } = await this.$resas.get(url)

市区町村一覧の取得

市区町村一覧をAPIから取得する。

APIのURLはapi/v1/cities
パラメータを指定しない場合、全都道府県の市区町村一覧を取得する。

const url = 'api/v1/cities'
const { data } = await this.$resas.get(url)

特定の都道府県を指定したい場合は、パラメータにprefCodeをセットする。

const url = 'api/v1/cities'
const params = { prefCode: 28 }
const { data } = await this.$resas.get(url, { params })

Discussion

ログインするとコメントできます