diff --git a/.github/workflows/github-pages.yaml b/.github/workflows/github-pages.yaml new file mode 100644 index 0000000..122bfd5 --- /dev/null +++ b/.github/workflows/github-pages.yaml @@ -0,0 +1,73 @@ +# Dockerでビルドしたpackageをgithub-pagesにホストする +on: + push: + # branches: + # - master + + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +# env: +# GITHUB_CONTAINER_REGISTRY_TAG: ryosukedtomita/github-pages-test-docker +# IMAGE_NAME: react-app + + +jobs: + build: + runs-on: ubuntu-latest + environment: + name: staging + + steps: + - name: Checkout repository + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + - name: Update homepage in package.json + run: | + sed -i 's#"homepage": ".*"#"homepage": "${{ vars.REACT_APP_HOMEPAGE}}"#' package.json + + # dockerでbuildしたパッケージをローカルにコピーする。 + - name: Build app with docker + env: + GH_TOKEN: ${{ secrets.token }} # gh用 + run: | + # environmentにあった名称でenv_fileを作成し，github actions environment variableを書き込み + # NOTE: env_fileはgitで管理したくないため，workflow実行時に作成している。 + environment=staging + env_file=".env.${environment}" + touch $env_file + cat <> $env_file + $(gh variable list --env ${environment} | awk '{print $1"="$2}') + EOF + echo ----[DEBUG]: CHECK $env_file---- + cat $env_file + echo ----[DEBUG]: END---- + docker buildx bake --set react-app.args.BUILD_ENV=${environment} + docker compose up -d + docker compose cp react-app:/usr/share/nginx/html build + + # Deploymentsにupload + - name: Upload artifact + uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1 + with: + path: ./build + + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + timeout-minutes: 10 + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5 diff --git a/Dockerfile b/Dockerfile index a861e58..ac3e172 100644 --- a/Dockerfile +++ b/Dockerfile @@ -12,12 +12,13 @@ RUN < [!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](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs). -> デモ環境に対して`copilot-cli`で作ったAWS環境を維持するのにお金がかかるのはもったいないので，以降は`github-pages`を使ってデモを動かそうと思います。[このブランチ](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs)をアーカイブを残してあります。 +> デモ環境に対して`copilot-cli`で作ったAWS環境を維持するのにお金がかかるのはもったいないので，以降は`github-pages`を使ってデモを動かそうと思います。[このブランチ](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs)をアーカイブとして残してあります。 1. [PREPARING](#preparing)の設定を先にやる。 2. commit時にはpre-commitとgit-secretが作動。 @@ -83,10 +83,14 @@ Sample React application for Trying to Use DevSecOps tools. - [Personal access tokens](https://github.com/settings/tokens)を作り，repository secretsに登録する。 TODO: 一旦これくらいで作成。もっと権限しぼれるかも -![personal acccess token例](./doc/fig/pat.png) +![personal acccess token例](./doc/fig/pat-gh.png) - repository secretsに登録する。 ![Actions secrets and variables](./doc/fig/actions-secrets-set.png) +### GitHub Pagesの設定 + +[./doc/github-pages.md](./doc/github-pages.md) + ### GitHub Actions Variablesの設定 - Repositoryに[Environment](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs/settings/environments)を作る。 diff --git a/compose.yaml b/compose.yaml index 3a4af55..dcccbc4 100644 --- a/compose.yaml +++ b/compose.yaml @@ -1,5 +1,3 @@ -version: '3' - services: react-app: build: diff --git a/doc/fig/package.png b/doc/fig/package.png new file mode 100644 index 0000000..8fbf9e1 Binary files /dev/null and b/doc/fig/package.png differ diff --git a/doc/fig/pat-gh.png b/doc/fig/pat-gh.png new file mode 100644 index 0000000..23c33dd Binary files /dev/null and b/doc/fig/pat-gh.png differ diff --git a/doc/fig/pat-pages.png b/doc/fig/pat-pages.png new file mode 100644 index 0000000..83a74ab Binary files /dev/null and b/doc/fig/pat-pages.png differ diff --git a/doc/github-pages.md b/doc/github-pages.md new file mode 100644 index 0000000..bcb5000 --- /dev/null +++ b/doc/github-pages.md @@ -0,0 +1,38 @@ +# GitHub-pagesを使う + +## 初期設定 + +### package.jsonに設定追加 + +```json +# FIXME: 自分のリポジトリ名と同じにする + "homepage": "https://ryosukedtomita.github.io/<リポジトリ名>", +``` + +> [!NOTE] +> ローカルで`docker compose up`とかした際にhomepageが設定されているとうまくいかないの2024/08/04現在ではgithub actionsのyaml内でpackage.jsonを編集している。 + +### GitHub側の設定 + +- リポジトリの設定からPages --> Build and deploymentをGitHub Actions を選択する。 + +> [GitHub Pages](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs/settings/pages) + +--- + +## github pagesにデプロイ + +`git push origin master`後に[package.json](./package.json)に設定したurlにアクセスする。 + +--- + +## ERROR LOG + +### Branch "master" is not allowed to deploy to github-pages due to environment protection rules + +- github actionsのdeploy時に何故かdeployが失敗する。 +- おそらくバグだとおもわれ(2024/02/02)，Pagesの設定ページのSourceを一度Deploy from a branchに変更してBranchをmainからmasterに変更した後，再度SourceをGitHub Actionsに変更したら直った。 + +### テスト用ブランチからもgithub pagesにデプロイしたい + +- [repositoryのsettings](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs/settings/environments)からprotection ruleを変更し，ブランチ名を追加する。 diff --git a/nginx.conf b/nginx.conf index c5e19cc..ba09c3d 100644 --- a/nginx.conf +++ b/nginx.conf @@ -53,32 +53,4 @@ http { location = /50x.html { } } - -# Settings for a TLS enabled server. -# -# server { -# listen 443 ssl http2; -# listen [::]:443 ssl http2; -# server_name _; -# root /usr/share/nginx/html; -# -# ssl_certificate "/etc/pki/nginx/server.crt"; -# ssl_certificate_key "/etc/pki/nginx/private/server.key"; -# ssl_session_cache shared:SSL:1m; -# ssl_session_timeout 10m; -# ssl_ciphers PROFILE=SYSTEM; -# ssl_prefer_server_ciphers on; -# -# # Load configuration files for the default server block. -# include /etc/nginx/default.d/*.conf; -# -# error_page 404 /404.html; -# location = /404.html { -# } -# -# error_page 500 502 503 504 /50x.html; -# location = /50x.html { -# } -# } - } diff --git a/package.json b/package.json index 6fe17e2..53762f0 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "frontend-app", "version": "0.1.0", "private": true, + "homepage": "", "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", diff --git a/run_local_example.sh b/run_local_example.sh index 08bae27..e2fe125 100755 --- a/run_local_example.sh +++ b/run_local_example.sh @@ -12,12 +12,14 @@ # docker run -p 80:8080 react-app:latest # -p localport:containerport # -----composeを使う----- +# buildxを使わない場合の引数の設定方法 +#docker compose build --build-arg BUILD_ENV=development + # .env.developmentでbuildxでbuild docker buildx bake --set react-app.args.BUILD_ENV=development # .env.productionでbuildxでbuild # docker buildx bake --set react-app.args.BUILD_ENV=production -# buildxを使わない場合の引数の設定方法 -#docker compose build --build-arg BUILD_ENV=production + # 起動 docker compose up