【環境構築】Laravel9 + Vite + TypeScript in GAE

クラウド環境としてGAEを初めて使ったのでメモ
（調べてるとGCP公式のLaravelデプロイ手順として↓のURLが貼り付けられがちだけど見てもまったく意味わからんかったので苦戦しました）
https://cloud.google.com/blog/topics/developers-practitioners/where-should-i-run-my-stuff-choosing-google-cloud-compute-option?hl=en

# 環境
こちらで作成したもの

https://qiita.com/ktomo124/items/e5b229f5d54392328f1d

これをデプロイする

# 目標
- google cloud SDKを使ってDockerコンテナ内からデプロイを通す
- GAE環境でLaravelトップページ表示、ts実行の確認

GCP上でのプロジェクト作成などの設定は割愛
# 1. google cloud SDKを導入
yumでインストールするのでリポジトリを作成する必要があるらしい
```powershell:powershell
vi /etc/yum.repos.d/google-cloud-sdk.repo
```
以下を書き込む
```
[google-cloud-sdk]
name=Google Cloud SDK
baseurl=https://packages.cloud.google.com/yum/repos/cloud-sdk-el7-x86_64
enabled=1
gpgcheck=1
repo_gpgcheck=1
gpgkey=https://packages.cloud.google.com/yum/doc/yum-key.gpg
       https://packages.cloud.google.com/yum/doc/rpm-package-key.gpg
```
``gpgkey=``2行目左側のスペースがないとエラーが出るので注意

インストール実施
```powershell:powershell
yum install -y google-cloud-sdk
```

コマンドが通るか確認
```powershell:powershell
gcloud auth list
```

# 2. googleアカウントの紐づけ、初期設定
対象のGCPプロジェクトに紐づいているgoogleアカウントを用意しておく。
```powershell:powershell
gcloud init
```
ログインしろって言われるので、Y
```
To continue, you must login. Would you like to login (Y/n)?  Y
```
表示されるURLにブラウザでアクセスし、Google認証後、発行される認証コードを貼り付け

プロジェクトを選べって言われるので、作成されているプロジェクトを選択
（ここでプロジェクトを作ることもできるみたいだけどここでは割愛）
```
Pick cloud project to use:
 [1] hoge
 [n] Create a new project
Please enter numeric choice or text value (must exactly match list
item): 1
```
このあとリージョンを選択する場合もあるらしい（今回はなかった）
東京か大阪リージョンでいいと思う

認証が通ってるか確認
Googleアカウントのアドレスが表示されてればOK
```powershell:powershell
gcloud auth list
```

# 3. デプロイする

下記のブログを参考にさせていただきました

https://recolog.winterer.app/20191011/

### 3.1 app.yamlを作成
Laravelプロジェクト直下に配置（.envとかと同じとこ）
```yaml:app.yaml
runtime: php81
service: default

# 環境
env: standard
instance_class: F1

# 環境設定
env_variables:
  APP_KEY: YOUR_APP_KEY
  APP_STORAGE: /tmp
  VIEW_COMPILED_PATH: /tmp
  SESSION_DRIVER: cookie

# 自動スケーリング設定
automatic_scaling:
  max_instances: 1
  max_idle_instances: 1

# tsのパスを通すための設定
handlers:
　- url: /build
  　static_dir: public/build
　- url: /favicon.ico
  　static_dir: public/favicon.ico
```
``APP_KEY: YOUR_APP_KEY``は``.env``のAPP_KEYの値を設定、もしくは下記コマンドでキー発行&置換
```powershell:powershell
php artisan key:generate --show
sed -i '' "s#YOUR_APP_KEY#$(php artisan key:generate --show --no-ansi)#" app.yaml
```

### 3.2 storagepathの設定
``bootstrap/app.php``に以下を追加
```php:bootstrap/app.php
$app->useStoragePath(env('APP_STORAGE', base_path() . '/storage'));
```
### 3.3 パッケージ削除
composerで「beyondcode/laravel-dump-server」パッケージを削除
キャッシュ周りでエラーが出るらしい
```powershell:powershell
composer remove --dev beyondcode/laravel-dump-server
```
### 3.4 デプロイ
```powershell:powershell
gcloud app deploy
gcloud app browse
```
表示されるURLに接続してLaravelとかconsole.logが出ればOK



