GridsomeでShifter Headlessのウェブサイト/ウェブアプリを開発し、AWS Amplify Consoleにデプロイする

要件

Shifterアカウント (アカウントの作成)
GitHubアカウント
AWSアカウント
Node.js
Gridsome CLI

Shifter Headlessの開始

Shifterダッシュボード (https://go.getshifter.io/)
にログインし、Headlessに移動します。
まだの場合は、新しいHeadlessサイトを作成します。詳細については、サポートドキュメント「Shifter
Headless WordPressの起動方法」を参照してください。
投稿/ページとメディアを作成またはインポートします。このドキュメントでは、テーマユニットテストファイルを使用します。次のURLから直接ダウンロードできます:
https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml
Shifter Headlessを起動し、そのURLをコピーします。WordPress URLの例:
https://shifterheadless-gridsome-aws-amplify.hl-a.getshifter.io

新しいGitHubリポジトリの作成

GitHub (https://github.com/)
にアクセスします。
リポジトリを作成します。Repositoriesメニューの近くにある[New]ボタンをクリックします。

リポジトリに名前を付けます。ここでは例として、shifterheadless-gridsome-aws-amplifyと名付けます。
リポジトリのURLをコピーします。URLは、git@github.com:YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git
または
https://github.com/YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git
になります。

ローカルで新しいGridsomeプロジェクトを作成

Node.jsをインストールします（まだの場合）。
- A. パッケージ経由でインストール: https://nodejs.org/en/download/
- B. homebrewとnodebrew経由でインストール: https://github.com/hokaccha/nodebrew
  および https://dev.to/toyotarone/how-to-install-nodejs-on-macos-with-nodebrew-4627
ローカルマシンに “Gridsome CLI” をインストールします。
次のコマンドを実行してインストールします:
```
$ npm install --global @gridsome/cli
```
詳細については、公式ドキュメントを参照してください。

新しいGridsomeプロジェクトを作成します。
gridsome create YOUR-PROJECT-NAME wordpress
コマンドを実行します。詳細については、Gridsomeの公式WordPressスタータードキュメントを参照してください。
例:

$ gridsome create shifterheadless-gridsome-aws-amplify wordpress

❯ Clone https://github.com/gridsome/gridsome-starter-wordpress.git 1.64s
❯ Update project package.json 0s
❯ Install dependencies 20.46s
- Enter directory cd shifterheadless-gridsome-aws-amplify
- Run gridsome develop to start local development
- Run gridsome build to build for production

作成されたプロジェクトディレクトリに移動します。
```
$ cd shifterheadless-gridsome-aws-amplify
```
または
```
$ cd YOUR-PROJECT-NAME
```

プロジェクトのgitを初期化および設定します。

$ git init

Initialized empty Git repository in shifterheadless-gridsome-aws-amplify/.git/

リモートURLを設定します。
リポジトリのoriginとしてリモートURLを追加します。

$ git remote add origin git@github.com:YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git

または

$ git remote add origin https://github.com/YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git

“gridsome.config.js”を編集し、変更を保存します。
ShifterダッシュボードでコピーしたWordPress
URLでYOUR_WEBSITE_URLを書き換えます。

plugins: [
  {
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: 'YOUR_WEBSITE_URL', // 必須
      typeName: 'WordPress', // GraphQLスキーマ名 (オプション)
    }
  }
]

以下のようにします:

plugins: [
  {
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: 'https://shifterheadless-gridsome-aws-amplify.hl-a.getshifter.io', // 必須
      typeName: 'WordPress', // GraphQLスキーマ名 (オプション)
    }
  }
]

Gridsomeウェブサイトの動作を確認するために、developコマンドを実行します。
```
$ gridsome develop
```
ウェブサイトの確認: http://localhost:8080/
GraphQLデータの探索: http://localhost:8080/___explore
問題がなければ、[Ctrl]キーと[C]キーを押してサーバーを停止します。
ウェブサイトをビルドしましょう。
データをビルドするために、buildコマンドを実行します。
```
$ gridsome build
```
すべてのデータはdistディレクトリにビルドされます。

ファイルをコミットし、GitHubにプッシュします。

$ git add .
$ git commit -m "first deployment"
$ git push origin master

AWS Amplify
Consoleでの作業とデプロイ

AWS Amplify Console (https://console.aws.amazon.com/amplify/home)
に移動します。
[Connect app]ボタンをクリックします。
Gitサービスを選択し、[Continue]ボタンをクリックします。ここでは例としてGitHubを使用します。
[Authorize aws-amplify-console]ボタンをクリックして続行します。
選択したGitサービス（GitHub）のパスワードを入力し、[Confirm
password]をクリックします。
リポジトリのブランチを追加し、[Next]ボタンをクリックします。
- Repository: shifterheadless-gridsome-aws-amplify
- Branch: master
[Edit]ボタンをクリックして設定します。
baseDirectoryを/distに編集し、[Save]をクリックします。
[Next]ボタンをクリックします。
[Save and deploy]ボタンをクリックします。
Amplifyが作業を開始します。
AWS Amplifyがウェブアプリをビルドしています。
ビルドが成功し、デプロイされました。
"amplifyapp.com"で終わる生成されたURLをクリックして、ウェブアプリを確認します。
ウェブアプリが完成しました！