LoginSignup
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@harada-k

Nuxt.jsにTypeScriptを導入してCircleCIでGitHub Pagesへデプロイ

Last updated at Posted at 2020-03-03

初めて「Nuxt.jsにTypeScriptを導入してCircleCIでGitHub Pagesへデプロイ」してみたところ、欲張りすぎたため、いろんなところにハマった記録です。

ちなみに、わたしのスキル感はこんな感じ。初心者が頑張ってみた感じです。

  • Nuxt.js: Vue.jsは使っているが、Nuxt.jsは初めて使ってみる
  • TypeScript: 難しい型は分からない。。勉強し始めたばかり。
  • CircleCI（CI/CD）: 業務ではjenkinsを使用してビルド、デプロイしている。
  • GitHub Pages: 存在は知っているが、使ったことはない。

概要

  1. Nuxt.jsのプロジェクトを作成
    • TypeScriptも勉強中のため、ついでに組み込んでみる
  2. CircleCIを使ってビルド、GitHub Pagesへデプロイ

開発環境

node v10.13.0
yarn v1.21.1

教科書

基本的には、こちらの記事の手順に従ってやってみました。
CircleCIを使ってNuxt.jsをGitHub Pagesへデプロイする
https://qiita.com/yagi_suke/items/03a2411fdc3137ce657a

Nuxt.jsへのTypeScriptの導入は、こちらの記事に沿って進めました。
Nuxt.js PWA(Progressive Web Apps) のベースアプリをTypeScript対応する
https://riotz.works/articles/lulzneko/2019/05/10/typescripting-base-app-of-nuxtjs-pwa/

公式

CircleCI
https://circleci.com/docs/ja/2.0/getting-started/
バージョン 2.0

Nuxt.js
https://ja.nuxtjs.org/guide/
バージョン 2.11.x

Nuxt TypeScript
https://typescript.nuxtjs.org/guide/

完成したもの

Github
https://github.com/harada-k/nuxt-typescript
デプロイしたページ
https://harada-k.github.io/nuxt-typescript/

実装

STEP1：Nuxt.jsのプロジェクトの用意

まずは、Nuxtのインストール。
https://ja.nuxtjs.org/guide/installation
create-nuxt-app を利用してインストールしました（yarnを使用しました）。

$ yarn create nuxt-app <project-name>

TypeScriptの導入でハマったポイント

次に、TypeScriptを使ってみたいので、こちらの記事を参考にTypeScriptを導入します。
https://riotz.works/articles/lulzneko/2019/05/10/typescripting-base-app-of-nuxtjs-pwa/
Nuxt.jsもTypeScriptも初心者ですが、手順に従ってやってみます。

ところが、うまくいかない・・・（早すぎる躓き）。
Nuxt.jsのバージョンが、記事はv2.6.3、自分はv2.11.0だったのが原因でした。
Nuxt.js、バージョン2.9からTypeScriptのサポートが大幅に変更になったんですね・・・。
https://typescript.nuxtjs.org/guide/

公式の手順に従って進め、なんとか導入完了。
公式のドキュメント、大事！！

vueファイルをTypeScriptに書き換える際は、スクリプトベース（Vue.extend）で実装。

eslintの導入でハマったポイント

tsconfig.json、eslintの導入、設定などは、以下の記事を参考に実装しました。
https://qiita.com/tomopict/items/ced60c44203852faca0a

当初はnodeのバージョンを11.10.0にしていたのですが、、、

yarn add -D @typescript-eslint/eslint-plugin

上記のこちらのコマンドでエラー発生。。

error @typescript-eslint/eslint-plugin@2.22.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.10.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

nodeバージョンは、"^8.10.0 || ^10.13.0 || >=11.10.1"でやっておくれ、ということのようです。
10.13.0に変更したところ、無事にインストールできました。

ESLint公式にも書いてありますね。。
https://eslint.org/docs/user-guide/getting-started

余談

yarn install に --ignore-engines オプションを付けると、エラーを無視できるようになるそうです。

もしくは、configにセット。

yarn config set ignore-engines true

ただし、エラーを無視するだけなので、packageが指定するnodeバージョンで実行したほうが良いと思います。

ちなみに、package.jsonにenginesを指定すると、nodeなどのバージョンを固定できます。

package.json
{
  "engines": {
    "node": ">=10.14",
    "npm": ">=6",
    "yarn": ">=1"
  }
}

逆に言うと、typescript-eslintのpackege.jsonに、enginesの指定が入っていた、ということになりますね。
https://github.com/typescript-eslint/typescript-eslint/blob/master/package.json#L51

STEP2：CircleCIの設定

CircleCIへの登録は、Githubアカウントとの連携のみなので、問題なくクリア。

続いて、CircleCIの実行ファイル.circleci/config.ymlを作成してみます。

.circleci/config.yml
version: 2
jobs:
  lint:
    docker:
      - image: circleci/node:10.13.0
    steps:
      - checkout
      - restore_cache:
          keys:
            - yarn-{{ checksum "package.json" }}
      - run: yarn install
      - save_cache:
          paths:
            - node_modules
          key: yarn-{{ checksum "package.json" }}
      - run: yarn run lint
  deploy:
    docker:
      - image: circleci/node:10.13.0
    steps:
      - checkout
      - restore_cache:
          keys:
            - yarn-{{ checksum "package.json" }}
      - run: yarn install
      - run: git config user.name $GITHUB_NAME
      - run: git config user.email $GITHUB_EMAIL
      - run: yarn run generate:gh-pages
      - run: yarn run deploy:gh-pages
