この記事は Jamstack Advent Calendar 2020 17日目の投稿です。先日の「Jamstack ガールの奮闘記！非エンジニアのヘッドレスCMS と Amplify Console の話」にも書いたように、私は非エンジニアでマーケターです。普段は、コードを書くこともなく、GitHub を使うこともなく、黒い画面（ターミナル）を立ち上げることはありません。
そんな私ですが、Jamstack な構成を概要だけで学ぶのではなく、触って体で覚えてということを好きでやっています。ですが、Customer Marketing Manager の立場で人に説明や登壇を行ったり、課題解決にどう役立つのか、運用はどうなのか、製品の魅力は何かなど、言葉の重みや理解を深めての会話は非常に重要なことだと思っています。またエンジニアと会話をしたりする時にも絵が少しでもわかってることも大事だと思っています。
だからこそ、黒画面と格闘はしますがこういったチャレンジを続けていくようにしています。
というわけで、今回チャレンジした「ヘッドレスコマース」について奮闘した構築の様子をまとめました。
やりたいこと
しかし、結果的にこの構成は断念。
この構成をまずはやってみることにしました。
断念の理由は「何を書いたらいいのかわからない」ということで、いったん諦めました。そう、いったんです。
それでは、はりきってやってみるとします！
Ⅰ. Gatsby の準備
- Gatsby をインストール
- Gatsby を使うために Node.js や Homebrew をインストール
- GatsbyJS の Shopify スターターキットを GitHub にアップロード
ここが非エンジニアの私にとって苦手なところです。なので、一番真っ先に取り掛かりました。インストールにインストールを重ね、作業場を準備していると何を私はしたかったんだっけ？と、ふと思ってしまう作業。何回かやったことはあるにもかかわらず、毎回もたついてしまいます。
Gatsby についてはこちらのドキュメントを参考に進めて行きました。
次に、GatsbyJS の Shopify スターターキット については コマンドを使って GitHub のリポジトリに。
$ gatsby new my-gatsby-project https://github.com/AlexanderProd/gatsby-shopify-starterII. Shopify で Storefront API を有効化し、ストアフロントのアクセストークンを取得
- Shopify ストアにログイン
- 商品を登録
- アプリ管理で Storefront API を有効化し、新しいプライベートアプリを作成
- プライベートアプリを作成するために、名称や必要な情報を入力
- 全ての項目にチェックを入れ、作成
Ⅲ. GatsbyJS の Shopify スターターキットの「.env.development」「.env.production」のソースを書き換える
- Shopify で作成したプライベートアプリの「ストアフロントのアクセストークン」と「ストアのアカウント名」に置き換える
SHOP_NAME=自分の Shopify ストアのアカウント名
SHOPIFY_ACCESS_TOKEN=発行したストアフロントのアクセストークン- Gatsby をデプロイする
Ⅳ. AWS Amplify Console でデプロイする
- AWS コンソールにログインし、Amplify Console を立ち上げる
- アプリを作成する
- 作成するアプリは GitHub を選んで接続させる
- 作成したリポジトリを選び、Branch を master に設定、順に進む
- ビルド＆デプロイ
以上で設定は完了しました。仕上がりは、、、
で、できた？
できてません！！！！！！！！！
全体の構築としてはできたとは思いますが、写真（画像）がぶっ飛んでます！
なんてこった！
GatsbyJS 側？とにかく何かしないといけないのですが、すぐにわかりそうにないので、いったん寝かして今日はここで断念します。やりたいことまではまだまだチャレンジは続きます、、、
今回チャレンジしたヘッドレスコマースは、大型のエンタープライズなショッピングサイトや Headless が得意とするマルチ管理の構成の体験として始めたものでした。
今回私が行ったように、スターターキットを利用して、簡単なチュートリアルを試すことができます。興味のある方はぜひ！そして情報交換などできたら嬉しいです。
それでは。Ciao!! Hasta Luego!!