Merge pull request #51 from RyosukeDTomita/feature/github-pages

Feature/GitHub pages

.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 <<EOF >> $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

Dockerfile

@@ -12,12 +12,13 @@ RUN <<EOF
 npm install
 if [ "$BUILD_ENV" = "development" ]; then
 echo "build mode = development"
-npm run build
+npm run build-dev
 elif [ "$BUILD_ENV" = "staging" ]; then
 echo "build mode = staging"
+npm run build-stg
 elif [ "$BUILD_ENV" = "productoin" ]; then
 echo "build mode = production"
-npm run build-dev
+npm run build
 else
 echo "build mode = unknown"
 exit 1

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)を作る。

compose.yaml

@@ -1,5 +1,3 @@
-version: '3'
-
 services:
   react-app:
     build:

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を変更し，ブランチ名を追加する。

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 {
-#        }
-#    }
-
 }

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",

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