/todo-app-frontend

Primary LanguageTypeScript

todo-app-frontend

目次

環境構築

$ yarn install

開発サーバーの起動

$ yarn start

ローカルコンテナでの起動

$ docker comopse up -d

Google Cloud CLI の設定

$ docker pull google/cloud-sdk:latest
$ docker run -ti google/cloud-sdk:latest gcloud version
$ docker run -ti --name gcloud-config google/cloud-sdk gcloud auth login
$ alias gcloud='docker run --rm -it --volumes-from gcloud-config google/cloud-sdk gcloud'

請求先アカウント ID の確認

$ gcloud billing accounts list

GitHub CLI の設定

$ brew install gh
# 下記のコマンドは任意。自分の環境ではなぜか unset GITHUB_TOKEN をしてもエラーが出るのでエイリアスを追加した。
$ alias gh='env -u GITHUB_TOKEN gh'
$ gh auth login

GCP プロジェクトの作成

$ gcloud projects create ${PROJECT_ID} --name ${PROJECT_NAME}
$ gcloud config set project ${PROJECT_ID}
$ gcloud billing projects link ${PROJECT_ID} --billing-account ${BILLING_ACCOUNT_ID}
$ gcloud services enable iamcredentials.googleapis.com run.googleapis.com compute.googleapis.com
$ gcloud config set compute/region asia-northeast1
$ gcloud config set compute/zone asia-northeast1-a
$ gcloud iam service-accounts create ${SERVICE_ACCOUNT_ID} --display-name ${SERVICE_ACCOUNT_NAME}
$ gcloud iam workload-identity-pools create ${POOL_NAME} --location=global
$ export WORKLOAD_IDENTITY_POOL_ID=$(gcloud iam workload-identity-pools describe ${POOL_NAME} --project=${PROJECT_ID} --location=global --format="value(name)")
$ gcloud iam workload-identity-pools providers create-oidc ${PROVIDER_NAME} \
    --location=global \
    --workload-identity-pool=${POOL_NAME} \
    --attribute-mapping="google.subject=assertion.sub,attribute.repository=assertion.repository,attribute.actor=assertion.actor,attribute.aud=assertion.aud" \
    --issuer-uri=https://token.actions.githubusercontent.com
$ gcloud iam service-accounts add-iam-policy-binding ${SERVICE_ACCOUNT}@${PROJECT_ID}.iam.gserviceaccount.com \
    --role=roles/iam.workloadIdentityUser \
    --member=principalSet://iam.googleapis.com/${WORKLOAD_IDENTITY_POOL_ID}/attribute.repository/${GITHUB_REPO}
$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
    --member="serviceAccount:${SERVICE_ACCOUNT}@${PROJECT_ID}.iam.gserviceaccount.com" \
    --role="roles/run.admin"
$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
    --member="serviceAccount:${SERVICE_ACCOUNT}@${PROJECT_ID}.iam.gserviceaccount.com" \
    --role="roles/storage.admin"
$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
    --member="serviceAccount:${SERVICE_ACCOUNT}@${PROJECT_ID}.iam.gserviceaccount.com" \
    --role="roles/iam.serviceAccountUser"
$ export WORKLOAD_IDENTITY_PROVIDER_ID=$(gcloud iam workload-identity-pools providers describe ${PROVIDER_NAME} \
    --project=${PROJECT_ID} \
    --location=global \
    --workload-identity-pool=${POOL_NAME} \
    --format="value(name)")

Note

すでに ShintaroaSuzuki/todo-app-backend で環境構築されている場合は、サービスアカウントにロールを追加するのみでよい

$ export WORKLOAD_IDENTITY_POOL_ID=$(gcloud iam workload-identity-pools describe ${POOL_NAME} --project=${PROJECT_ID} --location=global --format="value(name)")
$ gcloud iam service-accounts add-iam-policy-binding ${SERVICE_ACCOUNT}@${PROJECT_ID}.iam.gserviceaccount.com \
    --role=roles/iam.workloadIdentityUser \
    --member=principalSet://iam.googleapis.com/${WORKLOAD_IDENTITY_POOL_ID}/attribute.repository/${GITHUB_REPO}
$ export WORKLOAD_IDENTITY_PROVIDER_ID=$(gcloud iam workload-identity-pools providers describe ${PROVIDER_NAME} \
    --project=${PROJECT_ID} \
    --location=global \
    --workload-identity-pool=${POOL_NAME} \
    --format="value(name)")

Warning

${GITHUB_REPO} は大文字小文字の区別があるので注意

そもそもアカウント名やリポジトリ名に大文字を使うべきではないが

GitHub Secrets の設定

$ gh secret set GCP_PROJECT_ID --body ${PROJECT_ID}
$ gh secret set SERVICE_ACCOUNT_ID --body ${SERVICE_ACCOUNT_ID}
$ gh secret set WORKLOAD_IDENTITY_PROVIDER_ID --body ${WORKLOAD_IDENTITY_PROVIDER_ID}
$ gh secret set REACT_APP_API_URL --body ${REACT_APP_API_URL}

# 環境変数を削除
$ unset WORKLOAD_IDENTITY_POOL_ID
$ unset WORKLOAD_IDENTITY_PROVIDER_ID