gae-initをWindows10にインストールしてみる

# gae-init とは
gae-initは、Google App Engineで新しいWebアプリケーションを起動する最も簡単な方法です。すぐに次の作業に取り掛かるために必要なものがすべて揃っています。
gae-init is the easiest way to kick start new web applications on Google App Engine, with everything that you need to start working on your next big thing right away!

# 開発環境の準備（Windows10）

## ユーザー環境
ユーザーフォルダーのフォルダー名は、英数にしてください。日本語などのフォルダー名の場合、Google Cloud SDK のインストールに失敗します。

## Python 用 Cloud SDK のインストール
https://cloud.google.com/appengine/docs/standard/python/download

### Python バージョン 2.7
Python バージョン 2.7 をインストールします。 
https://www.python.org/downloads/
例えば、Python 2.7.16 (Release Date: March 4, 2019)の64bit版をインストールします。

【PATH】インストール中に、python.exeのPathを通すオプションを追加してください。
![python-path.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/a7e7481b-f95d-fc91-5e49-e3b565909b0a.png)

## Google Cloud SDK
Google Cloud SDK をインストールして初期化します。
https://cloud.google.com/sdk/docs/

初期化中（gcloud init）にGoogleアカウントへのログインとプロジェクトの選択が求められますので、Finishボタンを押下する前に準備しておきます。
![GoogleCloudSDK Setup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/d4469ca9-3c35-e418-6e07-00b01bda89c7.png)

## Python 用の App Engine 拡張機能
次のコマンドを実行して、Python 用の App Engine 拡張機能が含まれている gcloud コンポーネントをインストールします。
【注意】Google Cloud SDK Shell を「管理者として実行」する必要があります。

```
gcloud components install app-engine-python
```

## Node.js
Node.jsの最新版をインストールします。LTSでもCurrentでもどちらでもよいのですが、今回は、LTSをインストールします。
Latest LTS Version: 10.15.3 (includes npm 6.4.1)
https://nodejs.org/en/

## Gulp
gulp（ガルプ）をグローパルにインストールします。

```
npm install -g gulp
```

## pip
pipをインストールします。次のファイルをダウンロードし、ダウンロードしたフォルダで、実行します。
https://bootstrap.pypa.io/get-pip.py

```
python get-pip.py
```

## virtualenv
virtualenvをインストールします。
【注意】コマンドプロンプト を「管理者として実行」する必要があります。

```
pip install virtualenv
```

## Git
「サルでもわかるGit入門」を参考に、msysgitとTortoiseGitとをインストールします。
https://backlog.com/ja/git-tutorial/intro/05/

# プロジェクトのクローンとインストール

## Git Clone
GitHubのgae-initプロジェクトを開き、「Clone or download」ボタンで、URLをコピーする。
https://github.com/gae-init/gae-init

c:\myproj\ などの作業フォルダを作成し、エクスプローラーの右クリックで、「Git Clone..」を選択します。 
保存先のディレクトリを「c:\myproj\hello」に変更し、OKボタンで、Cloneを作成します。
![GitClone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/d027963a-efcb-c17a-e0eb-683e5231b441.png)

## インストール
コマンドプロンプトで、保存先のディレクトリへ移動し、次のインストールコマンドを実行します。

```
cd c:\myproj\hello
npm install
```

## ローカルサーバーで起動
次のコマンドを実行するとローカルサーバーが起動し、ブラウザーにページが表示されます（はずですが・・・）。
【注意】Google Cloud SDK Shell を「管理者として実行」する必要があります。
【ファイアウォール】初回起動時には、ファイアウォールのアクセス許可をします。

```
cd c:\myproj\hello
gulp
```

初回起動時は、インストールに時間がかかります。
![CloudSDKinstalle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/a31845c0-1676-edbc-fed3-96ea6a00d32b.png)

## エラー
次のエラーが発生し、正常に起動できません・・・

```
  File "c:\myproj\hello\main\main.py", line 4, in <module>
    import flask
ImportError: No module named flask
```

# Windows Subsystem for Linux (Ubuntu)
結局、ストアからUbuntuをインストールして、Ubuntu上で開発環境を用意します。
![ubuntu_store.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/2ad55d8a-2334-b77f-ba66-1eb40cbb5679.png)

## 開発環境のインストール
![ubuntu_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/6370df2e-27ec-9d06-36e9-f34ce981af84.png)
UbuntuのアップグレードとPythonのインストール後に、開発環境をインストールします。
※インストール中、Enterキーで進めていきます。

```
sudo apt -y update
sudo apt -y upgrade
sudo apt -y autoremove

sudo apt -y install python

curl https://sdk.cloud.google.com | bash
gcloud components install app-engine-python

sudo apt -y install nodejs
sudo apt -y install npm
sudo apt -y install yarn

sudo npm install -g gulp

curl https://bootstrap.pypa.io/get-pip.py | sudo python
sudo pip install virtualenv

sudo apt -y install git
```

## サンプル hello
gae-initのクローンを取得し、インストール後、gulpを実行すると、ブラウザーに表示されます。
※ ファイアウォールを許可してください。

```
git clone https://github.com/gae-init/gae-init.git hello
cd hello
npm install
gulp
```
![localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/55ac6ed6-f16a-2a2f-24a9-d0817b3c3dc2.png)

# まとめ
結局、Ubuntuでのインストールでした。

## virtualenv - 追記 2019/09/25

virtualenvで、Virtual Environment内で、実行すれば良いみたいです。

```
cd c:\myproj\hello
virtualenv venv
venv\scripts\activate
```