이게 뭐야?

CircleCI 작업에서 Sass를 CSS로 변환하고 미니화하고 S3에 배포하는 데 필요한 설정을 정리한 것입니다.

목표

my_repositoy 리포지토리의 assets/css/style.scss 를 style.min.css 로 변환 및 미니화하고 S3 의 production-bucket 에 assets/css/style.min.css 로 배포합니다.

배포 파이프라인

리포지토리에 풀 요청

이 시점에서 실행되는 작업에서 Sass → CSS 전송이 실행됩니다.

결과를 스테이징용 S3 버킷에 배포

병합되는

마스터 브랜치의 경우 프로덕션 및 스테이징 S3 버킷에 각각 배포

그렇지 않으면 스테이징 버킷에 배포

필요한 설정

CSS 전송

트랜스파일용 태스크 러너로서 gulp를 이용합니다.

gulpfile.js

'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便利ですねー

참고

공식 Quick Start

공식 Creating Tasks

절대 넘어지지 않는 Gulp 4 입문(2019년판) 설치 및 Sass를 사용할 때까지의 단계

CircleCI

S3에 배포하는 것은 circleci/aws-s3 Orb

배포 중에 공용 액세스를 허용하려면 아래에 설명 된 버킷 설정이 필요했습니다.

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

참고

circleci/aws-s3

AWS 측 설정

IAM

deploy 그룹을 만들고 S3 전체 액세스 권한을 부여

circleci-user 사용자를 만들고 deploy 그룹에 속합니다

S3

배포할 버킷 만들기

블록 퍼블릭 액세스(버킷 설정)를 "(새/임의) 액세스 제어 목록(ACL)을 통해 허용된 버킷 및 객체에 대한 퍼블릭 액세스 차단"끄기

버킷 정책은 다음과 같습니다

버킷 정책

{
    "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/*"
        }
    ]
}

CORS 설정을 이하로 한다

앱 도메인과 S3 도메인이 다른 경우 필요

CORS 설정

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

참고

공식 Amazon S3 퍼블릭 액세스 블록 사용

공식 S3 Cross-Origin Resource Sharing (CORS)