goormide から Google Cloud Platform node.js へ NUXT.js SSR をデプロイ

※超初心者が書いた自分への備忘録です。

####● [Google Cloud Platform でプロジェクトを作成する。](https://console.cloud.google.com/cloud-resource-manager?_ga=2.170908768.-1598216285.1563958741)


####● [goormide](https://ide.goorm.io/my) にて環境確認

```console
$ node -v
v10.15.3
$ npm -v
6.9.0
```
####● Google Cloud ツール を インストールする。
[Google Cloud ツール Ubuntu 用のインストール手順。](https://cloud.google.com/sdk/docs/quickstart-debian-ubuntu)

```console
$ export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)"
$ echo "deb http://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" | tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
$ curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add -
$ apt-get -y update && apt-get install -y google-cloud-sdk

$  gcloud -v
Google Cloud SDK 260.0.0
alpha 2019.08.23
beta 2019.08.23
bq 2.0.47
core 2019.08.23
gsutil 4.42
kubectl 2019.08.23

To take a quick anonymous survey, run:
  $ gcloud alpha survey
```
####● SDK の初期化

```console
$ gcloud init
...
You must log in to continue. Would you like to log in (Y/n)?  y
Go to the following link in your browser:
   https://accounts.google.com/o/oauth2/auth?code_challenge=TCp.......reauth

Enter verification code:
```
上記URLにアクセスして code を取得してペーストする。

```console
Pick cloud project to use:
 [1] clean-mason-xxxxx
 [2] oauth2-xxxxx-xxx
 [3] test-nuxt-xxxxx
 [4] Create a new project
Please enter numeric choice or text value (must exactly match list item): 3
```

####● [create-nuxt-app ](https://github.com/nuxt/create-nuxt-app)でNUXTアプリを作成する。
実行すると対話式でNuxt.jsプロジェクトの作成を行う。

```console
$ cd /workspace
$ npx create-nuxt-app TestNUXTJS

? Project name (gae-node-nuxt-ssr-example) [Enter]
? Project description (My stylish Nuxt.js project) [入力] Nuxt.js Universal Mode on GAE/SE Node.js
? Author name () [入力] beginnnnner
? Choose a package manager (Use arrow keys) [選択] npm
? Choose UI framework (Use arrow keys) [選択] none
? Use a custom server framework [選択] none
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) [選択] Axios
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) [Enter] 
? Choose test framework (Use arrow keys) [Entet] none
? Choose rendering mode (Use arrow keys) [Enter] ❯ Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) [Enter]

...
...
                                      :-:
                                    .==-+:
                                   .==. :+- .-=-
                                  .==.   :==++-+=.
                                 :==.     -**: :+=.
                                :+-      :*+++. .++.
                               :+-      -*= .++: .=+.
                              -+:      =*-   .+*: .=+:
                             -+:     .=*-     .=*-  =+:
                           .==:     .+*:        -*-  -+-
                          .=+:.....:+*-.........:=*=..=*-
                          .-=------=++============++====:

                           Thanks for installing nuxtjs
                  Please consider donating to our open collective

🎉  Successfully created project TestNUXT

  To get started:

        cd TestNUXT
        npm run dev

  To build & start for production:

        cd TestNUXT
        npm run build
        npm run start
```
インストールが完了したら以下を実行

```console
$ cd gae-node-nuxt-ssr-example
$ npm run dev
```

goormide メニュー > プロジェクト > 実行URLとポート > testoop.run.goorm.io 3000 [登録] 
指定したURLにブラウザからアクセスする。

Connected refused
上手くいかなかった orz

####対応策
nuxt.config.js にポートを指定する。

```console
export default {
  server: {
    port: 8080, // デフォルト: 3000
    host: '0.0.0.0', // デフォルト: localhost
  },
```
goormide メニュー > プロジェクト > 実行URLとポート > testoop.run.goorm.io 8080 [登録] 
指定したURLにブラウザからアクセスする。

Good!

####● [Google App Engine へデプロイする](https://ja.nuxtjs.org/faq/appengine-deployment/)
[簡単！GAE/SE Node.jsでNuxt.jsをUniversalモードで動かしてみた](https://www.apps-gcp.com/gae-node-nuxt-universal-mode/)
Nuxt.jsプロジェクト直下に以下の内容のapp.yamlファイルを作成します。

```yaml
runtime: nodejs10
 
handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
  - url: /.*
    script: auto
 
env_variables:
  NUXT_HOST: '0.0.0.0'
  NUXT_PORT: '8080'
```
ビルドしてデプロイする。

```console
$ npm run build
$ gcloud app deploy
...
Do you want to continue (Y/n)?  y

Beginning deployment of service [default]...
Created .gcloudignore file. See `gcloud topic gcloudignore` for details.
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 52 files to Google Cloud Storage               ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...failed.
ERROR: (gcloud.app.deploy) Error Response: [7] Access Not Configured. Cloud Build has not been used in project test-nuxt-xxxx before or it is dis
abled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview?project=test-nuxt-xxxx then retry.
 If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
```
[Cloud Build API が無効ならを有効にしてからデプロイを実行する。](https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview)

```console
$ gcloud app deploy
...
Do you want to continue (Y/n)?  y

Beginning deployment of service [default]...
Created .gcloudignore file. See `gcloud topic gcloudignore` for details.
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 1 file to Google Cloud Storage                 ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://test-nuxt-xxx.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse
```
ブラウザで https://test-nuxt-xxx.appspot.com にアクセスする。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366837/43a120af-b5d0-2d95-d684-d4325962b228.jpeg)


[Google Cloud Platform ダッシュボード](https://console.cloud.google.com/home/dashboard?folder=&hl=ja&organizationId=)