はじめに

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>のところを、作成したバケット名に変えてください。

.github/workflows/deploy.yml

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へデプロイされる手筈が整いました。