Zenn
Open3

Zenn bookを限定公開するCI/CDの構築

Docker
GCP
Zenn
GitHub Actions
heyhey1028heyhey1028

事前準備

  • gcpのアカウント作成
  • gcpでプロジェクト作成
  • 作成したプロジェクトでGoogle Container Registry APIを有効化
  • gcloud cliをインストール
  • dockerをインストール
  • zenn用のレポジトリを作成
  • zenn cliをインストール

gcloud cliのインストール

https://infrastructure-engineer.com/gcp-gcloud-cli-mac-001/#index_id2

  1. homebrewを使ってインストール
$ brew install --cask google-cloud-sdk
  1. PATHを通す
    brew install時に下記の通り、PATH通してねと教えてくれる
==> Source [/opt/homebrew/Caskroom/google-cloud-sdk/latest/google-cloud-sdk/completion.zsh.inc] in your profile to enable shell command completion for gcloud.
==> Source [/opt/homebrew/Caskroom/google-cloud-sdk/latest/google-cloud-sdk/path.zsh.inc] in your profile to add the Google Cloud SDK command line tools to your $PATH.
.zshrc
source "/opt/homebrew/Caskroom/google-cloud-sdk/latest/google-cloud-sdk/completion.zsh.inc"
source "/opt/homebrew/Caskroom/google-cloud-sdk/latest/google-cloud-sdk/path.zsh.inc"
  1. gcloud cliを初期化
  2. gcloud cliにログイン
$ gcloud auth login

dockerをインストール

https://blog.interstellar.co.jp/en/2022/03/14/installing-docker-on-a-mac-with-homebrew/

  1. homebrewでdockerをインストール
$ brew install --cask docker
  1. dockerアプリを起動
$ open /Applications/Docker.app
  1. dockerのアカウント作成→ログイン
    dockerのアカウントがなければ作成し、ログイン。ログインするとdockerコマンドがコマンドラインから実行できるようになっている
$ docker --version
heyhey1028heyhey1028

手動デプロイ手順

  1. zenn用のレポジトリを作成
  2. articleもしくはbookを作成
  3. Dockerfileを作成
  4. gcloud cliで使うプロジェクトを選択
  5. gcloud cliでdockerを設定する
  6. dockerイメージを作成
  7. dockerイメージをpush
  8. cloud runにデプロイ

3. Dockerfileを作成

Dockerfile
FROM node:lts-alpine3.12

WORKDIR /app
RUN apk add --no-cache --virtual .build-deps git \
    && npm init --yes \
    && npm install zenn-cli \
    && npx zenn init \
    && apk del .build-deps
COPY articles articles
COPY books books

ENTRYPOINT ["npx", "zenn", "preview"]

4. gcloud cliで使うプロジェクトを選択

 gcloud config set project PROJECT_ID

5. gcloud cliでdockerを設定する

gcloud auth configure-docker

すると以下が表示

shoheiogawa@mba zenn-contents % gcloud auth configure-docker
WARNING: `docker` not in system PATH.
`docker` and `docker-credential-gcloud` need to be in the same PATH in order to work correctly together.
gcloud's Docker credential helper can be configured but it will not work until this is corrected.
Adding credentials for all GCR repositories.
WARNING: A long list of credential helpers may cause delays running 'docker build'. We recommend passing the registry name to configure only the registry you are using.
After update, the following will be written to your Docker config file located at [/Users/shoheiogawa/.docker/config.json]:
 {
  "credHelpers": {
    "gcr.io": "gcloud",
    "us.gcr.io": "gcloud",
    "eu.gcr.io": "gcloud",
    "asia.gcr.io": "gcloud",
    "staging-k8s.gcr.io": "gcloud",
    "marketplace.gcr.io": "gcloud"
  }
}

Do you want to continue (Y/n)?  y

6. dockerイメージを作成

GCLOUD_PROJECT=<your project>
docker build -t "gcr.io/$GCLOUD_PROJECT/zenn-preview" .

7. docker imageをプッシュ

docker push "gcr.io/$GCLOUD_PROJECT/zenn-preview"

8. cloud runにデプロイ

shoheiogawa@mba zenn-contents % service_name="zenn-preview-$(uuidgen | tr '[:upper:]' '[:lower:]')"
shoheiogawa@mba zenn-contents % gcloud run deploy "$service_name" \
  --image "gcr.io/$GCLOUD_PROJECT/zenn-preview" \
  --port 8000 \
  --platform managed \
  --allow-unauthenticated \
  --region asia-northeast1
API [run.googleapis.com] not enabled on project [412561740140]. Would you like to enable and retry (this will take a few minutes)? 
(y/N)?  y
トラブルシューティング

以下エラーでcloud runのデプロイが失敗

ERROR: (gcloud.run.deploy) The user-provided container failed to start and listen on the port defined provided by the PORT=8000 environment variable. Logs for this revision might contain more information.

Cloud Run側のエラーログを確認すると以下のエラーが表示。npxの実行が失敗している。

terminated: Application failed to start: Failed to create init process: failed to load /usr/local/bin/npx: exec format error"

原因

docker build時にM1、M2 Mac使用の場合、--platform linux/amd64オプションを付ける必要がある。

参考

https://zenn.dev/msksgm/scraps/d667e2b2eecf4e