Google Cloud Buildの導入に挑戦したけどやめた

2020-06-11

(LastUpdated: 2020-06-11)

エンジニアでもなんでもない素人が、google cloud buildを使ってCIに挑戦します。

google cloud buildというサービスでCIを実現します。

CIとは継続的インテグレーション(Continuous Integration)の頭文字をとったものである。 ど、どういう意味なんでしょう。 おそらくいろんな意味が含まれているのだと思います。

今回、このCIツールを使うことで、僕が実現したいことを書いてしまいましょう。

  1. githubのmaster branchにプッシュ
  2. yarn run generateコマンドを実行して静的なhtmlを生成させる
  3. dist/以下のファイルをfire baseにデプロイ

シンプルですね! 今までは、ローカル環境にて手動でgenerateコマンドを実行して、さらにfirebaseへのデプロイをしていました。 そのワークフローをシンプルにするためです。

かなりシンプルな流れなので、やりやすいはず。 ツールそのものの使い方や、ちょっと学ばなければいけないこともありそうです。

それでは、開始してみましょう。

GitHubとGoogle Cloud Build の連携を試してみた! – google-cloud-jp – Medium

ここまでは成功

steps:
- name: 'gcr.io/cloud-builders/yarn'
  args: ['install']
- name: 'gcr.io/cloud-builders/yarn'
  args: ['generate']

Buildでエラーが出まくるのを解決

何が原因かというと、ファイルの大文字。 コンポーネントを呼び出している.vueファイルが、components/Header.vueとなっていた。 ところが実際のファイルは、components/header.vueとなっていて、これが原因でファイルがないと怒られていたのでした。 シンプルな理由ですね。

Firebaseにデプロイ

色々設定するがうまくいかない。

steps:
- name: 'gcr.io/cloud-builders/yarn'
  args: ['install']
- name: 'gcr.io/cloud-builders/yarn'
  args: ['generate']
- name: 'gcr.io/cloud-builders/docker'
  args: [ 'build', '-t', 'gcr.io/$PROJECT_ID/firebase', '.' ]
images:
- 'gcr.io/$PROJECT_ID/firebase'
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: [ 'deploy', '-P', 'js-demo-fe-staging', '--token', '1/_eKu85MAporuzCr5wVPGDV9DZJOQ3iNI3Wovhx3fOwI']

おそらく、Dockerが何かを理解していないことがあかんのですね。

Dockerってなんだ?

これがわからないと先に進めない気がしてきた。

諦めて、circleCIに移行することにしました

ちょっと今の僕にはハードルが高かったようです。 とりあえずCIの実現を目的に、CircleCIを試してみようと思います。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。