こんばんわ！ @ktoshi です！
今日は静的ページのデプロイについてお話します。
目的
静的ページを Cloud Storage を使って公開したい。
でも、バージョン管理をしているから、CI/CDっぽいことをやりたい。
それなら、CloudBuild を使ってレポジトリへのコミットをトリガーにファイルの転送をしちゃおう！
なお、本手順では一部ベータ機能を利用していますので、ご利用は自己責任でお願いいたします。
準備
以下のものを準備してください。
- GoogleCloudPlatform のアカウント
- gcloud コマンドのインストール
- Git コマンドの設定
Cloud Source Repositories の作成
数多のレポジトリがありますが、Cloud Build を使う上では CloudSourceRepository を
使うのが便利です。
なお、他のレポジトリとミラーリングをすることができるので、今お使いのレポジトリを使いながら、CoudSourceRepository を使うことができます。
# レポジトリの作成
gcloud source repos create SAMPLE_REPO --project="SAMPLE_PROJECT"
これで空のレポジトリの作成が完了です。簡単ですねー。
Cloud Storage の作成
肝心の公開用となるストレージを準備します。
とりあえず、サンプルということで権限設定とかリージョン設定は適当に。。。
# バケットの作成(gs:// に続くストレージ名称は全ユーザで一意な必要があります)
gsutil mb -c standard -l asia-northeast2 -p SAMPLE_PROJECT gs://sample_storage_name
# 公開用の権限付与
gsutil acl ch -u AllUsers:R -p SAMPLE_PROJECT gs://sample_storage_name
これで公開用のストレージの準備が終わりました。
Cloud Build のトリガー作成
レポジトリへのコミットをトリガーに自動でビルドとデプロイ処理を行うためのトリガーを作成します。
# トリガーの作成
gcloud beta builds triggers create cloud-source-repositories --repo="SAMPLE_REPO" --branch-pattern=".*" --build-config="cloudbuild.yaml" --project="SAMPLE_PROJECT"
これで「SAMPLE_REPO」にコミットをすれば、cloudbuild.yaml の設定を参照してビルドとデプロイが走るようになります。
実践
環境の準備が整ったので実際にデプロイができるところまでいろいろやってみましょう。
ローカルレポジトリの作成
皆さんご存じだとは思いますので、特には記載しません。
あくまで手順の一つとしてご認識ください。
# 作業用ディレクトリの作成
mkdir sample_project
# 作業用ディレクトリへ移動
cd sample_project
# 初期化
git init
リモートレポジトリの登録
CloudSourceRepositories をリモートレポジトリとして登録します。
git config --global credential.https://source.developers.google.com.helper gcloud.cmd
# リモートレポジトリに追加
git remote add google https://source.developers.google.com/p/PROJECT_NAME/r/SAMPLE_REPO
レポジトリの登録確認
上記で登録したリモートレポジトリが正しく動作しているか確認します。
作業用ディレクトリに適当なファイル（README.md）などを作成しておいてください。
git add .
git commit -m "First Commit."
git push --all google
これでエラーが表示されなければ、正しく動作しています。
ただ、このままではビルドが動きません。
ビルド設定ファイルの作成
ルートディレクトリに cloudbuild.yaml を作成し、
その中にビルドの設定を記載します。
steps:
- name: gcr.io/cloud-builders/gsutil
args: ['rsync', '-d', '-r', '.', 'gs://sample_storage_name/']
このファイルをコミットすると Cloud Build が動き出します。
実は最初のコミットの時も動いているのですが、 cloudbuild.yaml が存在しないのでエラーになっています。
確認
Cloud Storage にファイルが上がっているか確認しましょう。
gsutil ls gs://sample_storage_name/
これでファイルが出力されればOK！！
まとめ
静的ファイルでもバージョン管理をする時代、いちいちサーバにアップロードするなんて面倒ですよね。
そういうときにはこのような仕組みを作っておくと便利ですね。
まあ静的なサイトの事例は少なそうですが、Vue.js などのビルドと一緒にとやると必要性はあがりそうですね。
実は今回の記事を書こうとした大元は Vue.js のビルドも混みでやっていたので、それはまた別の記事で書こうと思います。
それでは皆様も素敵なライフをビルドしてください。
良いお年をー。