nuxt.jsで構築したSPAアプリをS3とCloudFrontで公開。AWS CodeBuildで自動ビルドしてみた。ログはSentryで。

brew update
brew install nodebrew
nodebrew setup

export PATH=$HOME/.nodebrew/current/bin:$PATH

nodebrew install-binary stable
nodebrew use stable
nodebrew list
brew install yarn --ignore-dependencies
yarn -v

$ yarn create-nuxt-app sample_nuxt_app
create-nuxt-app v2.8.0
✨  Generating Nuxt.js project in path_to_sample_nuxt_app
? Project name sample_nuxt_app
? Project description 説明文を入力
? Author name 著者を入力
? Choose the package manager Yarn
? Choose UI framework None（vuefyやbootstrapなど色々選べるが今回はデザインあるのでNoneを選択）
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLintとPrettier
? Choose test framework Jest
? Choose rendering mode Single Page App（サーバーレンダリングも選べるが今回はSPA）

$ cd sample_nuxt_app
$ yarn dev

$ ncu

$ yarn global add npm-check-updates

$ ncu
Checking path_to/sample_nuxt_app/package.json
[====================] 20/20 100%

 @nuxtjs/axios            ^5.3.6  →    ^5.5.4 
 nuxt                     ^2.0.0  →    ^2.8.1 
 @nuxtjs/eslint-config    ^0.0.1  →    ^1.0.1 
 @nuxtjs/eslint-module    ^0.0.1  →    ^0.2.1 
 babel-eslint            ^10.0.1  →   ^10.0.2 
 eslint                  ^5.15.1  →    ^6.0.1 
 eslint-plugin-import   >=2.16.0  →  >=2.18.0 
 eslint-plugin-jest     >=22.3.0  →  >=22.7.2 
 eslint-plugin-node      >=8.0.1  →   >=9.1.0 
 eslint-plugin-nuxt      >=0.4.2  →   >=0.4.3 
 eslint-plugin-promise   >=4.0.1  →   >=4.2.1 
 eslint-plugin-vue        ^5.2.2  →    ^5.2.3 
 babel-jest              ^24.1.0  →   ^24.8.0 
 jest                    ^24.1.0  →   ^24.8.0 
 vue-jest                 ^3.0.3  →    ^3.0.4 
 nodemon                 ^1.18.9  →   ^1.19.1 

Run ncu -u to upgrade package.json

ncu -u

rm -rf node_modules yarn.lock
yarn install

yarn add typescript ts-node @nuxt/typescript

export default {
  ...中身
}

import NuxtConfiguration from '@nuxt/config'

const nuxtConfig: NuxtConfiguration = {
  ...中身
}
export default nuxtConfig

build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        if (!config.module) return  // undefinedの場合、pushせずにreturnするように追加
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ],
    "paths": { "@/*": [ "./*" ], "~/*": [ "./*" ] },
    "target": "es2015",
    "strict": true,
    "module": "esNext",
    "moduleResolution": "node",
    "experimentalDecorators": true
  }
}

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
    'space-before-function-paren': [2, {
      'anonymous': 'always',
      'named': 'always',
      'asyncArrow': 'always'
    }],
    'comma-dangle': ['error', 'only-multiline'],
}

$ yarn add vue-class-component vue-property-decorator vuex-class

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'
@Component({
  components: {
    Logo
  }
})
export default class Index extends Vue {}
</script>

