LoginSignup
2
4

More than 3 years have passed since last update.

GAEへ静的ファイルのアップロード方法

Last updated at Posted at 2019-06-26

はじめに

GoogleAppsEngineで静的ファイルを上げて運営することが多いので、
そのやり方をいろいろな方に教えているのが大変なのでQiita化することにしました!

メリットとは?

GAEで静的なサイト?
リソースの無駄遣いじゃん!
いやーぶっちゃけAWSのS3やGCSでもええやん!
って思う人は多いと思います。

次の場合に使うとメリットが高いと思うので、もし当てはまればぜひ一考してみてください。
・独自ドメインで運用しなければならない
・一応SSL証明書も必要
・サーバサイドが足りない(というか居ない)
・メディア系でいきなりドカンとアクセスが来ることがあるが、普段は平和そのもの。
・できれば運用放置したい(お金かけずに)

実際、今まで4サイト以上ローンチしてますが、GAEでは1円もかかってません。(驚愕)
ありがたい限りです。。。

利用サービス

GoogleCloudPlatform

  • AppsEngine
  • SourceRepository
  • CloudSDK

環境

MacbookAir(Mojave)
CloudSDK

Google Cloud SDK 250.0.0
bq 2.0.43
core 2019.06.07
gsutil 4.38

前提条件

  • GCPプロジェクトはすでに用意されていて、運用中で、初めてアサインされたことを前提とする。
  • GAEのdispach.yamlファイルの設定やDNSの設定、SSL紐づけ等についてはここに記載しない。

準備編

SDKのインストール

SDKツールを入れると、簡単にアップデートが可能となる。ブラウザ上からもできるが、特にmacユーザはおすすめ。

  1. コンソールを開く
  2. 次のコマンドを入力する $ curl https://sdk.cloud.google.com | bash
  3. もろもろ出てくるので、Enterを押し続ける(基本問題ない認識)
  4. .bashrc(起動時に読み込む初期セットアップファイル)を再度読み込むためにコンソールに入力する。 exec -l $SHELL
  5. SDKの初期設定を行う gcloud init
  6. Your current configuration has been set to: [default] と出てくるので、Enterで次に行く
  7. You must log in to continue. Would you like to log in (Y/n)? yを入力
  8. ブラウザが勝手に開くはずなので、ログインする。開かない場合は、出ているリンクを開く。
  9. この画面が出てきたら、コンソールに戻る。 スクリーンショット 2019-06-27 1.20.29.png
  10. 次の表示でコンソール上には参加しているメールアドレスとプロジェクトが表示されているので、基本的に作業で使うプロジェクトをここで選ぶ。(べつにここに入れなくても他のプロジェクトはアサインできるので、焦らずとも大丈夫)
You are logged in as: [hoge@huge.co.jp].

Pick cloud project to use: 
 [1] huge-hugesys01
 [2] huge-webs
 [3] huge-works
 [4] Create a new project
Please enter numeric choice or text value (must exactly match list 
item):  ここに1〜4のいずれかを番号入力

12.compute(VirtualMachine)のリージョン(地域)とZone(場所)を選択するところが出る。ここではYを選択する。

Your current project has been set to: [hoge-webs].

Do you want to configure a default Compute Region and Zone? (Y/n)?  
  1. defaultで選択したいリージョンやゾーンが出てきているので、好きなリージョンを選択する。
  2. 終了。

※ もしインストールした場所を知りたいときは次のコマンドを入力して場所を表示する
which gcloud

hogenoAir:~ hoge$ which gcloud
/Users/hoge/y/google-cloud-sdk/bin/gcloud

編集編

GoogleSourceRepository

・GCPのgitからデータをクローンする

GoogleSourceRepositoryからデスクトップにSourceRepositoryのGitデータの落とし方を書く。

  1. まずリポジトリリストを出す。
hogenoAir:~ hoge$ gcloud source repos list 
REPO_NAME           PROJECT_ID  URL
aeon                huge-webs  https://source.developers.google.com/huge-webs/r/aeoner
airy_shade          huge-webs  https://source.developers.google.com/p/huge-webs/r/airy_shade
aqavitae            huge-webs  https://source.developers.google.com/p/huge-webs/r/aqavitae
aqualium            huge-webs  https://source.developers.google.com/p/huge-webs/r/aqualium
  1. gitを入れ込みたいフォルダまで移動する。
  2. gcloud source repos clone [REPO_NAME] でサーバのgitデータをcloneする。
  3. デスクトップからレポジトリ名で落としたファイルを確認する

*git init等はしなくても.git内にすでにリモートレポ情報等は全て入ってる。
*基本的なgitの使い方と変わらない。(gcloud コマンドはこの一回しかほぼ使わない)

