chrome extension 개발기 - 2. 자동 배포

- name: Build
  run: pnpm build
 
- name: Zip
  run: zip -r extension.zip dist
 
- name: Publish to Chrome Web Store
  run: pnpm publish-extension
  env:
    EXTENSION_ID: ${{ secrets.EXTENSION_ID }}
    GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
    GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
    GOOGLE_REFRESH_TOKEN: ${{ secrets.GOOGLE_REFRESH_TOKEN }}

name: Publish
 
on:
  pull_request:
    branches: [main]
 
jobs:
  build-and-publish:
    if: github.event.pull_request.merged # PR이 main에 merge 될 때 동작
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code # 코드를 가져옴
        uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v2 # pnpm setup
        with:
          version: 10
 
      - name: Setup node.js # node setup
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
 
      - name: Install dependencies # 의존성 설치
        run: pnpm install
 
      - name: Configure aws credentials # AWS 인증
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 
      - name: Pull env # AWS Parameter Store로부터 env 가져오기
        run: pnpm env-pull:production
 
      - name: Build # 결과물 산출
        run: pnpm build
 
      - name: Zip # 압축
        run: zip -r extension.zip dist
 
      - name: Publish to Chrome Web Store # Upload, Publish
        run: pnpm publish-extension
        env:
          EXTENSION_ID: ${{ secrets.EXTENSION_ID }}
          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
          GOOGLE_REFRESH_TOKEN: ${{ secrets.GOOGLE_REFRESH_TOKEN }}

// package.json
"scripts": {
  "env-pull:development": "tsx scripts/fetch-env/development.ts", // 개발 환경
  "env-pull:production": "tsx scripts/fetch-env/production.ts"
},

// scripts/fetch-env/production.ts
import { GetParameterCommand, SSMClient } from '@aws-sdk/client-ssm';
import fs from 'fs';
 
const MODE = 'production';
 
async function main() {
  const client = new SSMClient({ region: 'ap-northeast-2' });
  const command = new GetParameterCommand({
    Name: `/tabgorithm/${MODE}`,
    WithDecryption: true,
  });
  const { Parameter } = await client.send(command);
  if (!Parameter?.Value) {
    throw new Error('Parameter not found');
  }
  const envJson = JSON.parse(Parameter.Value);
 
  try {
    fs.unlinkSync(`.env.${MODE}`);
  } catch (error) {
    // ENOENT는 "error no entry"의 약자로, 파일이 존재하지 않는 경우를 의미. 해당 에러가 아닐 경우 throw error.
    if (error.code !== 'ENOENT') {
      throw error;
    }
  }
 
  let content = '';
  for (const [key, value] of Object.entries(envJson)) {
    content += `${key}=${value}\n`;
  }
  fs.writeFileSync(`.env.${MODE}`, content);
}
 
main().catch(console.error);

// vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { crx } from '@crxjs/vite-plugin';
import manifest from './src/manifest';
import { ZodError, z } from 'zod';
 
const envSchema = z.object({
  VITE_FLOUNDER_KEY: z.string(),
  VITE_AMPLITUDE_KEY: z.string(),
  VITE_HACKLE_SDK_KEY: z.string(),
});
 
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    crx({ manifest }),
    {
      name: 'env-validator',
      buildStart: () => {
        const env = loadEnv(mode, process.cwd(), '');
 
        try {
          envSchema.parse(env);
        } catch (error) {
          if (error instanceof ZodError) {
            const missingEnvs = error.errors.map((err) => err.path.join('.')).join(', ');
            console.error('❌ environment variables are missing:', missingEnvs);
          }
 
          throw error;
        }
      },
    },
  ],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
}));

"scripts": {
  "publish-extension": "tsx scripts/publish-extension/index.ts",
},

// scripts/publish-extension/index.ts
import packageJson from '../../package.json';
import { getAccessToken } from './auth';
import { getStoreItem, publish, upload } from './chrome-web-store-api';
import { isNewVersion } from './helper';
 
async function main() {
  const accessToken = await getAccessToken();
  const storeItem = await getStoreItem(accessToken);
 
  if (!isNewVersion(storeItem.crxVersion, packageJson.version)) {
    console.log(
      `Current version ${packageJson.version} is not new than ${storeItem.crxVersion}\n So publish is skipped`,
    );
    return;
  }
 
  if (storeItem.uploadState === 'IN_PROGRESS') {
    console.log('Already in review. So publish is skipped.');
    return;
  }
 
  await upload(accessToken, 'extension.zip');
  await publish(accessToken);
}
 
main().catch(console.error);

// scripts/publish-extension/auth.ts
import { env } from './env';
 
export async function getAccessToken() {
  const response = await fetch('https://accounts.google.com/o/oauth2/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      client_id: env.GOOGLE_CLIENT_ID,
      client_secret: env.GOOGLE_CLIENT_SECRET,
      refresh_token: env.GOOGLE_REFRESH_TOKEN,
      grant_type: 'refresh_token',
    }),
  });
  const data = await response.json();
 
  return data.access_token as string;
}
 
// scripts/publish-extension/chrome-web-store-api.ts
/**
 * @see https://developer.chrome.com/docs/webstore/api
 */
import { env } from './env';
import fs from 'fs';
 
type StoreItem = {
  id: string;
  kind: string;
  publicKey: string;
  crxVersion: string;
  uploadState: 'FAILURE' | 'IN_PROGRESS' | 'NOT_FOUND' | 'SUCCESS';
};
 
export async function getStoreItem(accessToken: string): Promise<StoreItem> {
  const response = await fetch(
    `https://www.googleapis.com/chromewebstore/v1.1/items/${env.EXTENSION_ID}?projection=DRAFT`,
    {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    },
  );
  const data = await response.json();
 
  return data as StoreItem;
}
 
export async function upload(accessToken: string, zipFilePath: string) {
  const response = await fetch(`https://www.googleapis.com/upload/chromewebstore/v1.1/items/${env.EXTENSION_ID}`, {
    method: 'PUT',
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'x-goog-api-version': '2',
    },
    body: fs.readFileSync(zipFilePath),
  });
  const data = await response.json();
 
  return data;
}
 
export async function publish(accessToken: string) {
  const response = await fetch(`https://www.googleapis.com/chromewebstore/v1.1/items/${env.EXTENSION_ID}/publish`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  });
  const data = await response.json();
 
  return data;
}
 
// scripts/publish-extension/helper.ts
export function isNewVersion(previousVersion: string, currentVersion: string) {
  const [previousMajor, previousMinor, previousPatch] = previousVersion.split('.').map(Number);
  const [currentMajor, currentMinor, currentPatch] = currentVersion.split('.').map(Number);
 
  return (
    currentMajor > previousMajor ||
    (currentMinor === previousMinor && currentPatch > previousPatch) ||
    (currentMajor === previousMajor && currentMinor === previousMinor && currentPatch > previousPatch)
  );
}
 
// scripts/publish-extension/env.ts
import { config } from 'dotenv';
import { z } from 'zod';
 
config();
 
export const envSchema = z.object({
  EXTENSION_ID: z.string(),
  GOOGLE_CLIENT_ID: z.string(),
  GOOGLE_CLIENT_SECRET: z.string(),
  GOOGLE_REFRESH_TOKEN: z.string(),
});
 
export const env = envSchema.parse(process.env);