私が忘れないために書いた秘訣!

入る前に知るべき概念

1.awsとは!

各種クラウドサービスの集合!ユーザーは、ここで必要なスタックを組み合わせてカスタムサーバを構築します.ec 2、s 3、cloudfront、IAMなど子供がたくさんいますが、すべてのことを知っている人はいないので、ゆっくりと親しくなればいいのです.

2.CI/CD=自動配置

持続的な幾何学的記憶(バージョン管理)と持続的な配布(遅延)を組み合わせた用語.彼らは疲れた開発者を助けるために来たのです.今の仕事はほとんど使うそうです.
これは配置パイプとも呼ばれ、最近では毎日数百回の自動配置に伴い、迅速で柔軟な開発方式が変化しています.

3.フロントエンド/バックエンド

フロントエンド導入は静的管理(CDN)であり、バックエンド導入にはサーバ(ec 2と呼ばれる)を使用する概念も含まれている.この場合、awsが提供するCloudFrontとして静的管理を使用すると、直接使用するよりも少し安全で迅速です.

4.反応中の注意事項

SPAリアクターがファイルパスの設定がうまく行われていない場合は、bucketでファイルが見つからないため、多くのエラーが発生することに注意してください!

実際の操作手順

注意:https://blog.doitreviews.com/development/2021-08-13-react-automatic-deploy/
このブロガーは90%近くの仕事をした.

43パケット作成
S 3 bucketを作成するとすべてのパブリックアクセスが切断されます.セキュリティルールは少しも心配しないでください.どのbucket名でもいいですが、繰り返すことはできません.後で鍵に書くので、注意してください.

地区はソウル:ap-東北-2固定.これをメモしておきなさい

43 bucketの名前もメモしてください.

CloudFront接続性
CloudFrontコンソールにアクセスして新しいリリースを作成します.

Origin domain:作成したS 3パケット名

S 3 bucket access:新しいAIを作成し、bucketルールの更新を確認する

Default cache動作:この2つのチェック
Viewer protocol policy: Redirect HTTP to HTTPS,
Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

Alternate domainname:ドメイン作成時に挿入

証明書:作成後に挿入

生成後、CloudFrontのIDも記入します.

S 3のBucketポリシーに移動して、セキュリティルールにCloudFront例外がないことを確認します.

自動配置用IAMの作成

UserName : github-action-deploy

Access type : Programmatic access

既存のポリシーとの直接接続をクリックし、2つのポリシーで選択して表示します.
AmazonS3FullAccess
CloudFrontFullAccess

Create Userをクリックして、表示されたidと鍵をメモします.
(これまでパケット名/クラウドフロントエンドID/アクセスID/鍵/地域)

ここまで来て、私が作ったリポジトリに行ってSettingsラベルを開きます.

下に「Secrets」タブがあります.ここに5つのキーを入力します.

AWS_ACCESS_KEY_ID: 배포를 위해 이번에 생성한 IAM 유저의 Access key ID
AWS_REGION: S3의 region
AWS_SECRET_ACCESS_KEY: 배포를 위해 이번에 생성한 IAM 유저의 Secret access key
DEV_AWS_DISTRIBUTION_ID: CloudFront Distribution Id
DEV_AWS_S3_BUCKET: S3 버킷 이름

空白なしで入力する必要があります!!

は私のプロジェクトディレクトリにあります.github/workflowsフォルダを作成して開発します.ymlファイルを作成します.

そのまま貼り付けます!
私の少し修正したコードによって詳細はブログで.

name: development deployment

on:
  pull_request:
    branches:
      - main
    types: [closed]

jobs:
  deploy:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-versions: [16.x]

    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2

      - name: Install Dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Deploy to S3
        run: aws s3 sync build/ s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete

      - name: Invalidate CloudFront Cache
        run: aws cloudfront create-invalidation \
          --distribution-id ${{secrets.DEV_AWS_DISTRIBUTION_ID}} --paths "/*"

今勝手に1つ提出してから、fuliqueを受け入れるようになりました!
バックエンドに接続するためにcors設定などをするようですが、先に設定を完了!

問題シュート

package.Buildスクリプトをjsonから置き換える

からS 3に配備するフォルダディレクトリ構築/置換

.

ノードバージョン/名前変更ブランチ

ダウンジャケットSecretsラベルページ

ここまで来ると、配送は良いのですが、bucketでは反応物が見つかりません.

CloudFrontルート/index.html

を追加

CloudFrontエラーページで、403、404エラー中/index.htmlリダイレクトを追加!
https://leonkong.cc/posts/til-react-router-s3-cloudfront.html