Circle CI から、S3 へ Nuxt Assets をアップロード

やりたかったこと

デプロイ時に、NuxtのAssetsファイルをS3にアップロードしたかった。

下の記事でやったようにしたらできたが、buildspec.yml がdockerのbuildとs3のuploadという二つの役割を持っているのはあんま良くない。 okadak1990.hatenablog.com

で、他の人はどうやってるか調べたら、Circle CIでやってたので、やってみた。

参考

この記事がわかりやすいです。 Nuxt.js+CircleCIで静的ページをAWSのS3へデプロイする - Qiita

自分でもやってみた

ちなみに、CircleCIの管理画面から、S3への put 権限を持ったアカウントを登録する必要があります。

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
references:
  commands:
    set_env: &set_env
      name: Set environment
      command: |
        ENV=development
        if [ ${CIRCLE_BRANCH} == "master" ]; then
            ENV=production
        fi
        echo "export ENV=${ENV}" >> $BASH_ENV

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:11.8.0

    working_directory: ~/workspace

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          key: projectname-{{ .Branch }}-{{ checksum "yarn.lock" }}

      - run:
          name: System information
          command: |
            echo "Node $(node -v)"
            echo "Yarn v$(yarn --version)"

      - run:
          name: Install dependencies
          command: yarn install

    #   - run:
    #       name: Run Linter
    #       command: yarn run lint

    #   - run:
    #       name: Run Test
    #       command: yarn run test

      - save_cache:
          paths:
            - node_modules
            - ~/.cache/yarn/
          key: projectname-{{ .Branch }}-{{ checksum "yarn.lock" }}

      - run: *set_env

      - run:
          name: Build assets
          command: |
            yarn build:${ENV}

      - persist_to_workspace:
          root: .
          paths:
            - .

  upload:
    docker:
      - image: cibuilds/aws:1.16.1

    working_directory: ~/workspace

    steps:
      - attach_workspace:
          at: .

      - run: *set_env

      - run:
          name: s3 upload
          command: |
            ENV=development
            if [ ${CIRCLE_BRANCH} == "master" ]; then
              ENV=production
            fi
            aws s3 cp .nuxt/dist/client/ s3://bucket-name/${ENV} --recursive --metadata-directive "REPLACE" --cache-control "max-age=31536000"

workflows:
  version: 2
  build_and_upload :
    jobs:
      - build:
          filters:
            branches:
              only:
                - master
                - develop

      - upload:
          requires:
            - build
          filters:
            branches:
              only:
                - master
                - develop

気づいてしまった...

Github に push があったら、Circle CI と、CodePipeline を走らせていた。 ということは、CodePipelineが、Circle CIのS3へのアップロードより先に終わる可能性がある... そうすると、assetsファイルが、404になるタイミングが発生するかもとのことで、断念... やっぱり、CodePipelineから、アップロード用のCodeBuild走らせて、S3へアップロードするのが綺麗だと思った。