Skip to content

Commit 95d89ae

Browse files
Mikuto0831Mikuto0831
authored
Merge pull request #1 from lc-tut/dev/setup
dev:setting
2 parents 65c170b + 193742d commit 95d89ae

File tree

10 files changed

+4829
-2
lines changed

10 files changed

+4829
-2
lines changed

‎.github/workflows/README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# GitHub Actions セットアップ手順
2+
3+
## 概要
4+
5+
mainブランチにマージすると自動的にGoogle Apps Scriptにデプロイされます。
6+
7+
## セットアップ手順
8+
9+
### 1. サービスアカウントの作成
10+
11+
1. [Google Cloud Console](https://console.cloud.google.com/)を開く
12+
2. プロジェクトを選択（既存のGASプロジェクトに紐づくGCPプロジェクト）
13+
3. 「IAMと管理」→「サービスアカウント」
14+
4. 「サービスアカウントを作成」
15+
- 名前: `github-actions-deployer`（任意）
16+
- 説明: GitHub ActionsからGASをデプロイするためのアカウント
17+
5. 「完了」をクリック
18+
6. 作成したサービスアカウントをクリック
19+
7. 「キー」タブ→「鍵を追加」→「新しい鍵を作成」
20+
8. 形式: JSON を選択→「作成」
21+
9. ダウンロードされたJSONファイルを保存
22+
23+
### 2. Apps Script APIの有効化
24+
25+
1. [Google Cloud Console](https://console.cloud.google.com/)
26+
2. 「APIとサービス」→「ライブラリ」
27+
3. "Apps Script API" を検索
28+
4. 「有効にする」をクリック
29+
30+
### 3. サービスアカウントに権限を付与
31+
32+
#### 方法A: GASプロジェクトにサービスアカウントを追加
33+
34+
1. GASエディタを開く
35+
2. 右上の「共有」をクリック
36+
3. サービスアカウントのメールアドレスを追加（編集者権限）
37+
38+
#### 方法B: `.clasprc.json`を使用（簡易版）
39+
40+
ローカルで`clasp login`した際に作成された`~/.clasprc.json`を使用します。
41+
42+
```bash
43+
cat ~/.clasprc.json
44+
```
45+
46+
内容をコピーしてGitHub Secretsに設定します。
47+
48+
### 4. GitHub Secretsの設定
49+
50+
1. GitHubリポジトリページを開く
51+
2. 「Settings」→「Secrets and variables」→「Actions」
52+
3. 「New repository secret」をクリック
53+
54+
#### サービスアカウント方式の場合
55+
- Name: `GCP_SA_KEY`
56+
- Secret: ダウンロードしたJSONファイルの内容全体
57+
58+
#### OAuth方式の場合（簡易版・推奨）
59+
- Name: `CLASPRC_JSON`
60+
- Secret: `~/.clasprc.json`の内容全体
61+
62+
### 5. .clasp.jsonの確認
63+
64+
`.clasp.json`がリポジトリにコミットされていることを確認：
65+
66+
```json
67+
{
68+
"scriptId": "your-script-id-here",
69+
"rootDir": "./dist"
70+
}
71+
```
72+
73+
**注意:** `scriptId`は公開しても問題ありませんが、気になる場合はSecrets化も可能です。
74+
75+
### 6. デプロイのテスト
76+
77+
1. 新しいブランチを作成
78+
2. コードを変更してコミット
79+
3. mainブランチにPRを作成
80+
4. マージすると自動デプロイが実行される
81+
82+
## トラブルシューティング
83+
84+
### デプロイが失敗する場合
85+
86+
1. **認証エラー**: `CLASPRC_JSON`の内容が正しいか確認
87+
2. **ビルドエラー**: ローカルで`npm run build`が成功するか確認
88+
3. **Script ID不正**: `.clasp.json`の`scriptId`が正しいか確認
89+
90+
### トークンの期限切れ
91+
92+
OAuth方式の場合、トークンが期限切れになったら：
93+
94+
1. ローカルで`clasp login`を再実行
95+
2. 新しい`~/.clasprc.json`をGitHub Secretsに再設定
96+
97+
## セキュリティ上の注意
98+
99+
- ✅ `.clasprc.json`は`.gitignore`に追加済み
100+
- ✅ GitHub Secretsは暗号化されて保存される
101+
- ✅ Secretsはログに出力されない
102+
- ⚠️ サービスアカウントキーは厳重に管理する

‎.github/workflows/deploy.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Deploy to Google Apps Script
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
jobs:
10+
deploy:
11+
runs-on: ubuntu-latest
12+
timeout-minutes: 10
13+
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: '20'
22+
cache: 'npm'
23+
24+
- name: Install dependencies
25+
run: npm ci
26+
27+
- name: Build TypeScript
28+
run: npm run build
29+
30+
- name: Setup clasp credentials
31+
env:
32+
CLASPRC_JSON: ${{ secrets.CLASPRC_JSON }}
33+
run: |
34+
echo "$CLASPRC_JSON" > ~/.clasprc.json
35+
36+
- name: Deploy to GAS
37+
run: npm run push
38+
39+
- name: Notify deployment success
40+
if: success()
41+
run: |
42+
echo "✅ Deployment to GAS succeeded!"
43+
echo "Script ID: $(jq -r '.scriptId' .clasp.json)"

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
dist/
3+
.clasp.json
4+
.clasprc.json
5+
*.log
6+
.DS_Store

‎README.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# expression-upload-notify
2+
3+
Google Apps ScriptプロジェクトをTypeScript + esbuildで開発
4+
5+
## 構成
6+
7+
```
8+
expression-upload-notify/
9+
├── .github/
10+
│ └── workflows/
11+
│ ├── deploy.yml # 自動デプロイ設定
12+
│ └── README.md # セットアップ手順
13+
├── dist/ # ビルド出力先（GASにプッシュされる）
14+
│ ├── appsscript.json
15+
│ └── main.js
16+
├── src/ # TypeScriptソースコード
17+
│ ├── App.ts
18+
│ └── main.ts
19+
├── esbuild.js # ビルド設定
20+
├── package.json
21+
└── tsconfig.json
22+
```
23+
24+
## ローカル開発
25+
26+
### セットアップ
27+
28+
```bash
29+
# 依存関係のインストール
30+
npm install
31+
32+
# claspでログイン
33+
npx clasp login
34+
35+
# 既存プロジェクトの場合: .clasp.jsonを作成
36+
# {
37+
# "scriptId": "your-script-id",
38+
# "rootDir": "./dist"
39+
# }
40+
41+
# または新規作成
42+
npx clasp create --type sheets --title "expression-upload-notify"
43+
```
44+
45+
### コマンド
46+
47+
- `npm run build` - TypeScriptをビルド（esbuildでバンドル＆ミニファイ）
48+
- `npm run push` - distフォルダの内容をGASにプッシュ
49+
- `npm run deploy` - ビルド→プッシュを一括実行
50+
- `npm run open` - ブラウザでGASエディタを開く
51+
52+
### 開発フロー
53+
54+
1. `src/App.ts`や他のTSファイルでコードを編集
55+
2. `npm run deploy`でビルド＆GASに反映
56+
3. `npm run open`でGASエディタを開く
57+
4. GASエディタで`App`関数を実行して動作確認
58+
59+
## CI/CD（自動デプロイ）
60+
61+
mainブランチにマージすると自動的にGASにデプロイされます。
62+
63+
### セットアップ手順
64+
65+
詳細は [.github/workflows/README.md](.github/workflows/README.md) を参照してください。
66+
67+
**簡易版（推奨）:**
68+
1. ローカルで`clasp login`実行
69+
2. `~/.clasprc.json`の内容をコピー
70+
3. GitHubリポジトリの「Settings」→「Secrets」で`CLASPRC_JSON`として登録
71+
4. mainにマージすると自動デプロイ
72+
73+
## 特徴
74+
75+
- ✅ TypeScriptで型安全な開発
76+
- ✅ esbuildで複数ファイルを1つにバンドル
77+
- ✅ ミニファイで最適化
78+
- ✅ import/exportでファイル分割可能
79+
- ✅ GitHub Actionsで自動デプロイ
80+
81+

‎esbuild.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import esbuild from "esbuild";
2+
import { GasPlugin } from "esbuild-gas-plugin";
3+
4+
esbuild
5+
.build({
6+
entryPoints: ["./src/main.ts"],
7+
bundle: true,
8+
minify: true,
9+
outfile: "./dist/main.js",
10+
plugins: [GasPlugin],
11+
})
12+
.catch((error) => {
13+
console.log('ビルドに失敗しました')
14+
console.error(error);
15+
process.exit(1);
16+
});

0 commit comments

Comments
 (0)