[Angular x AWS CI/CD] CodePipelineの構築 (Github main更新→build→test→deploy to S3)

  • SPA(Angular)をAWSのS3でホスティングする際のCI/CDについてのメモ
    • 今回はGithubのbranchの変更をトリガーとしてCodePipelineを動かす
  • Amplifyであればコマンド一発で自動構築できるが、Github Enterprise Serverのリポジトリをソースプロバイダーとして選択できないという弱点があるので、会社では結局使えないケースもある

Angular x AWS Codepipeline

実装の流れ

AngularPJやHosting環境(S3 bucket)を構築済みであることを前提として、Githubのmain branchの更新時に自動でng buildとS3へのデプロイが実行されるようにする

  1. 事前準備
    • Githubにリポジトリを作成
    • Angular PJを作成
    • Hosting環境の設定
      • S3 bucketやCloudFront Distribution
  2. buildspec.ymlの生成
  3. CodePipelineの構築

1. buildspec.ymlの生成

  • Angular Projectに直下にbuildspec.ymlという名称で設定ファイルを生成する

  • buildspec.yml

    • CodeBuildの設定ファイル
    • ここでbuildやtestなどのコマンドを実行させる
  • my-angular-pj/buildspec.yml

    • 以下では、build以外のtest等の工程は一旦コメントアウトしている
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      version: 0.2 # Codebuildの設定ファイル Angular PJの直下に必要

      phases:
      install:
      commands:
      - if [ -e /tmp/node_modules.tar ]; then tar xf /tmp/node_modules.tar; fi
      - npm install -g @angular/cli # Angular CLIをinstall
      - cd ./my-angular-pj # AngularPJ直下へ移動
      - npm install # AngularPJ配下にnode_moduleをinstallする必要がある
      #- npm ci
      # test時にchromeを利用可能にする場合には以下が必要
      #- curl https://intoli.com/install-google-chrome.sh | bash

      build:
      commands:
      #- npm run lint
      - npm run build --prod # buildを実行
      #- npm run test:ci
      #- npm run e2e:ci
      #- npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js
      #- npm audit

      post_build:
      commands:
      - tar cf /tmp/node_modules.tar node_modules
      artifacts:
      files:
      - '**/*'
      base-directory: ./my-angular-pj/dist/my-angular-pj # build時に生成されるアーティファクトのパス
      cache:
      paths:
      - /tmp/node_modules.tar
  • npm ciについて

    • npm ciを用いるとpackage-lock.json を使用してパッケージをインストールできる
  • chromeについて

    • testまで実行する場合は、Chromeをinstallする必要がある

CodePipelineの構築

  • AWS Console/CodePipeline/パイプラインの作成

  • パイプラインを作成する

    • 任意のpipeline名を入力
      1
      例: pjname-web-pipeline
    • サービスロールはデフォルトの設定で自動生成される
    • next
  • ソースステージを追加する

    • ソースプロバイダ
      • 今回はGithubを選択
        • バージョン1,2があり、2が推奨されている
      • Amplifyで構築する場合はここでGithub Enterprise Serverを選択できない
    • 接続
      • “Githubに接続する”から、任意のOrganizationとの接続を作成することができる
      • 一度作成した接続は、同様のOrganizarion配下の別リポジトリにも活用可能
    • リポジトリ名
      • 任意のリポジトリを選択
    • ブランチ名
      • mainを選択
    • 検出オプションを変更する
      • “ソースコードの変更時にパイプラインを開始する”でOK
    • 出力アーティファクト形式
      • 特別な要件が無ければ、CodePipelineのデフォルトでOK
    • next
  • ビルドステージを追加する

    • プロバイダー
      • AWS CodeBuildを選択
    • リージョン
    • プロジェクト名
      • “プロジェクトを作成する”で新たなプロジェクトを作成
  • ビルドプロジェクトを作成する

    • プロジェクトの設定
      • Project名、Descriptionを任意で設定
        • ex: my-angular-app-build-pj
      • 追加設定
        • PJ名や所有者程度はタグ付けしておく
    • 環境
      • 環境イメージ
        • マネージド型かカスタムイメージを選択
      • OS: Ubuntu
      • ランタイム: Standard
      • イメージ
        • ここは常に最新のものを指定する: aws/codebuild/standard:5.0
      • イメージのバージョン: 最新のものを指定
      • 環境タイプ: Linux
      • 特権付与
        • Dockerイメージを構築するか、ビルドで昇格されたアクセス権限を取得する場合は、有効化
      • サービスロール/ロール名
        • 自動生成されたロールがデフォで指定されている
    • Buildspec
      • Githubリポジトリ直下にbuildspecファイルがある場合は以下でOK
        • ビルド仕様: buildspecファイルを使用する
      • 今回はGitリポジトリ配下にAngularPJがあり、その直下にbuildspec.ymlを配置するため、以下のようにパスを指定する
        • ./my-angular-pj/buildspec.yml
    • バッチ設定
      • 今回は設定不要
    • ログ
      • CloudWatch Logs - オプショナル
      • グループ名,ストリーム名を定義
        • ex: xxxx-build-log-group
        • ex: xxxx-build-log-stream
      • S3
        • S3ログオプショナル: 今回は不要
    • CodePipelineに進む
  • 特に追加する環境変数が無ければ、next

  • デプロイステージを追加する

    • デプロイプロバイダ
      • Amazon S3を選択
    • リージョン/バケットから作成済みのホスティング用バケットを選択
    • デプロイする前にファイルを抽出する
      • こちらにチェック
    • next
  • 以上でパイプラインが生成される

    • パイプラインの画面に飛び、最初のビルド・デプロイ処理が開始される(buildspec.ymlファイルをgitにpushする前の場合は失敗する)

参考

関連記事

その他


@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×