Skip to content

Commit

Permalink
use github pages
Browse files Browse the repository at this point in the history
test2

test3

add debug

test4

test5

test6

update document
  • Loading branch information
RyosukeDTomita committed Aug 4, 2024
1 parent d64dd72 commit 87a07b7
Show file tree
Hide file tree
Showing 11 changed files with 123 additions and 36 deletions.
73 changes: 73 additions & 0 deletions .github/workflows/github-pages.yaml
Original file line number Diff line number Diff line change
@@ -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
5 changes: 3 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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が作動。
Expand Down Expand Up @@ -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)を作る。
Expand Down
2 changes: 0 additions & 2 deletions compose.yaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
version: '3'

services:
react-app:
build:
Expand Down
Binary file added doc/fig/package.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file added doc/fig/pat-pages.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions doc/github-pages.md
Original file line number Diff line number Diff line change
@@ -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を変更し,ブランチ名を追加する。
28 changes: 0 additions & 28 deletions nginx.conf
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
# }
# }

}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions run_local_example.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 87a07b7

Please sign in to comment.