use github pages

RyosukeDTomita · Aug 4, 2024 · 13aef12 · 13aef12
1 parent d3b08d1
commit 13aef12
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 33 deletions.
diff --git a/.github/workflows/github-pages.yaml 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
@@ -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
@@ -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
diff --git a/doc/fig/pat.png → doc/fig/pat-gh.png b/doc/fig/pat.png → doc/fig/pat-gh.png
diff --git a/doc/fig/pat-pages.png b/doc/fig/pat-pages.png
diff --git a/doc/github-pages.md 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
@@ -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
@@ -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
@@ -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