Zenn
📚

Vue.js + TS + pug + sass + AppEngineの開発環境における個人的ベストプラクティス

2024/06/19に公開
Docker
Google Cloud
Vue.js
Google App Engine
tech

はじめに

表題のようなセットアップでアプリを作ってクラウドにデプロイする事が多いのですが、今まで試行錯誤してきて現時点での個人的ベストプラクティスに辿り着いたので、記録として残しておきます。

プロジェクト作成

まずはプロジェクトを作成します。

bun create vue@latest

オプションはプロジェクトに応じて好みで選んでください。

Pug/Sass

僕はプロトタイプを作る事が多い関係上、同じ結果を少ない記述量で得られるpugとsassを愛用しています。
Vueプロジェクト内で使用できるようにするには、以下の手順が必要です。

インストール

pugとsassそれぞれと、pugをVSCodeに認識させるためのプラグインをインストールします。

bun add -D pug sass @vue/language-plugin-pug

tsconfig.json

プラグインを有効にするため、tsconfig.jsonに以下の設定を追加します。

tsconfig.json
{
  ...
  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
  ...
}

.eslintrc.cjs

また、<template lang="pug">を使用するため、.eslintrc.cjsに以下の設定を追加します。

.eslintrc.cjs
module.exports = {
  ...
  overrides: [
    {
      files: ["*.vue"],
      rules: {
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": "off",
      },
    },
  ],
};

eslint.config.js

最近のアップデートで eslint.config.js を参照するようになりましたが、こちらの場合は末尾に以下のように記述します。

eslint.config.js
export default [
  ...
  {
    files: ['**/*.vue'],
    rules: {
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'off',
    },
  },
};

クラウドデプロイ環境

僕はgcloudコマンドをローカルにインストールしておらず、Dockerコンテナ内でコマンドを実行するようにしています。
この環境下で快適にデプロイ作業ができるように、以下のような工夫をしています。

deployフォルダ内に必要なものをまとめる

ルートにdeployフォルダを作り、以下のファイルを作成します。

.gcloudignore

gcloud app deployコマンドでアップロードされたくないファイル群を記述します。
通常のSPAであれば書き出されたソースが入っているdistフォルダだけアップされていれば良いので、ここではdist以外をignoreしています。

.gcloudignore
*
!dist/**

app.yaml

AppEngineで動作させるため、ランタイムの設定やルーティングの処理を行います。

app.yaml
runtime: php82

handlers:
  - url: /(.*\..+)$
    secure: always
    static_files: dist/\1
    upload: dist/(.*\..+)$

  - url: /.*
    secure: always
    static_files: dist/index.html
    upload: dist/index.html

  - url: /
    secure: always
    static_files: dist/index.html
    upload: dist/index.html

env: standard
instance_class: F1

automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: 1
  min_pending_latency: 3000ms
  max_pending_latency: automatic
  max_instances: 2

docker-compose.yml

dockerコマンドをオプション付きで毎回叩くのは大変なので、docker-composeを使用します。

docker-compose.yml
services:
  sdk:
    image: google/cloud-sdk
    platform: linux/x86_64
    working_dir: /app
    tty: true
    volumes:
      - ./:/app
      - ./gcloud:/root/.config/gcloud

.gitignore更新

上記docker-compose.ymlを使用すると、deployフォルダ内にgcloudという認証などの情報が含まれるフォルダが作られますので、ignoreしておきます。

.gitignore
...
gcloud/

ビルドの書き出し先を変更

vueのデフォルト設定ではbuildしたものはルートのdistフォルダに書き出されますが、これをdeploy/distフォルダに変更します。

vite.config.ts
export default defineConfig({
  build: {
    outDir: './deploy/dist'
  },
  ...
})

gcloudコマンドへのショートカットをpackage.jsonに追加

現在のディレクトリ構造だとルートからgcloudを起動するために長いコマンドが必要になるので、パッケージスクリプトに追加してしまって簡単にgcloudコマンドを呼び出せるようにします。

{
  ...
  "scripts": {
    ...
    "gcloud": "docker-compose -f deploy/docker-compose.yml exec sdk gcloud"
  },
  ...
}

こうする事で、以下のようにgcloudコマンドの前にbunをつけるだけで各種コマンドを実行できます。

bun gcloud config list

使用の流れ

ここまでで環境の構築は終わりました。
実際の開発では

  1. 普通にvueアプリを作成する
  2. bun run buildでアプリ書き出し
  3. bun gcloud app deployでAppEngineへデプロイ

というシンプルなステップで使用する事ができます。

おわりに

今回の記事は、今まで書いてきた記事をちょっとアップデートしてまとめたものになります。
自分が新規プロジェクトを作る時に楽をするためにまとめたものですが、同じような事をしたくて躓いている人の参考になれば幸いです。

参考記事

https://zenn.dev/soumi/articles/d9111b68ef9e64
https://zenn.dev/soumi/articles/8236fc42d98632
https://zenn.dev/soumi/articles/2ce544a24f49f7

Discussion