はじめに
Google Cloud Platformを使い始めました。
備忘録として、作業の流れを記録していきます。
API有効化の注意
場合によっては、必要なAPIを有効化する必要がありますが、それらは省略しています。
使用するのは、たぶん、Compute Engine APIです。
Vueプロジェクト作成
SPAは何でもいいのですが、今回はVueを使います。
$ npm create vue@latest
プロンプトにメッセージが表示されるので選んでいきます。何を選んでもいいです。
$ cd <your-project>
$ npm i
$ npm run dev
すると、http://localhost:5173/ にこんな画面が表示されます。
GCPプロジェクト作成
記事の都合上、新しいプロジェクトから作成していきます。
GitHub Actionsで使用するサービスアカウントを作成
IAMと管理 -> サービスアカウントから、サービスアカウントを作成します。
名前は、 github-actions にします。
Storageオブジェクト管理者のロールを付けます。
アカウントが作成されたら、鍵を作成します。
鍵を作成します。ここをクリックすると、選択肢のポップアップが表示されますが、JSONタイプのものを使います。そっちじゃないのは使ったことありません。そのあと、鍵の情報が入ったファイルの自動ダウンロードが始まります。
ファイルはこんな感じです。 公開リポジトリ等にアップロードしてはいけません。
この内容は、あとでGitHub ActionsのSecretに登録します。
Cloud Storageのバケットを作成
ビルドしたvueアプリをデプロイするためのCloud Storageバケットを作成します。
名前は vueapp としておきます。
バケットは公開するので、公開アクセス禁止設定は解除しておきます。後からでも解除できます。
バケットの公開設定をします。権限タブに行き、アクセス権を付与をクリック。
allUsersにStorageオブジェクト閲覧者の権限をつけます。これで公開されます。
ウェブサイトの構成を編集します。
これにより、 / へのアクセスで index.html が表示されるようになります。
GitHub Actionsを使ってバケットにデプロイする
プロジェクトにActionsのファイルを用意します。ChatGPTに作ってもらいました。
<your-bucket>のところを、作成したバケット名に変えてください。
name: Deploy to Google Cloud Storage
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: npm install
- name: Build project
run: npm run build
- name: Authenticate to Google Cloud
uses: google-github-actions/auth@v1
with:
credentials_json: ${{ secrets.GCP_SA_KEY }}
- name: Upload Folder
uses: google-github-actions/upload-cloud-storage@v2
with:
path: dist
destination: <your-bucket>
parent: false
上記のファイルで使用した GCP_SA_KEY を、GitHubに登録します。
これで、Actionsが走って成功すると、アップロードされます。
ここで、 index.html の詳細を見てみます。公開URLをクリックしてみましょう。
真っ白なページが表示されます。URLのパス部分がルートでないので、関連ファイルの読み込みに失敗しています。
解決方法としては、Vueのほうの設定で、相対パスを使うように設定する方法があるかと思いますが、今回はCDNを使ってURLのパス部分がルートになるようにします。
Cloud Storageの前段にCloud Load BalancingとCloud CDNを置く
ロードバランサを作成します。
いろいろ選択肢がありますが、全部左の選択肢を選びました。
ロードバランサの構成をしていきます。
フロントエンドの構成です。エフェメラルIPアドレスを使用して、HTTPSを使用します。
証明書はGCPに作ってもらいます。
次はバックエンドの構成です。
バックエンドバケットを作成します。
次の画面で、前に作ったCloud Storageのバケットを指定します。
また、ここでCloud CDNの設定とCloud Armorの設定があります。Cloud CDNは個人開発であっても十分払えるレベルかと思いますので、有効のままで行きます。
Cloud ArmorはWAFです。仕事なら有効にする必要があるかもしれませんが、Cloud StorageのURLでもファイルにアクセスできるので、どのくらい有用なのかわかりません。
最後にルーティングですが、いまのところバケットしかないので、デフォルトのままです。ここにバックエンドとか追加のバケットが入ってくると、ルーティングを設定する必要があります。
ロードバランサにドメイン名でアクセスするようDNSの設定をする
ロードバランサが作成された後で、詳細画面を見ます。
そこにロードバランサのIPアドレスが書いてあるのでメモします。
先のフロントエンドの構成のところで入力したドメインに対して、Aレコードを設定します。
（私はドメイン名を別サービスで管理しているので画面は省略です）
さて、DNS設定が終わった後は、証明書ができるのを待ちます。証明書のことろのリンクをクリックすると、状況がわかります。
この画面では、PROVISIONINGとなっており、証明書は作成されてないことがわかります。
30分くらい待つと、ACTIVEになりました。
設定したドメインでアクセスできるようになる
さて、それではページを開いてみましょう。
これで、GitHubにプッシュしたら、自動的にGCPへデプロイされる手筈が整いました。