・gitで開発等各種ブランチを持ってくる

  1. git branch'''でbranchを確認する。
hogenoAir:aeon hoge$ git branch
* master*

 → これでローカル(自分のPC)にブランチが一つしかないことがわかる。

  1. remoteリポジトリの状況から、開発ブランチを引っ張ってくるか、存在しなければ作成する。 ここでは、developが開発ブランチで、aeonがレポジトリ名。
ブランチあり
hogeAir:aeon hoge$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/develop
  remotes/origin/master
hogenoAir:aeon hoge$ git checkout -b develop remotes/origin/develop
Branch 'develop' set up to track remote branch 'develop' from 'origin'.
Switched to a new branch 'develop'
hogenoAir:aeon hoge$ git branch
* develop
  master
ブランチなし
hogeAir:aeon hoge$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
hogenoAir:aeon hoge$ git checkout develop
Branch 'develop' set up to track remote branch 'develop' from 'origin'.
Switched to a new branch 'develop'
hogenoAir:aeon hoge$ git branch
* develop
  master

3.add/commit/push/margeはgithub等と同じようにgitコマンドで反映されるので、行う。
gitの使い方に関しては、このサイトを見るとある程度わかるはず。

注)プルリクとか一部の機能はない。詳細はこちら

app.yamlファイルの作成

app.yamlの作成について、基本公式サイトのヘルプページを参考に作成する。

注意!サーバ管理者がURL等のアタッチの関係で[service]名を指定してくることがありますので、必ず確認をしてください

テストデプロイ

パソコン上でデプロイテストが可能な仕様になっているので、まずはapp.yamlファイルが動くか確認してみる。
初回もしくは不足分ファイルが有る時ver
1. 次のコマンドを入れる。 dev_appserver.py app.yaml

hogenoAir:saga-art hoge$ dev_appserver.py app.yaml
This action requires the installation of components: [app-engine-php, 
app-engine-python, cloud-datastore-emulator]


Your current Cloud SDK version is: 250.0.0
Installing components from version: 250.0.0

┌──────────────────────────────────────────────────────┐
│         These components will be installed.          │
├──────────────────────────────┬────────────┬──────────┤
│             Name             │  Version   │   Size   │
├──────────────────────────────┼────────────┼──────────┤
│ Cloud Datastore Emulator     │      2.1.0 │ 18.4 MiB │
│ gRPC python library          │            │          │
│ gRPC python library          │     1.20.0 │  1.9 MiB │
│ gcloud app PHP Extensions    │ 2017.09.15 │ 21.9 MiB │
│ gcloud app PHP Extensions    │            │          │
│ gcloud app Python Extensions │     1.9.86 │  6.0 MiB │
└──────────────────────────────┴────────────┴──────────┘

For the latest full release notes, please visit:
  https://cloud.google.com/sdk/release_notes

Do you want to continue (Y/n)? 

2.もちろん、Yを入力
3. 次のように出てくればサーバが立っているので、ブラウザでチェックする。http://localhost:8080

Do you want to continue (Y/n)?  Y

╔════════════════════════════════════════════════════════════╗
╠═ Creating update staging area                             ═╣
╠════════════════════════════════════════════════════════════╣      
╠═ Installing: Cloud Datastore Emulator                     ═╣
╠════════════════════════════════════════════════════════════╣
╠═ Installing: gRPC python library                          ═╣
╠════════════════════════════════════════════════════════════╣
╠═ Installing: gRPC python library                          ═╣
╠════════════════════════════════════════════════════════════╣
╠═ Installing: gcloud app PHP Extensions                    ═╣
╠════════════════════════════════════════════════════════════╣
╠═ Installing: gcloud app PHP Extensions                    ═╣
╠════════════════════════════════════════════════════════════╣
╠═ Installing: gcloud app Python Extensions                 ═╣
╠════════════════════════════════════════════════════════════╣
╠═ Creating backup and activating new installation          ═╣
╚════════════════════════════════════════════════════════════╝

Performing post processing steps...done.                                       

Update done!

Restarting command:
  $ dev_appserver.py app.yaml

INFO     2019-06-26 18:25:56,446 devappserver2.py:278] Skipping SDK update check.
WARNING  2019-06-26 18:25:57,938 simple_search_stub.py:1196] Could not read search indexes from /var/folders/6_/0jh560q14wb7cxj9x579g_k80000gn/T/appengine.None.hoge/search_indexes
INFO     2019-06-26 18:25:57,940 api_server.py:275] Starting API server at: http://localhost:52557
INFO     2019-06-26 18:25:57,952 dispatcher.py:256] Starting module "hoge-art" running at: http://localhost:8080
INFO     2019-06-26 18:25:57,955 admin_server.py:150] Starting admin server at: http://localhost:8000
WARNING  2019-06-26 18:25:57,955 devappserver2.py:373] No default module found. Ignoring.
INFO     2019-06-26 18:26:00,604 instance.py:294] Instance PID: 2676
INFO     2019-06-26 18:26:26,696 module.py:861] hoge-art: "GET / HTTP/1.1" 200 52469

"hoge-art" running at: http://localhost:8080 をみて、URLは適宜判断する。

4.テストが終わったらctrl+C で終了する。

本番編

GAEへアップロード

GAEの本番ファイルへアップロードを行う。
1. app.yamlが入ってるフォルダに行く。
2. 次のコマンドで、デプロイする。(後ろにnopromoteを付けとくことで、勝手に公開されないようにする。
gcloud app deploy --no-promote

GAE上で表示チェック

  1. デプロイ後、GoogleCloudConsoleのAppEngine内のversionへ移動する。
  2. まずは、青枠の部分をクリックして出てくるWebサイトでしっかり表示されるかチェックする。スクリーンショット 2019-06-27 3.36.57.png

本番移行

チェックで問題がなかったら、いよいよ本番アップデート
1. ファイル(チェックが付いているもの)へチェックを入れて左上の「トラフィックの移行」を選択する。スクリーンショット 2019-06-27 3.36.57.png
2.本番URLで確認を行う。

おわりに

一見、げー長い!っておもうかもしれませんが、
正直更新の時はgitの更新とローカルでチェック、
上げるときもgcloud app deployだけで勝手にビルドされるのはメリットですよね。。。
今後は、cloud functionsとかでmasterにマージされたら自動で上がるようにしたいですね(遠目

開発時間ほしい、そんなしがないSEでした。
(間違ってたら教えてもらえるとありがたいです。そして、へーとか思ったら「イイネ」ください!

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4