diff --git a/.github/workflows/github-pages.yaml b/.github/workflows/github-pages.yaml new file mode 100644 index 0000000..3f5d48a --- /dev/null +++ b/.github/workflows/github-pages.yaml @@ -0,0 +1,50 @@ +# Dockerでビルドしたpackageをgithub-pagesにホストする +on: + push: + # branches: + # - master + +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 + + steps: + - name: Checkout repository + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + + # dockerでbuildしたパッケージをローカルにコピーする。 + - name: Build app with docker + run: | + docker buildx bake --set react-app.args.BUILD_ENV=staging + 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/README.md b/README.md index 63dcfc9..a4643fc 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ 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](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..ed32d1a 100644 --- a/compose.yaml +++ b/compose.yaml @@ -5,7 +5,8 @@ services: build: context: ./ dockerfile: Dockerfile - image: react-app:latest + image: ghcr.io/ryosukedtomita/devsecops-demo-aws-ecs:latest + # image: react-app:latest container_name: react-app-container ports: - 80:8080 # localport:dockerport 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.png b/doc/fig/pat-gh.png similarity index 100% rename from doc/fig/pat.png rename to doc/fig/pat-gh.png 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..a5c1e7c --- /dev/null +++ b/doc/github-pages.md @@ -0,0 +1,55 @@ +# GitHub-pagesを使う + +## package.jsonに設定追加 + +```json +# FIXME: 自分のリポジトリに合わせて変更 + "homepage": "https://ryosukedtomita.github.io/react-app", +``` + +## GitHub 側の設定 + +- リポジトリの設定からPages --> Build and deploymentをGitHub Actions を選択する。 + +> [GitHub Pages](https://github.com/RyosukeDTomita/devsecops-demo-aws-ecs/settings/pages) + +## github actions の設定 + +dockerでコンテナを作成し，その中でbuildしたものをgithub-pagesに渡している。 + +### GitHub Container Registry にイメージを push する + +- Personal Access Tokenの作成が必用。アカウントの設定ページから，**Developer settings** --> Personal access tokens --> Tokens(classic) --> Generate new token (classic)から作成する([Personal access tokens](https://github.com/settings/tokens))。 +- この際にwrite:packages等の必用な権限をオンにする。自分は一旦以下のように設定。 + ![patの設定](./doc/fig/pat-pages.png) +- 表示されたトークンを保存する。自分は環境変数`GITHUBPAT`に保存した。 +- 試しにpushしてPATが有効であることを確認する。 + +```shell +# FIXME: 自分のGitHub Accountに合わせて変更 +# docker build -t ghcr.io/ryosukedtomita/devsecops-demo-aws-ecs:latest . + +echo $GITHUBPAT | docker login ghcr.io -u RyosukeDTomita --password-stdin +docker push ghcr.io/ryosukedtomita/react-app:latest +``` + +- うまくいけば[Packages](https://github.com/RyosukeDTomita?tab=packages)に保存されているはず。 +![packages](./doc/fig/package.png) + +#### GitHub Actions Secrets に PAT を保存 + +- settings --> Secrets and variables --> から変数名`PAT`で Repository secrets を登録する。 + ![Alt text](doc/fig/secrets.png) + +## github pagesにデプロイ + +just `git push origin master` and go to your own url set by [package.json](./package.json) + +--- + +## MEMO + +### 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 に変更したら直った。 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..cc6ac92 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "frontend-app", "version": "0.1.0", "private": true, + "homepage": "${REACT_APP_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..020f931 100755 --- a/run_local_example.sh +++ b/run_local_example.sh @@ -12,12 +12,12 @@ # 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