Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/umanari145/blog_front
blog_front
https://github.com/umanari145/blog_front
cicd react
Last synced: 8 days ago
JSON representation
blog_front
- Host: GitHub
- URL: https://github.com/umanari145/blog_front
- Owner: umanari145
- Created: 2024-12-07T11:51:52.000Z (20 days ago)
- Default Branch: main
- Last Pushed: 2024-12-07T13:22:07.000Z (20 days ago)
- Last Synced: 2024-12-07T13:32:16.472Z (20 days ago)
- Topics: cicd, react
- Language: TypeScript
- Homepage:
- Size: 324 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# blog_front
# [blog](https://github.com/umanari145/blog)のfrontを切り出し
## ディレクトリ構成
- .github/workflows・・S3へのアップロード
### front
- build・・buildコマンド時に成果物が吐き出される場所
- public・・buildの元
- src・・実際のreactのソースが入っている
- class・・型
- layout・・htmlのパーツ
- pages・・routeから飛んできた時のページ
- parts・・Paginationなどのhtmlのパーツ
- App.tsx・・エントリーポイント
- .env・・ローカル用の環境変数(実環境はCICDで環境変数を入れるので)
プロジェクトスタート
```
docker exec -it blog_front_node sh
pwd /app
# プロジェクトの作成
npx create-react-app front --template typescript
frontディレクトリ以下にプロジェクト作られる
cd front
npm start ここでホットリロードができる
http://localhost:3000/ でアクセスできる
```
ビルド&成果物のデプロイ
```
cd /app/front
npm run build
# dockerの外
aws s3 sync build s3://skill-up-engineering
```
https://qiita.com/orange5302/items/2e005974d055b3c454d9
## 環境変数登録(GithubActions)
```
gh auth login
#ブラウザアクセスして認証取る
✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as umanari145
! You were already logged in to this account
source ../blog/infra/aws_configure.txt
gh secret set AWS_ACCOUNT_ID --body "$AWS_ACCOUNT_ID" --repo umanari145/blog_front
gh secret set AWS_ACCESS_KEY_ID --body "$AWS_ACCESS_KEY_ID" --repo umanari145/blog_front
gh secret set AWS_SECRET_ACCESS_KEY --body "$AWS_SECRET_ACCESS_KEY" --repo umanari145/blog_front
gh secret set API_ENDPOINT --body "$API_ENDPOINT" --repo umanari145/blog_front
gh secret set APP_DOMAIN --body "$APP_DOMAIN" --repo umanari145/blog_front
gh secret set S3_BUCKET_NAME --body "$S3_BUCKET_NAME" --repo umanari145/blog_front
```