이게 뭐야?

목표

배포 파이프라인

필요한 설정

CSS 전송

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const workDir = './assets/css';
sass.compiler = require('node-sass');

const compileSass = (cb) => {
  const options = {
    outputStyle: "expanded",
  };

  gulp
    .src(`${workDir}/style.scss`)
    .pipe(sass(options))
    .pipe(gulp.dest(workDir));

  cb();
}

const compileSassCompressed = (cb) => {
  const rename = require('gulp-rename'); // ファイル名にminを付けたいのでそれ用のモジュールを使います
  const options = {
    outputStyle: "compressed", // ここで圧縮指定
  };

  gulp
    .src(`${workDir}/style.scss`)
    .pipe(sass(options))
    .pipe(rename({
      suffix: ".min",
    }))
    .pipe(gulp.dest(workDir));

  cb();
}

exports.compileSass = compileSass; // こっちは使っていません
exports.default = compileSassCompressed;

$ npx gulp
# npx便利ですねー

참고

CircleCI

version: 2.1
orbs:
  aws-s3: circleci/[email protected]

# 本番用デプロイとステージング用デプロイジョブそれぞれで同じ処理をするので、デプロイ処理をコマンド化しています
commands:
  deploy-to-s3:
    description: "Deploy Assets to S3"
    parameters:
      bucket_name:
        type: string
    steps:
      - checkout

      - restore_cache:
          keys:
            - my_repository-css-v0-{{ .BuildNum }}
            - my_repository-css-v0-

      # Deploy CSS assets to S3
      - aws-s3/copy:
          arguments: |
            --acl public-read \
            --cache-control "max-age=604800"
          from: assets/css/style.min.css
          to: "s3://<< parameters.bucket_name >>/assets/css/style.min.css"

# 本番用デプロイとステージング用デプロイジョブで同じDockerイメージを使うのでこっちもエグゼキューターとして定義しています
executors:
  deploy-executor:
    docker:
      # aws cliを使うので、pythonがないとだめです
      - image: cimg/python:latest

jobs:
  build:
    parallelism: 1
    working_directory: ~/my_repository
    docker:
      - image: circleci/node:9.11.2
    steps:
      - checkout

      - restore_cache:
          keys:
            - my_repository-npm-v0-{{ checksum "package-lock.json" }}
            - my_repository-npm-v0-

      - run:
          name: npm Install
          command: npm install

      - save_cache:
          key: my_repository-npm-v0-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules

      - run:
          name: Run Sass Lint
          command: ./node_modules/.bin/sass-lint -c config/.sass-lint.yml --verbose --no-exit

      - run:
          name: Compile Scss
          command: npx gulp

      - save_cache:
          key: my_repository-css-v0-{{ .BuildNum }}
          paths:
            - assets

      - store_test_results:
          path: test_results

  deploy-as-staging:
    working_directory: ~/my_repository
    executor: deploy-executor
    steps:
      - deploy-to-s3:
          bucket_name: "staging-bucket"

  deploy-as-production:
    working_directory: ~/my_repository
    executor: deploy-executor
    steps:
      - deploy-to-s3:
          bucket_name: "production-bucket"

workflows:
  build_and_deploy:
    jobs:
      - build
      - deploy-as-staging:
          requires:
            - build
      - deploy-as-production:
          requires:
            - build
          filters:
            branches:
              only: master

참고

AWS 측 설정

{
    "Version": "2012-10-17",
    "Id": "Policy1583424049389",
    "Statement": [
        {
            "Sid": "Stmt1583424044685",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::アカウント名:user/circleci-user"
            },
            "Action": [
                "s3:DeleteObject",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::production-bucket/*"
        }
    ]
}

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

참고