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へアップロードするのが綺麗だと思った。