Awesome

DevSecOps demo React application for AWS ECS on Fargate

INDEX

• ABOUT
• FEATURE
• ENVIRONMENT
• PREPARING
• HOW TO USE
• ERROR LOG

ABOUT

Sample React application for Trying to Use DevSecOps tools.

[!WARNING] Since it costs money to maintain the AWS environment created with copilot-cli for the demo environment, I plan to use GitHub-Pages for future demos. I have archived this branch. デモ環境に対してcopilot-cliで作ったAWS環境を維持するのにお金がかかるのはもったいないので，以降はgithub-pagesを使ってデモを動かそうと思います。このブランチをアーカイブとして残してあります。

1. PREPARINGの設定を先にやる。
2. commit時にはpre-commitとgit-secretが作動。
3. push時にはGitHub ActionsによりSAST(semgrep)，UnitTest(jest)，Dependency Check(trivy)が実行される。
4. github-pagesにデプロイされる。 # TODO: more info

FEATURE

このRepositoryで学べること。

GitHub Actions等(git push後)で使用されるツールの使い方

• ghalint: GitHub Actionsで実行されるworkflows用のlinter
• github-comment: GitHub Actionsで実行されるCIが失敗したときにコメントとしてエラーを出力する。
• semgrep: GitHub Actionsで実行するSASTツール
• trivy: イメージのスキャンやdependency checkができる。dependency checkはGitHub Actionsで実行，イメージスキャンはTODO

GitHub Actionsのテクニック

• github-actoins.md
  • matrixでバージョンや環境を変えて並列テスト
  • pathsフィルター
  • GitHub Environments variablesやsecretsの使い方
  • WorkflowのバッチをREADME.mdにつける
  • CodeQLを使ってスキャン結果等を出力する
• zipを作ってartifactとして配置する
• RepositoryのReleasesを自動作成
• github-pagesにデプロイする。

GitHub Actions関連のバージョン管理ツールの使い方

• aqua: GitHub Actions等で使用するCLIツールのバージョン管理ができる。
• pinact: GitHub Actionsで使うactionsのバージョンをフルコミットハッシュに変換。

pre commit(git committ前)に使うツールの使い方

• pre-commit: git commit前に特定のツールを実行し，失敗ならcommitさせない。
  • hadolint
  • ESLint
  • Prettier(Formatter)
  • Markdown linter
• git-secret: git commit時にクレデンシャルのパターンにマッチするものがあれば，commitさせない。

VSCode Extensions(Securityに関係のありそうなものだけ抜粋)

• hadolint: Dockerfileのlinter
• markdownlint
• zenkaku: 半角スペースを可視化
• Code spell checker
• ESLint
• Prettier

その他細かいGitHubのテクニック

• CODEOWNERSの使い方 TODO: そのうちドキュメント化する
• RepositoryのTemplates関連
  • pull_request_template
  • ISSUE_TEMPLATE
  • reply template
• branchルールセットについて TODO: そのうちドキュメント化する

ENVIRONMENT

デプロイするアプリ

create-react-appで作られるデフォルトそのまま。

PREPARING

最初にやること

• Reopsitoryをforkしてcloneする。
• ghコマンドをインストールする。

GitHubの設定

RepositoryにEnvironment variablesを登録する

• RepositoryのsettingsからEnvironmentを作る。
• ローカルに3環境分の.envファイルを作成する。これによってブラウザからどの環境のアプリ化識別する。

# 作成
for environment in development staging production;
do
  touch .env.${environment}
  echo $REACT_APP_MESSAGE=${environment} > .env.${environment}
done

• github actions enrironment variablesに登録/更新する。

source ./update_github_actions_variables.sh

GitHub Actionsで実行したスキャン結果をアップロードできるようにGitHubリポジトリの設定を変更する

• GitHub Actionsがスキャン結果のファイルをアップロードできるようにGitHubリポジトリの設定を変更。詳細はsemgrepのyamlを参照。

GitHub Actionsでghコマンドを使うための設定

• Personal access tokensを作り，repository secretsに登録する。 TODO: 一旦これくらいで作成。もっと権限しぼれるかも
• repository secretsに登録する。

GitHub Pagesの設定

./doc/github-pages.md

その他ローカルにインストールするツール

• pre-commit
• git secret
• VSCodeのExtensionsもお好みでインストール。TODO: Devcontainer化する。

ERROR LOG

error.mdを参照。