# Ex. 試してて遭遇したエラーまとめ
めちゃくちゃエラーにあたってしんどかった
ほぼデプロイ後の画面表示でのエラー
ローカルでは動いてたのに大量にエラーが出るもんだから焦ったしかなり時間かかった

### ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: The first service (module) you upload to a new application must be the 'default' service (module). 略
``gcloud app deploy``実行時のエラー
GCPのプロジェクト内に作成する最初のサービス名は「default」でないといけない
app.yaml内にservice:の指定がある場合は外すか、「default」を設定する

### ERROR: (gcloud.app.deploy) Error Response: [7] Access Not Configured. Cloud Build has not been used in project hogehoge before or it is disabled. Enable it by visiting 略
``gcloud app deploy``実行時のエラー
Cloud Build APIが有効化されてないから有効にしろというエラー。
ご丁寧にURLも記載されてるので、そちらから有効化する。
（Cloud Build API利用には請求アカウントが用意する必要があります）

### The stream or file "/workspace/storage/logs/laravel.log" could not be opened in append mode: Failed to open stream: Read-only file system
### The exception occurred while attempting to log: The stream or file "/workspace/storage/logs/laravel.log" could not be opened in append mode: Failed to open stream: Read-only file system

storagePathが通ってないことによるエラーっぽいので、
①``app.yaml``に``APP_STORAGE: /tmp``を追加
②手順3.2
で解決
修正後再デプロイ

### Class "NunoMaduro\Collision\Adapters\Laravel\CollisionServiceProvider" not found
### Class "Spatie\LaravelIgnition\IgnitionServiceProvider" not found


パッケージがdev側にあるから読み込めないらしいので、以下を参考にcomposerを再設定

https://shageevan.medium.com/class-nunomaduro-collision-adapters-laravel-collisionserviceprovider-not-found-828e7bdff3bf



diffのうまい書き方がわからない
```diff:composer.json
"require": {
    "php": "^8.0.2",
    "guzzlehttp/guzzle": "^7.2",
    "laravel/framework": "^9.19",
    "laravel/sanctum": "^3.0",
    "laravel/tinker": "^2.7",
+   "nunomaduro/collision": "^6.1"
+   "spatie/laravel-ignition": "^1.0"
},
"require-dev": {
    "fakerphp/faker": "^1.9.1",
    "laravel/pint": "^1.0",
    "laravel/sail": "^1.0.1",
    "mockery/mockery": "^1.4.4",
-   "nunomaduro/collision": "^6.1",
    "phpunit/phpunit": "^9.5.10",
-   "spatie/laravel-ignition": "^1.0"
},
```
```powershell:powershell
composer install
composer update
```

### GET https://hogehoge.appspot.com/build/assets/app.XXXX.ts net::ERR_ABORTED 404
Viteで参照してるtsが読み込めないエラー
``build/assets/``までのパスが通ってないのが原因なので、``app.yaml``にハンドラ設定を追加
```yaml:app.yaml
# tsのパスを通すための設定
handlers:
　- url: /build
  　static_dir: public/build
　- url: /favicon.ico
  　static_dir: public/favicon.ico
```
public以下のimageとかを参照する場合は同様に記載を追加する必要がある
エラー内容が初歩的すぎるせいかググっても直接的な解決方法が出てこなくてかなり詰まったポイント


# 所感
GAEに限らずローカル環境では動くのにデプロイ後にエラーが出て焦る場面がかなり多くて直したい。
パーミッションとか依存関係とかがまだややこしくて全然わかってないので、これから勉強したい。
（というかあわよくばアホでもわかるように技術的にもっとシンプルになってほしい。技術が俺に追いつけ）
エラー内容をググってからヒントをかき集めて正解にたどり着くのは慣れてきた