workflows:
  version: 2
  build-deploy:
    jobs:
      - lint
      - deploy:
          requires:
            - lint
          filters:
            branches:
              only: master

Docker Images

jenkinsでのビルド、デプロイは日常的に行なっているので、大体のイメージは掴めたのですが、Docker Imageは初めての遭遇。

Dockerとは？から学ぼうと思ったのですが、ぼんやりしたイメージしか掴めませんでした。。
https://www.ogis-ri.co.jp/otc/hiroba/technical/docker/part1.html
https://qiita.com/kotaro-dr/items/b1024c7d200a75b992fc

実際にDockerをインストールして動かしてみると良いとは思いますが、今回の主軸はそこではないので、一旦スキップ。。

開発環境（node.js v10.13.0）と同じimageを使えば良いのではないか？と理解し、CircleCIが提供しているビルド済みイメージから選びました。
https://circleci.com/docs/ja/2.0/circleci-images/#nodejs

Nuxt.jsのrouterの設定

.circleci/config.yml
run: yarn run generate:gh-pages

Nuxt.jsのrouterの設定は、公式の「GitHub Pagesへデプロイするには？」に詳しく書かれています。
https://ja.nuxtjs.org/faq/github-pages/

package.jsonのscriptsに、Github Pages向けにrouter設定してビルドを行うコマンドを追加します。

package.json
"generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt-ts generate",

このコマンドを、CircleCIのYAMLファイル内で呼び出して実行します。

.circleci/config.yml
- run: yarn run generate:gh-pages

gh-pagesパッケージの導入

gh-pagesブランチは、デプロイするものだけ（generate:gh-pagesコマンドで作成した、distフォルダの中身のみ）が入った状態にしたいので、gh-pagesパッケージを導入します。
https://www.npmjs.com/package/gh-pages

package.jsonのscriptsに、デプロイジョブを追加します。

package.json
"deploy:gh-pages": "gh-pages -d dist -m 'chore: update [skip ci]' -t",

このコマンドを、CircleCIのYAMLファイル内で呼び出して実行します。

.circleci/config.yml
- run: yarn run deploy:gh-pages

config.ymlの記述については、こちらの記事で理解を深めました。
https://qiita.com/gold-kou/items/4c7e62434af455e977c2#configyml

秘密鍵と公開鍵を登録する

「CircleCIのプロジェクトに追加する」「CircleCIに環境変数を設定する」は、手順通りでクリア。

次のハマりポイントは、「CircleCIに秘密鍵を登録する」でした。。

$ ssh-keygen -t rsa -b 4096 -C 任意の文字列 -f ./id_rsa # パスワードは空にすること

Githubに登録する公開鍵はすんなりクリアできたのですが、CircleCIに登録する秘密鍵が、エラーで登録できない！！

原因は、OpenSSH 7.8から、秘密鍵のヘッダの形式が変更になったことにあるようでした。

それ以前の秘密鍵は、OpenSSLのPEM形式で作成されていましたが、本バージョンからOpenSSHの形式がデフォルトとなり、秘密鍵のヘッダの形式が大きく変わっています。

PEM形式で作成するには、-m PEMオプションをつければOK。

ssh-keygen -t rsa -b 4096 -C "任意の文字列" -f ./id_rsa -m PEM

これで無事に秘密鍵が登録できました。。

よく見ると、CircleCIのドキュメントにも書いてありました。。。公式ドキュメント大事。。
https://circleci.com/docs/ja/2.0/gh-bb-integration/#github-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%AD%E3%83%BC%E3%81%AE%E4%BD%9C%E6%88%90

注意：最近 ssh-keygen は、デフォルトで PEM 形式のキーを生成しないようにアップデートされました。 プライベートキーが -----BEGIN RSA PRIVATE KEY----- で始まらない場合、ssh-keygen -m PEM -t rsa -C "your_email@example.com" でキーを生成すると、強制的に PEM 形式で生成できます。

まとめ

これで、masterブランチに変更をpushすると、自動でLint、build、deployが行われるようになりました。

Github
https://github.com/harada-k/nuxt-typescript
デプロイしたページ
https://harada-k.github.io/nuxt-typescript/

Lintジョブはmasterに限定していないので、featureブランチを切って修正を行い、リモートにpushした場合も、Lintジョブが走ります。
featureブランチからmasterブランチへPull requestを作成、masterにマージされると、自動的にビルド、Github pagesにデプロイされます。

フロー的にもわかりやすいし、便利です。

ハマりどころが他にもあるとは思いますが、何かのお役に立てたら幸いです。
今回の教訓は、「ハマったら公式！」

参考

いまさらだけどCircleCIに入門したので分かりやすくまとめてみた
https://qiita.com/gold-kou/items/4c7e62434af455e977c2

Nuxt v2.9.2でTypeScript, eslint, Prettier環境構築 + VSCodeの設定
https://qiita.com/tomopict/items/ced60c44203852faca0a

デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
https://engineering.linecorp.com/ja/blog/vue-js-typescript-otoshidama/

3分でつくる2019年版 Nuxt.js TypeScript 開発環境設定
https://qiita.com/hiropy0123/items/4ee85fdb9b19bc89056f

package.json の engine について npm と yarn の挙動の違い
https://blog.yukung.org/difference-between-the-behavior-of-yarn-and-npm-for-engine/

package.jsonに"engines"を設定すると「このバージョンのNode.jsでしか動かない」を表明できる
https://qiita.com/suin/items/994458418c737cc9c3e8

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?