<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class Logo extends Vue {}
</script>

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

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    project: './tsconfig.json',
    ecmaFeatures: { "legacyDecorators": true }
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended',
    'prettier/vue',
    'prettier/@typescript-eslint'
  ],
  plugins: [
    'prettier',
    '@typescript-eslint'
  ],
  // add your custom rules here
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es6: true
  },
  parserOptions: {
    "parser": '@typescript-eslint/parser',
    "sourceType": "module",
    "project": './tsconfig.json',
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "legacyDecorators": true,
    },
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended',
    'prettier/vue',
    // 'prettier',
  ],
  plugins: [
    'prettier',
    '@typescript-eslint'
  ],
  // add your custom rules here
  rules: {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error",
    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
    'comma-dangle': ['error', 'only-multiline'],
  }
}

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::bucket_name/*"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:AbortMultipartUpload",
                "s3:DeleteObject",
                "s3:PutObjectAcl",
                "s3:ListMultipartUploadParts"
            ],
            "Resource": "arn:aws:s3:::bucket_name/*"
        },
        {
            "Sid": "VisualEditor2",
            "Effect": "Allow",
            "Action": [
                "cloudfront:UnknownOperation",
                "cloudfront:ListInvalidations",
                "cloudfront:GetInvalidation",
                "cloudfront:CreateInvalidation"
            ],
            "Resource": "*"
        }
    ]
}

#!/bin/bash

export AWS_ACCESS_KEY_ID="key_id_value"
export AWS_SECRET_ACCESS_KEY="secret_value"
export AWS_BUCKET_NAME="sample_bucket"
export AWS_CLOUDFRONT="UPPERCASEDID"
export AWS_DEFAULT_REGION="ap-northeast-1"

# nvm（node version manager）を読み込み、node（.nvmrc 内のバージョン）をインストールし、npm パッケージをインストールします。
[ -s "$HOME/.nvm/nvm.sh" ] && source "$HOME/.nvm/nvm.sh" && nvm use
# まだインストールされていない場合は npm をインストールする
[ ! -d "node_modules" ] && yarn install

yarn run generate
gulp deploy

chmod +x deploy.sh

echo "
# Don't commit build files
node_modules
dist
.nuxt
.awspublish
deploy.sh
" >> .gitignore

yarn add --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform
yarn global add gulp
yarn add gulp   (こっちもしないと使えなかった)

var gulp = require('gulp');
var awspublish = require('gulp-awspublish');
var cloudfront = require('gulp-cloudfront-invalidate-aws-publish');
var parallelize = require('concurrent-transform');

// https://docs.aws.amazon.com/cli/latest/userguide/cli-environment.html

var config = {

  // 必須
  params: { 
    Bucket: process.env.AWS_BUCKET_NAME
  },
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    signatureVersion: 'v3'
  },

  // 任意
  deleteOldVersions: false,                 // PRODUCTION で使用しない
  distribution: process.env.AWS_CLOUDFRONT, // CloudFront distribution ID
  region: process.env.AWS_DEFAULT_REGION,
  headers: { /*'Cache-Control': 'max-age=315360000, no-transform, public',*/ },

  // 適切なデフォルト値 - これらのファイル及びディレクトリは gitignore されている
  distDir: 'dist',
  indexRootPath: true,
  cacheFileName: '.awspublish',
  concurrentUploads: 10,
  wait: true,  // CloudFront のキャッシュ削除が完了するまでの時間（約30〜60秒）
}

gulp.task('deploy', function() {
  // S3 オプションを使用して新しい publisher を作成する
  // http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property
  var publisher = awspublish.create(config);

  var g = gulp.src('./' + config.distDir + '/**');
    // publisher は、上記で指定した Content-Length、Content-Type、および他のヘッダーを追加する
    // 指定しない場合、はデフォルトで x-amz-acl が public-read に設定される
  g = g.pipe(parallelize(publisher.publish(config.headers), config.concurrentUploads))

  // CDN のキャッシュを削除する
  if (config.distribution) {
    console.log('Configured with CloudFront distribution');
    g = g.pipe(cloudfront(config));
  } else {
    console.log('No CloudFront distribution configured - skipping CDN invalidation');
  }

  // 削除したファイルを同期する
  if (config.deleteOldVersions) g = g.pipe(publisher.sync());
  // 連続したアップロードを高速化するためにキャッシュファイルを作成する
  g = g.pipe(publisher.cache());
  // アップロードの更新をコンソールに出力する
  g = g.pipe(awspublish.reporter());
  return g;
});

./deploy.sh

$ yarn add @nuxtjs/sentry

  // •••
  modules: [ '@nuxtjs/sentry' ],
  sentry: { dsn: 'https://[email protected]/000000' }

  sentry: { dsn: process.env.SENTRY_DSN }

import { captureException } from '@sentry/browser'

captureException(new Error('Sentryから始まるエラーマネジメント'))